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:

Lighthouse raporu, işletmenizle ilgili stil sayfanızı ekleyebilirsiniz.

ziyaret edin.

Not: Bu demo sitesi çok küçük bir stil sayfası kullanmaktadır. Üretim senaryolarında genelde çok daha büyük CSS dosyalarına ihtiyaç vardır. Lighthouse, bir sayfada 2.048 bayt veya daha büyük bir CSS kuralı Ekranın üst kısmındaki içerikte Kullanılmayan CSS'yi kaldırın önerisi de 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.

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

Optimize edilmemiş demo sayfasında, FCP doğru bir şekilde devam eder.

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.

ziyaret edin.

Kapsam raporu, CSS'nizin ne kadarlık aslında ilk sayfa yüklemesinde kullanılır.

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.

ziyaret edin.

Not:

Gerçek bir üretim senaryosunda, CSS erteleme işlevleri kullanmanızı öneririz. Örneğin, loadCSS bu davranışı kapsayan ve tarayıcılarda iyi performans gösteren özellikler ve İçerik Güvenliği Politikası'nı desteklemese bile satır içi onload JavaScript'ine izin ver.

Ayrıca CSS bağlantısını sayfanın en altına yerleştirerek içeriğin önce Firefox ve Chrome'da stil sayfasını beklemeden oluşturun. Ancak tarayıcı bu durumda stil sayfasına öncelik vermeye devam eder. tüm tarayıcılarda önemli içerikleri engellemeye devam edebilir.

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:

Optimize edilmiş sayfada, FCP stil sayfası yüklenir.

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!):

Yeni ve azaltılmış FCP.

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:

Sayfa artık engelleme kaynaklarını iletiyor inceleyin.

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