CSS Yayınlamayı optimize etme

Bu kural, PageSpeed Insights bir sayfanın, oluşturma işlemini engelleyen harici stil sayfaları içerdiğini ve bunun da ilk oluşturma süresini geciktirdiğini algıladığında tetiklenir.

Genel bakış

Tarayıcının içeriği oluşturabilmesi için önce geçerli sayfaya ait tüm stil ve düzen bilgilerini işlemesi gerekir. Sonuç olarak tarayıcı, harici stil sayfaları indirilip işlenene kadar oluşturma işlemini engeller. Bu da birden fazla döngü gerektirebilir ve ilk oluşturma süresini uzatabilir. Kritik oluşturma yolu hakkında daha fazla bilgi edinmek için oluşturma ağacı yapısı, düzen ve boyama bölümüne ve oluşturma engelini kaldırıp CSS yayınını iyileştirmeyle ilgili ipuçları için oluşturmayı engelleyen CSS konusuna bakın.

Öneriler

Dış CSS kaynaklarının boyutu küçükse bu kaynakları doğrudan HTML dokümanının içine yerleştirebilirsiniz. Bu işleme satır içine alma adı verilir. Küçük boyutlu CSS'leri bu şekilde satır içine almak, tarayıcının sayfayı oluşturmaya devam etmesine olanak verir. CSS dosyasının boyutu büyükse, CSS'yi tamamen satır içine almanız durumunda PageSpeed Insights'ın Görülebilir İçeriğe Öncelik Vererek sayfanızın ekranın üst kısmındaki bölümünün çok büyük olduğu uyarısını verebileceğini unutmayın. Büyük bir CSS dosyası söz konusu olduğunda, ekranın üst kısmı ile ilgili içeriği oluşturmak için gereken CSS'yi belirleyip satır içine almanız, kalan stillerin yüklemesini ise ekranın üst kısmının içeriğinden sonraya ertelemeniz gerekir.

Küçük bir css dosyasını satır içine alma örneği

HTML belgesi aşağıdaki gibiyse: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
small.css kaynağı da şöyle ise: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Ardından kritik CSS'yi aşağıdaki gibi satır içine alabilirsiniz: 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Kritik/kritik olmayan CSS'nin belirlenmesi, kritik CSS'nin satır içine alınması ve kritik olmayan CSS'nin ertelenmiş yüklemesi dahil olmak üzere bu dönüşüm, prioritize_critical_css filtresini etkinleştirdiğinizde nginx, apache, IIS, ATS ve Open Lightspeed için PageSpeed Optimizasyon modülleri tarafından otomatik olarak yapılabilir.

CSS'nin eşzamansız olarak yüklenmesine yardımcı olan loadCSS işlevine de bakın. Bu işlev, bir web sayfasından kritik CSS'yi ayıklamak için bir araç olan Critical ile çalışabilir.

Ekranın üst kısmındaki içeriğin stilini belirlemek için gereken kritik stiller satır içine yerleştirilir ve dokümana hemen uygulanır. Sayfanın ilk boyanmasından sonra small.css'nin tamamı yüklenir. Stilleri, kritik içeriğin ilk oluşturulmasını engellemeden, sayfa yüklendikten sonra uygulanır.

Yakında web platformunun, HTML İçe Aktarma özelliğiyle JavaScript kullanmak zorunda kalmadan stil sayfalarını oluşturmayı engellemeyecek şekilde yüklemeyi destekleyeceğini unutmayın.

Büyük veri URI'lerini satır içine almayın

Veri URI'lerini CSS dosyalarına satır içi olarak eklerken dikkatli olun. CSS'nizde küçük veri URI'lerinin seçmeli kullanımı anlamlı olsa da büyük boyutlu veri URI'lerini satır içine almak, ekranın üst kısmındaki CSS'nizin boyutunun daha büyük olmasına neden olarak sayfa oluşturma süresini yavaşlatır.

CSS özelliklerini satır içine almayın

HTML öğelerinde CSS özelliklerini satır içine alma (ör. <p style=...>) kullanmaktan kaçının. Bu durum genellikle gereksiz kod tekrarına neden olur. Dahası, HTML öğelerinde satır içi CSS'ler varsayılan olarak İçerik Güvenliği Politikası (CSP) ile engellenir.

Geri bildirim

Bu sayfayı yararlı buldunuz mu?