Kritik CSS'i yapılandırma

Modül ne yapar — ve ne yapmaz

Kakapo, her sayfa şablonu için sitenizden gerçek bir örnek sayfayı HTTP üzerinden çeker (yalnızca yönetim panelinde veya cron ile, hiçbir zaman bir ziyaretçinin sayfa oluşturma sürecinde değil), orada bağlanan yerel stil dosyalarını doğrudan diskten okur ve her bir kuralı DOMXPath ile belgeye karşı sınar. Bundan iki sonuç doğar: head bölümüne satır içi yerleştirilen kritik CSS ve bu şablonda tek bir öğeye bile denk gelmemiş kuralların listesi.

Bu sırada hiçbir şey render edilmez. Tarayıcı, viewport ve kaydırma konumu diye bir şey yoktur. “Üstte görünür”, açıkça belirtilmiş bir kurala göre yapılan bir yaklaşıklamadır: body'nin altındaki tüm öğeler numaralandırılır, ilk yüzde 30 (varsayılan; 5 ile 90 arasında ayarlanabilir) üst sayılır, buna girilen işaret noktalarının içindeki her şey eklenir. html, body, :root ve @font-face ile birlikte, kritik bir kuralın animation üzerinden adlandırdığı @keyframes her zaman dâhil edilir. Yalnızca durumlar üzerinden geçerli olan kurallar (:hover, :focus, :active) dışarıda kalır, @media print de öyle. Yöntem sınırına ulaştığı yerde yukarı yuvarlar: kural isabet etmiş sayılır. Birkaç kilobayt fazlalık, eksik bir kuraldan ve titremeden daha ucuza gelir.

Analiz etmeden önce koşulları kontrol etme

İki şeyin doğru olması gerekir. Birincisi dom/libxml PHP uzantısı — modül bunu class_exists() ile kontrol etmez, minik bir belge oluşturup gerçekten sorgular. Nedeni şu: bazı barındırma sağlayıcıları disable_classes=DOMDocument ayarını kullanır; o zaman class_exists() yine de “evet” der, ama new başarısız olur. Uzantı yoksa “Analiz et” ve “Günlük tazele” kilitlidir ve gerekçe hemen yanında yazar.

İkincisi loopback: sitenin kendisine HTTP üzerinden ulaşabilmesi gerekir. Bunun için Koşullar bölümünde “Loopback'i kontrol et” düğmesi vardır; HTTP kodunu, yanıt boyutunu ve süreyi kaydeder. Bu başarısız olursa her analiz çalışması da başarısız olur — tipik nedenler sitenin önündeki bir güvenlik duvarı, sahneleme ortamındaki bir Basic-Auth koruması veya iç ağda çözülmeyen bir sunucu adıdır.

Analizin okuyamadığı şey geciktirilmez de: yabancı sunuculardan, bir CDN'den veya Google Fonts'tan gelen stil dosyaları render'ı engellemeye devam eder. Bu, yavaş ama güvenli yoldur.

Şablon şablon ilerleme

Yedi şablon vardır: Ana sayfa, Blog sayfası, Tek yazı, Statik sayfa, Arşiv, Arama sonuçları ve 404 hata sayfası. Her biri tek tek analiz edilir ve tek tek onaylanır. Ana sayfanız yazı listesini gösteriyorsa “Blog sayfası” uygulanamaz — etkisiz kalacağı için anahtar kilitli kalır. Yayımlanmış bir yazı veya sayfa yoksa örnek sayfa da yoktur ve şablon yine kilitli kalır.

Önerilen yol: önce “Tümünü analiz et” ya da tek tek analiz. Ardından bir şablon için “Önizleme” ve “işlemsiz” bağlantılarını iki sekmede açın — bu, aynı gerçek sayfanın bir kez işlemli, bir kez işlemsiz hâlidir; yalnızca giriş yapmış yöneticilere ve yalnızca adreste geçerli bir tek kullanımlık anahtar varsa görünür. Bunun için ana anahtarın açık olması gerekmez. Sayfa oluşurken titremeyi en güvenilir biçimde, gömülü çerçevede değil, kısıtlanmış bağlantıya sahip ayrı bir sekmede görürsünüz.

Ancak karşılaştırma temiz göründüğünde şablonu onaylayıp ana anahtarı açın. Ana anahtar test modunda başlar: orada işlemi yalnızca giriş yapmış yöneticiler görür, herkes için sayfa değişmeden kalır. “Canlı” konumuna ancak birkaç şablonu gözden geçirdikten sonra geçin.

Dört fren ve istisna listeleri

Asıl zaman kazancını “Analiz edilen stil dosyalarını gecikmeli yükle” sağlar. Kapalı olması şu demektir: kritik CSS ek olarak satır içi gelir, geri kalan her şey eskisi gibi kalır — risksiz, ama kazançsız. Açık olması şu demektir: değerlendirilen stil dosyaları media="print" ve bir onload geri alıcısıyla yüklenir, JavaScript'i olmayan ziyaretçiler için bir noscript kopyasıyla birlikte. Yalnızca gerçekten okunmuş olan geciktirilir ve yalnızca handle ile dosya adresi hâlâ analiz edilenle uyuşuyorsa.

“Kaynak dosyalar değiştiğinde devre dışı kal”, değerlendirilen her dosyanın değişiklik zamanını ve boyutunu, ayrıca etkin temayı hatırlar. Bir şey değişirse, muhtemelen yanlış bir kritik CSS ile işlemek yerine hiç işlenmez — kaynak kodda o zaman gerekçeyi belirten bir not yer alır.

Üç metin alanı acil çıkıştır. Hariç tutulan URL'ler: her yol için bir satır, joker karakter olarak “*”; bu sayfalar hiçbir zaman işlenmez (tipik olarak /checkout*, /mein-konto*). Stil dosyalarını asla geciktirme: her satıra bir WordPress handle'ı, varsayılan olarak admin-bar ve dashicons. İşaret noktaları: her satıra bir seçici, içindeki her şey üst sayılır — varsayılanlar header, [role="banner"], .site-header, #masthead, nav, .main-navigation, .site-branding, .hero ve h1'dir. Değerlendirilemeyen satırlar sessizce kaydedilmek yerine reddedilir.

“üst” oranında veya işaret noktalarında yapılan bir değişiklik ancak yeni bir analiz çalışmasından sonra etkili olur. Diğer her değişiklik sayfa cache'ini hemen geçersiz kılar; çünkü orada eski duruma ait hazır HTML bulunur.

Bir şeyler ters giderse

“Zaman bütçesi tükendi”: çalışma 25 saniyeye veya PHP zaman sınırına ulaştı. Rapor kaydedilir, kritik CSS bilinçli olarak kaydedilmez — eksik bir kritik CSS titremeye yol açardı. Mesaj, işlemin durduğu dosyayı belirtir. Yeniden analiz edin veya çok büyük bir stil dosyasını istisna listesi üzerinden çıkarın.

“HTTP … ile yanıt verdi”: örnek sayfa beklenen kodu döndürmedi (200, hata sayfasında 404). Hiçbir şey kaydedilmez. Sayfanın tarayıcıdan erişilebilir olup olmadığını ve önünde bir koruma bulunup bulunmadığını kontrol edin.

Bir şablon “eskimiş” durumundadır: değerlendirilen bir CSS dosyası değişmiş ya da tema değiştirilmiştir. Yeniden analiz edin. Orada “farklı oran” yazıyorsa şablon, şu anda ayarlı olandan başka bir yüzde değeriyle oluşturulmuştur — onu da yeniden analiz edin.

Bunun el emeği olarak kalmaması için “Günlük kontrol et ve tazele” vardır. Cron çalışması yalnızca zaten onaylanmış ve eskimiş şablonları analiz eder; hiçbir zaman bir şeyi açmaz ve onaylanmamış bir şablon için analiz oluşturmaz. Son sonucu, Emniyet kemeri bölümünde bir not olarak yazar.

Bir sayfa yine de huzursuz görünüyorsa kaynak koda bakmak yardımcı olur: orada, işlenen şablonu ve durumu (önizleme, test modu, canlı) belirten bir yorum ya da bilinçli olarak neden işlenmediğinin gerekçesi bulunur.