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:
- Chrome'da sayfayı açın.
- Geliştirici Araçları'nı açmak için
Control+Shift+J
(veya Mac'teCommand+Option+J
) tuşuna basın. - Performans sekmesini tıklayın.
- 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:
- Geliştirici Araçları'nda
Control+Shift+P
veyaCommand+Shift+P
(Mac) tuşuna basarak Komut Menüsü'nü açın. - "Kapsam" yazıp Kapsamı Göster'i seçin.
- 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:
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>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çindekionload
ö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ınrel
ö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.