Kritik olmayan CSS'leri ertele

Demián Renzulli

CSS dosyaları, oluşturmayı engelleyen kaynaklardır: bunların, tarayıcı sayfayı oluşturmadan önce yüklenmesi ve işlenmesi gerekir. Web sayfaları içeren reklamların oluşturulması daha uzun sürer.

Bu kılavuzda, Kritik Oluşturma Yolu ve iyileştirme First Contentful Paint (FCP).

Örnek: optimum olmayan CSS yüklemesi

Aşağıdaki örnekte her biri farklı bir sınıfla stilize edilen metin:

Bu sayfa sekiz sınıf içeren bir CSS dosyası istiyor, ancak bunların tümü değil "görünür" hale getirmek için içerik.

Bu kılavuzun amacı, bu sayfayı yalnızca kritik stillerin kullanımdan kaldırılacağı şekilde optimize etmektir. eşzamanlı olarak yüklenir, geri kalanı ise (paragraf stilleri dahil) engelleyici bir şekilde yüklenir.

Ölçüm

Lighthouse'u çalıştırın sayfada Performans bölümünü seçin.

Raporda, First Contentful Paint metriği "1 sn" değeriyle gösterilir ve Oluşturmayı engelleyen kaynakları ortadan kaldırın. style.css dosyası oluşturun:

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.

Ortaya çıkan izde, FCP işaretçisinin hemen yerleştirildiğini görürsünüz. Yükleme tamamlandıktan sonra:

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

Optimize etme

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

1. Geliştirici Araçları'nda Komut menüsünü açın Control+Shift+P veya Command+Shift+P (Mac) tuşuna basarak.
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 renkle işaretlenen sınıflar kritiktir. Tarayıcı, verileri oluşturmak için Başlık, alt başlık ve akordeon düğmeleri de dahil olmak üzere görünür içeriğe sahip olmalıdır.
• Kırmızıyla işaretlenen sınıflar kritik değildir, yalnızca hemen görünmeyen içeriği (ör. gizli paragraflar) etkiler.

Bu bilgilerle CSS'nizi optimize ederek tarayıcının işlemeye başlamasını sağlayın sayfa yüklendikten hemen sonra kritik stilleri kullanın ve kritik olmayan CSS'leri daha sonrası için:

1. Kapsam raporunda yeşil renkle işaretlenen sınıf tanımlarını çıkarın ve bu sınıfları sayfanın başında 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 kodu uygulayarak sınıfların geri kalanını eşzamansız olarak yükleyin desen:

   <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. Siz Kritik öğeleri önceden yükleme rehberinden preload hakkında daha fazla bilgi edinebilirsiniz.
• link içindeki onload özelliği, aşağıdaki durumlarda tarayıcının CSS'yi işlemesini sağlar: stil sayfasının yüklenmesi biter.
• "boş" onload işleyicinin kullanılması, bazı tarayıcıların rel özelliğini değiştirdiklerinde işleyiciyi tekrar çağırın.
• noscript öğesinin içindeki stil sayfasına yapılan başvuru, yedek olarak ayarlayabilirsiniz.

Sonuçta görünen sayfa tıpkı bir reklam gibi sürümünü yükleyebilirsiniz. Aşağıda, satır içi stiller ve eşzamansız istek CSS dosyasına HTML'de olduğu gibi görünür dosya:

Gözle

Geliştirici Araçları'nı kullanarak optimize edilmiş sayfayı ziyaret edin.

FCP işaretçisi, sayfa CSS isteğinde bulunmadan önce görünür. Bu, tarayıcının sayfayı oluşturmadan önce CSS'nin yüklenmesini beklemesine gerek yoktur:

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

Raporda, FCP sayfasının 0,2 sn (%20) azaldığını görürsünüz. bakın!):

Oluşturmayı engelleyen kaynakları ortadan kaldırın önerisi artık Fırsatlar sekmesinde yer alır ve bunun yerine Başarılı Denetimler bölümünde yer alır:

Sonraki adımlar ve referanslar

Bu kılavuzda, verileri manuel olarak ayıklayarak kritik olmayan CSS'leri sayfadaki kullanılmayan kodu gösterir. Daha karmaşık üretim ortamları için çıkarılmasıyla ilgili CSS kılavuzu, kritik CSS'leri ayıklamak için kullanılan en popüler araçlar ve kod laboratuvarlarına pratikte çalışma