CSS Yayınlamayı optimize etme

ziyaret edin. Bu kural, PageSpeed Insights, bir sayfada oluşturma engelleyici harici reklam bulunduğunu algıladığında tetiklenir ilk oluşturma süresini geciktiren stil sayfaları.

Genel Bakış

Tarayıcının içerik oluşturabilmesi için öncelikle içeriğe ilişkin tüm stil ve düzen bilgilerini işlemesi gerekir: geçerli sayfa. Sonuç olarak, harici stil sayfaları harici stil sayfaları devre dışı bırakılana kadar tarayıcı indirilip işlenir. Bu işlem, birden fazla döngü gerektirebilir ve ilk oluşturma süresini geciktirebilir. Bkz. oluşturma, ağaç yapısı ve boya gibi yöntemlerle ilgili daha fazla bilgiyi ve oluşturma CSS'yi engelleme başlıklı makaleye göz atı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 almak, PageSpeed Insights'ın ekranın üst kısmının bölümünün Görünür İçeriğe Öncelik Verme nedeniyle çok büyük olduğunu tespit ettik. 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 dokümanı şöyle ise: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
small.css kaynağı da şöyle: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Bu durumda kritik CSS'yi aşağıdaki şekilde 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'lerin belirlenmesi de dahil olmak üzere bu dönüşüm kritik CSS'nin satır içine alınması ve kritik olmayan CSS'nin ertelenmiş yüklemesi, tarafından otomatik olarak Şu veriler için PageSpeed Optimizasyon modülleri: nginx, apache, IIS, ATS ve Open Lightspeed'i de ekleyebilirsiniz. prioritize_critical_css filtresini uygulayın.

Ayrıca bkz. loadCSS yardımcı olan CSS'nin eşzamansız olarak yüklenmesine yardımcı olmak için Kritik, Web sayfasından kritik CSS'yi ayıklamak için kullanılan bir araçtır.

Ekranın üst kısmındaki içeriğin stilini belirlemek için gereken kritik stiller satır içine alınır ve dokümana hemen uygulanır. Tam small.css, sayfanın ilk boyanmasından sonra yüklenir. Stilleri, sayfa yüklendikten sonra önemli içeriğin ilk oluşturulmasını engellemeden sayfaya uygulanır.

Web platformunun yakında stil sayfalarını oluşturmayı engellemeyecek şekilde, HTML İçe Aktarma kullanarak JavaScript kullanmaya gerek kalmadan 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ı mantıklı olsa da satır içi büyük veri URI'leri, ekranın üst kısmındaki CSS'nizin boyutunun daha büyük olmasına neden olabilir ve bu da sayfa oluşturma süresini yavaşlatır.

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

CSS özelliklerini HTML öğelerinde satır içine alma (ör. <p style=...>) gereksiz yere kod tekrarına neden olacağından, bu işlemden mümkün olduğunca kaçınılmalıdır. Ayrıca, HTML öğelerinde satır içi CSS'ler varsayılan olarak İçerik Güvenliği Politikası (İGP).

Geri bildirim

Bu sayfayı yararlı buldunuz mu?

'nı inceleyin.