CSS Yayınlamayı Optimize Etme

Bu kural, PageSpeed Insights, bir sayfada oluşturma engelleyen dış stil sayfaları bulunduğunu belirlediğinde tetiklenir. Bu stil sayfaları, içeriğin ekranda gösterilmesini geciktirir.

Genel Bakış

Tarayıcılar, içeriği ekranda göstermeden önce dış CSS dosyalarını engeller. Bu durum, ek ağ gecikmesine neden olur ve içeriğin ekranda görüntülenmesi için gereken süreyi artırır.

Ö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ük olursa, CSS'yi tamamen satır içine almanız durumunda PageSpeed Insights'ın Görülebilir İçeriğe Öncelik Verme kapsamında sayfanızın ekranın üst kısmına ait 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 dokümanı şöyle ise:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

Ve small.css kaynağı şöyle ise:

  .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>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Orijinal small.css, sayfanın yüklenmesinden sonra yüklenir. Tüm <style> ve <link> öğelerinin JavaScript kullanılarak dokümana eklenmesi ile CSS kurallarının uygulama sırası korunur.

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. Belirli küçük boyutlu veri URI'lerinin CSS'nizde kullanılması anlamlı olsa da, büyük boyutlu veri URI'lerini satır içine almak, ekranın üst kısmına ait CSS'nizin boyutunu artırır ve bu durum sayfa yüklemeyi yavaşlatır.

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

CSS özelliklerini HTML öğelerinde (ör. &lt p style=...&gt) satır içine almak, genellikle gereksiz kod tekrarına yol açtığından, bunu yapmaktan olabildiğince kaçının. Dahası, HTML öğelerinde satır içi CSS'ler varsayılan olarak İçerik Güvenlik Politikası (CSP) tarafından engellenir.