Kritik olmayan CSS'leri ertele

Demián Renzulli
Demián Renzulli

CSS dosyaları, oluşturmayı engelleyen kaynaklardır: Tarayıcı sayfayı oluşturmadan önce bunların yüklenmesi ve işlenmesi gerekir. Gereksiz şekilde büyük stil sayfaları içeren web sayfalarının oluşturulması daha uzun sürer.

Bu kılavuzda, kritik oluşturma yolunu optimize etmek ve ilk içerikli boyamayı (FCP) iyileştirmek için kritik olmayan CSS'yi nasıl erteleyebileceğinizi öğreneceksiniz.

Örnek: En uygun CSS yükleme yöntemi kullanılmamış

Aşağıdaki örnekte, her biri farklı bir sınıfla biçimlendirilmiş üç gizli metin paragrafı içeren bir akordeon yer almaktadır:

Bu sayfa, sekiz sınıf içeren bir CSS dosyası ister ancak "görünür" içeriğin oluşturulması için bunların hepsinin gerekli olmadığı anlaşılıyor.

Bu kılavuzun amacı, bu sayfayı yalnızca kritik stillerin senkronize olarak yüklenmesi, geri kalanların (paragraf stilleri dahil) ise engellenmeyen bir şekilde yüklenmesi için optimize etmektir.

Ölçüm

Sayfada Lighthouse'u çalıştırın ve Performans bölümüne gidin.

Raporda, değeri "1 saniye" olan İlk Zengin İçerikli Boyama metriği ve style.css dosyasını işaret eden Oluşturma işlemini engelleyen kaynakları ortadan kaldır fırsatı gösterilmektedir:

"Fırsatlar" bölümünün altında "1'lerin FCP'sini ve "Engelleyen kaynakları ortadan kaldırın"ın gösterildiği, optimize edilmemiş sayfayla ilgili Lighthouse raporu
Lighthouse raporu, sayfanızı daha hızlı yüklemek için stil sayfanızı basitleştirmenizi öneriyor.

Bu CSS'nin oluşturmayı nasıl engellediğini görselleştirmek için:

  1. Chrome'da sayfayı açın.
  2. Geliştirici Araçları'nı açmak için Control+Shift+J (veya Mac'te Command+Option+J) tuşuna basın.
  3. Performans sekmesini tıklayın.
  4. Performans panelinde Yeniden yükle'yi tıklayın.

Elde edilen izlemede, FCP işaretçisinin CSS'nin yüklenmesi tamamlandıktan hemen sonra yerleştirildiğini görürsünüz:

CSS yüklendikten sonra başlayan FCP'yi gösteren, optimize edilmemiş sayfanın performans izlemesi.
Optimize edilmemiş demo sayfasında, CSS'nin yüklenmesi bitene kadar FCP gerçekleşemez.

Bu, ekranda tek bir piksel boyamadan önce tarayıcının tüm CSS'nin yüklenmesini ve işlenmesini beklemesi gerektiği anlamına gelir.

Optimize etme

Bu sayfayı optimize etmek için hangi sınıfların kritik olarak kabul edildiğini bilmeniz gerekir. Bunu belirlemek için Kapsam Aracı'nı kullanın:

  1. Geliştirici Araçları'nda Control+Shift+P veya Command+Shift+P (Mac) tuşuna basarak Komut Menüsü'nü açın.
  2. "Kapsam" yazın ve Kapsamı Göster'i seçin.
  3. Sayfayı yeniden yüklemek ve kapsamı yakalamaya başlamak için Yeniden yükle'yi tıklayın.
Kullanılmayan baytların %55,9'unu gösteren CSS dosyası kapsamı.
Kapsam raporu, CSS'nizin ilk sayfa yüklemesinde aslında ne kadarının kullanıldığını gösterir.

Ayrıntıları görmek için raporu çift tıklayın:

  • Yeşil renkle işaretlenen sınıflar kritiktir. Tarayıcı, başlık, alt başlık ve akordeon düğmeleri de dahil olmak üzere görünür içeriği oluşturmak için bunlara ihtiyaç duyar.
  • Kırmızıyla işaretlenen sınıflar kritik değildir ve yalnızca gizli paragraflar gibi hemen görünmeyen içeriği etkiler.

Bu bilgileri kullanarak CSS'nizi optimize edin. Böylece, sayfa yüklendikten hemen sonra tarayıcının kritik stilleri işlemeye başlayabilir ve kritik olmayan CSS'leri daha sonrası için erteleyebilirsiniz:

  1. Kapsam raporunda yeşille işaretlenen sınıf tanımlarını çıkarın ve bu sınıfları sayfanın başındaki bir <style> bloğuna yerleştirin:

    <style type="text/css">
    .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
    </style>
    
  2. Aşağıdaki modeli uygulayarak sınıfların geri kalanını eşzamansız olarak yükleyin:

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
    

Bu, CSS'yi yüklemenin standart yolu değildir. İşleyiş şekli:

  • link rel="preload" as="style", stil sayfasını eşzamansız olarak ister. preload hakkında daha fazla bilgiyi Kritik öğeleri önceden yükleme rehberinde bulabilirsiniz.
  • link içindeki onload özelliği, stil sayfası yüklenmeyi tamamladığında CSS'nin tarayıcı tarafından işlenmesine olanak tanır.
  • onload işleyiciyi kullanıldıktan sonra "null" etmek, bazı tarayıcıların rel özelliğini değiştirdiklerinde işleyiciyi tekrar çağırmalarını önlemelerine yardımcı olur.
  • noscript öğesinin içindeki stil sayfasına yapılan referans, JavaScript yürütmeyen tarayıcılar için yedek sağlar.

Çoğu stil eşzamansız olarak yüklense bile, sonuçta bulunan sayfa önceki sürümle tamamen aynıdır. Satır içi stiller ve eşzamansız isteğin HTML dosyasında nasıl görüneceği aşağıda verilmiştir:

Gözle

Optimize edilmiş sayfada başka bir Performans izlemesi çalıştırmak için Geliştirici Araçları'nı kullanın.

FCP işaretçisi, sayfa CSS'yi istemeden önce görünür. Bu, tarayıcının sayfayı oluşturmadan önce CSS'nin yüklenmesini beklemesine gerek olmadığı anlamına gelir.

Optimize edilmiş sayfa için Geliştirici Araçları performans izlemesi. FCP&#39;nin CSS yüklenmeden önce başladığı anlamına gelir.
Optimize edilmiş sayfada FCP, stil sayfası yüklenmeden önce başlayabilir.

Son adım olarak, optimize edilmiş sayfada Lighthouse'u çalıştırın.

Raporda, FCP sayfasının 0,2 saniye (%20 oranında bir iyileşme) kısaltıldığını görürsünüz:

&quot;0,8 saniye&quot; olan FCP değerini gösteren Lighthouse raporu.
Yeni ve azaltılmış FCP.

Oluşturmayı engelleyen kaynakları ortadan kaldırın önerisi artık Fırsatlar bölümünde değil, Geçen Denetim Sonuçları bölümünde gösterilmektedir:

&quot;Başarılı Denetimler&quot; bölümünde &quot;Engelleyen kaynakları ortadan kaldırın&quot; ifadesinin gösterildiği Lighthouse raporu.
Sayfa artık engelleme kaynakları denetiminden geçmiştir.

Sonraki adımlar ve referanslar

Bu kılavuzda, sayfada kullanılmayan kodu manuel olarak çıkararak kritik olmayan CSS'leri nasıl erteleyeceğinizi öğrendiniz. Daha karmaşık üretim ortamları için kritik CSS'yi ayıklama kılavuzu, kritik CSS'yi ayıklamak için en popüler araçların bazılarını kapsar ve bu araçların pratikte nasıl çalıştığını görmek için bir kod laboratuvarı içerir.