Kritik CSS’nin doğru problem olduğuna karar verin
Bir etiket yerine kanıtla başlayın. Önemli bir sayfanın soğuk önbellek yüklemesini temsilî mobil ve masaüstü profillerde kaydedin. Waterfall (istek sıralaması) ve trace’i inceleyin: bir stil sayfası ilk içeriği geciktiriyor mu ve bunun önem gösterecek kadar büyük mü? DevTools Coverage, tek bir oturumda kullanılan CSS’i gösterir; bu her yol veya durum için geçerli değildir.
Daha düşük bakım gerektiren işleri önce deneyin: kullanılmayan kuralları kaldırın, çıktıyı küçültün ve sıkıştırın, rota bazlı CSS yükleyin ve basit CSS @import zincirlerinden kaçının. web.dev çıkarma ve ertelemeyi gelişmiş teknikler olarak tanımlar.
Ölçülen ilk render gecikmesi CSS’e bağlı, soğuk ziyaret önemli ve başlangıç düzeni korunabiliyorsa.
Bottleneck sunucu gecikmesi, resimler, fontlar, JavaScript veya zaten küçük bir stil sayfasıysa, gömülü CSS muhtemelen yardımcı olmaz.
Başlangıç görünümünü bir test matrisi olarak tanımlayın
Başlangıç görünümü (bazen "katın üstü" olarak anılır), ziyaretçinin kaydırmadan önce gördüğüdür. Evrensel bir yüksekliği yoktur: cihazlar, zoom, dil, çerezler ve içerik varyantları bunu değiştirir. Bir masaüstü ekran görüntüsü telefon veya çevrilmiş başlığı kaçırabilir.
Adlandırılmış profiller kullanın. Dar ve geniş düzenleri, önemli kırılma noktalarını, farklı oturum açma yapıları ve üst sayfada görünen onay bannerı, promosyon, bakım mesajı veya doğrulama hatası gibi öğeleri dahil edin.
Seti oluşturmak ve test etmek için şablon, görünüm portu, yerelleştirme, kimlik doğrulama, onay ve üst-sayfa varyantlarını kaydedin.
Hızlı kaydırma, menüler ve form odağını test edin; ertelenmiş bir kural kontrol görünmeden önce görünür hale gelebiliyorsa güvenli değildir.
Tek bir kaynak otoritesinden küçük bir set çıkarın
Kritik CSS’i üretim derlemesinden oluşturun. Çıkarım bir görünümde kullanılan kuralları belirleyebilir, ama koşullu, dinamik ve geçiş kurallarını gözden geçirin. İkinci bir tasarım sistemini şablonlara elle kopyalamayın; bileşenler ve işaretleme geliştikçe sapma olur.
Üretim kaynağı CSS yetkin kaynak olarak kalırken çıktıyı sürümleyin ve derleme ile birlikte üretin. Yalnızca ilk kullanılabilir durum için gereken kuralları gömün. Büyük gömülü bloklar HTML’yi geciktirir ve dışsal CSS önbelleğinden tekrar kullanılamaz. Değişikliği iyileştirme olarak nitelendirmeden önce soğuk ve sıcak gezinmeyi karşılaştırın.
Sıkıştırılmış gömülü byte, kalan stil sayfası byte’ları ve çoğaltılan kuralları izleyin. Bir engelleyici isteğin azalması her zaman net kazanç değildir.
Çıkarım boş olduğunda, gömülü boyut bütçesini aştığında veya gözden geçirilmiş bazlinden beklenmedik şekilde değiştiğinde bir derlemeyi işaretleyin.
Kalan CSS’i güvenli biçimde yükleyin ve politika kısıtlarına uyun
Kalan stil sayfası, alt içerik ve sonraki durumlar tamamlanmış görünmeden önce ulaşmalıdır. Belgelendirilmiş bir desen, CSS’i style olarak preload eder ve yüklendikten sonra bunu gerçek bir stylesheet olarak değiştirir; JavaScript olmayan bir yedek yolu olmalıdır. Preload kaynağı erken isteğe sokar; CSS’i uygulamaz. Eksik bir set görünür şekilde yeniden stillendirebilir.
Gömülü yükleyici kullanmadan önce İçerik Güvenlik Politikası’nı (Content Security Policy) kontrol edin. web.dev, politika nedeniyle inline onload JavaScript’in engellenebileceğini not eder; bu nedenle uyumlu bir yükleyici veya başka bir tasarım kullanın. JavaScript devre dışı iken test edin. Medya sorgulu dosyalar gerçek koşullu stiller (ör. yazdırma) için yararlıdır; eşleşmeyen bir sorgu render-engelleyici değildir, ancak yine de indirilebilir.
JavaScript olmayan bir ziyaretçinin tam CSS aldığını ve öncelikli yolculuğu tamamlayabildiğini doğrulayın.
Geç yüklenen bir ilk görünüm fontunu veya resmi ayrı inceleyin; kritik CSS fetch davranışını düzeltmez.
Görsel, işlevsel ve önbellek regresyonlarını test edin
Her adlandırılmış görünüm portu ve üst-sayfa durumu için görsel karşılaştırma kullanın. Stil uygulanmamış metin, üst üste binme, gizli gezinme, eksik odak göstergeleri, düzen kayması ve ertelenmiş CSS uygulandığında oluşan ani değişiklikleri kontrol edin. Klavye gezinmesini, dokunma yollarını, hataları ve hızlı kaydırmayı çalıştırın. Eğer ertelenmiş bir kural bir kontrolü kullanılmaz hale getiriyorsa, o kural kritik yolun içinde olmalı veya tasarım değiştirilmelidir.
Soğuk ve sıcak ziyaretleri test edin. Soğuk test, çıkarılan CSS beklemesinin renderı iyileştirip iyileştirmediğini gösterir; sıcak test ise gömülü byte maliyetini tekrarlanan ziyaretlerde gösterir. Önbelleğe alınmış önceki HTML’yi ve dağıtımdan sonra geri dönüşü test edin. Önceden önbellekteki varlıklardan uyumluluğu koruyun; parmak izi (fingerprinted) stil sayfası URL’sini değiştirmeyin.
İlk içerik ve ana görünen içeriği karşılaştırın; sonra kazanımı veya regresyonu açıklamak için trace’i kullanın.
Odak, kontrast, hareket tercihleri, yakınlaştırma ve okunabilir sıra dahil edin. Daha hızlı render erişilemez bir arayüz ise bu yeterli değildir.
Bunu tersine çevrilebilir bir teslimat özelliği olarak işletin
Pipelinelar için bir sahip atayın ve girdilerini, artefaktı, şablonları, test profillerini ve gömülü boyut sınırını belgeleyin. CSS, işaretleme, bir bileşen kütüphanesi, özellik bayrağı veya katın üstü üçüncü taraf değiştiğinde testleri çalıştırın. Coverage rehberlik eder, ama tek bir kayıt bir kuralın her yerde güvenli olduğunu kanıtlayamaz.
Pratikse, geri alınabilir bir yapılandırmanın arkasında yayınlayın. Bilinen-iyi stil yolunu, artefakt sürümünü, derleme kimliğini ve kurtarma yöntemini kaydedin. Eğer bir regresyon görünürse, önce uyumlu teslimatı geri yükleyin, sonra kaçırılan durumu teşhis edin. SIU bu iş akışını kritik yolları müşteri etkisi yayılmadan önce istikrara kavuşturmak için kullanır.
Yeni bir banner, onay akışı, yerel ayar, kırılma noktası veya hesap düzeni yeniden üretim ve test gerektirir.
Bilinen-iyi CSS üretimine geri dönün; önceden yayınlanmış değiştirilemez varlık URL’lerini düzenlemeyin.