Kritik olmayan CSS'leri ertele

Demián Renzulli

Önemli: Bu kılavuzda, performansı artırabilecek ancak düzgün şekilde uygulanmazsa hatalara da neden olabilecek gelişmiş bir performans tekniği açıklanmaktadır. Çoğu site, bu tekniği uygulamadan önerilen performans hedeflerimizin tümüne ulaşabilir.

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:

Lighthouse raporu, sayfanızı daha hızlı yüklemek için stil sayfanızı basitleştirmenizi öneriyor.

Not: Bu demo sitesinde çok küçük bir stil sayfası kullanılmaktadır. Üretim senaryolarında çok daha büyük CSS dosyalarına ihtiyaç duyulması yaygındır. Lighthouse, bir sayfada ekranın üst kısmındaki içeriği oluştururken kullanılmayan en az 2048 bayt CSS kuralı olduğunu tespit ederse Kullanılmayan CSS'yi kaldır önerisini de gösterir.

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:

Optimize edilmemiş demo sayfasında, CSS yüklenmeyi bitirene kadar FCP gerçekleşemez.

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.

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, 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.

Not:

Gerçek bir üretim senaryosuna yönelik olarak, bu davranışı kapsayabilen ve tarayıcılar arasında iyi çalışan, ayrıca satır içi onload JavaScript'e izin vermeyen bir İçerik Güvenliği Politikası destekleyen loadCSS gibi CSS'yi geciktiren işlevler kullanmanızı öneririz.

CSS bağlantısını sayfanın alt kısmına da yerleştirebilirsiniz. Böylece, Firefox ve Chrome'da stil sayfasını beklemeden içeriğin oluşturulmasını sağlayabilirsiniz. Ancak tarayıcı bu durumda stil sayfasına öncelik vermeye devam eder. Bu nedenle, kritik içerikler tüm tarayıcılarda engellenmeye devam edebilir.

Ç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:

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:

Yeni, 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:

Sayfa artık engelleme kaynakları denetimini geçiyor.

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.