Kritik olmayan CSS'leri ertele

Demián Renzulli

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

Bu kılavuzda, Kritik Oluşturma Yolu'nu optimize etmek ve First Contentful Paint (FCP) özelliğini iyileştirmek için kritik olmayan CSS'leri nasıl erteleyeceğinizi öğreneceksiniz.

Örnek: yetersiz CSS yüklemesi

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

Bu sayfa, sekiz sınıfa sahip bir CSS dosyası ister, ancak "görünür" içeriği oluşturmak için bunların tümü gerekli değildir.

Bu kılavuzun amacı, bu sayfayı yalnızca kritik stillerin eşzamanlı olarak yüklenirken geri kalanı (paragraf stilleri dahil) engellemeyen bir şekilde yükleneceği şekilde optimize etmektir.

Ölçüm

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

Raporda, "1s" değerine sahip İlk Zengin İçerikli Boyama metriği ve style.css dosyasına işaret eden Oluşturmayı engelleyen kaynakları ortadan kaldırma fırsatı gösterilir:

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 izde, FCP işaretçisinin CSS'nin yüklenmesi bittikten hemen sonra yerleştirildiğini görürsünüz:

Bu, ekranda tek bir pikseli boyamadan önce tarayıcının tüm CSS'lerin 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.

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

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

Bu bilgilerle CSS'nizi optimize ederek tarayıcının, sayfa yüklendikten hemen sonra kritik stilleri işlemeye başlaması ve kritik olmayan CSS'yi daha sonrası için ertelemesi gerekir:

1. Kapsam raporunda yeşil ile işaretlenmiş sınıf tanımlarını çıkarın ve bu sınıfları sayfanın başına 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 kalıbı 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, standart CSS yükleme yöntemi değildir. İşleyiş şekli:

• link rel="preload" as="style", stil sayfasını eşzamansız olarak ister. Önemli öğeleri önceden yükleme kılavuzunda preload hakkında daha fazla bilgi edinebilirsiniz.
• link içindeki onload özelliği, stil sayfasının yüklenmesi bittiğinde tarayıcının CSS'yi işlemesini sağlar.
• Kullanıldıktan sonra onload işleyiciyi "nulling" yapmak, bazı tarayıcıların rel özelliğini değiştirdiklerinde işleyiciyi yeniden çağırmalarını önlemeye yardımcı olur.
• noscript öğesinin içindeki stil sayfasına yapılan referans, JavaScript'i yürütmeyen tarayıcılar için yedek sağlar.

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

İzleme

Optimize edilmiş sayfada başka bir Performans izi ç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:

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

Raporda FCP sayfasının 0, 2 sn (%20'lik bir artış) küçüldüğünü görürsünüz:

Oluşturmayı engelleyen kaynakları ortadan kaldırın önerisi artık Fırsatlar altında görünmez, bunun yerine Başarılı Denetimler bölümündedir:

Sonraki adımlar ve referanslar

Bu kılavuzda, sayfadaki kullanılmayan kodu manuel olarak ayıklayarak kritik olmayan CSS'leri nasıl erteleyeceğinizi öğrendiniz. Daha karmaşık üretim ortamları için kritik CSS ayıklama kılavuzunda, kritik CSS'leri ayıklamak için en popüler araçlardan bazılarına yer verilir. Ayrıca bu araçların uygulamalı olarak nasıl çalıştığını gösteren bir codelab'e de yer verilir.