Kritik olmayan CSS'leri ertele

Demián Renzulli

CSS dosyaları oluşturma engelleyen kaynaklardır: Tarayıcı sayfayı oluşturmadan önce yüklenmesi ve işlenmesi gerekir. Gereksiz yere 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:

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:

Bu, tarayıcı ekranda tek bir piksel çizmeden önce 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ıp 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.

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, altyazı ve akordeon düğmeleri dahil olmak üzere görünür içeriği oluşturmak için bu öğelere 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 bilgilerle, CSS'nizi tarayıcı sayfa yüklendikten hemen sonra kritik stilleri işlemeye başlayabilecek ve kritik olmayan CSS'yi daha sonraya erteleyebilecek şekilde optimize edin:

1. Kapsam raporunda yeşil renkle işaretlenmiş sınıf tanımlarını ayıklayın ve bu sınıfları sayfanın başındaki bir <style> bloğuna koyun:

   <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 kalıbı uygulayarak sınıfların geri kalanını ayarsı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 kılavuzunda bulabilirsiniz.
• link içindeki onload özelliği, stil sayfası yüklenmeyi tamamladığında tarayıcının CSS'yi işlemesine olanak tanır.
• onload işleyicisi kullanıldıktan sonra "boşaltılması", bazı tarayıcıların rel özelliğini değiştirirken işleyiciyi yeniden çağırmasını önler.
• noscript öğesindeki stil sayfasına verilen referans, JavaScript'i yürütmeyen tarayıcılar için yedek bir yöntem sağlar.

Çoğu stil eşzamanlı olarak yüklenmemiş olsa bile sonuçta ortaya çıkan sayfa önceki sürüme tamamen benzer. Satır içi stiller ve CSS dosyasına yapılan eşzamansız istek, HTML dosyasında aşağıdaki gibi görünür:

Gözle

Optimize edilmiş sayfada başka bir Performans izlemesi yapmak 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 beklemesi gerekmediği anlamına gelir:

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:

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:

Sonraki adımlar ve referanslar

Bu kılavuzda, sayfada kullanılmayan kodu manuel olarak ayıklayarak kritik olmayan CSS'yi nasıl erteleyebileceğ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çlardan bazılarını kapsar ve bu araçların pratikte nasıl çalıştığını görmek için bir kod laboratuvarı içerir.