Kritik CSS, tema oluşturma zamanında Puppeteer kullanılarak üretiliyor. Başsız bir tarayıcı her şablon türünü (ana sayfa, tekil gönderi, kategori, arama) ziyaret ediyor ve ekranın üst kısmındaki içeriğe uygulanan stilleri çıkarıyor. Sonuçta elde edilen CSS — şablon başına genellikle 4–8 KB — her sayfanın <head>'ine doğrudan satır içi ekleniyor. Tam stil sayfası <link rel="preload" as="style" onload="this.rel='stylesheet'"> aracılığıyla eş zamansız olarak yükleniyor.

Üçüncü Taraf Betikler Kritik Yolun Dışına Çıkarıldı

Analitik araçları, sohbet widget'ları, etiket yöneticileri gibi üçüncü taraf betikler, <link rel="preconnect"> kaynak ipuçları ve <script defer> ya da <script type="module"> nitelikleriyle yükleniyor. İlk etkileşim için gerekli olmayan hiçbir şey kritik yolda çalışmıyor. Bu tek değişiklik, eş zamanlı betik yüklemesi yapan varsayılan bir kurulumla karşılaştırıldığında PageSpeed puanında yaklaşık 15 puanlık bir iyileşme sağlıyor.

1,3 MB Google Fonts Yerine 68 KB Kendi Sunucunda Barındırma

Yazı tipleri sayfayla aynı kaynaktan sunuluyor. Google Fonts Inter değişken yazı tipi ailesinin tamamı 1,3 MB ağırlığında; Latin ve Türkçe aralıklarını kapsayan alt küme versiyonu 68 KB. Alt küme oluşturma, gereken tam Unicode aralıklarını belirten --unicodes bayrağıyla pyftsubset kullanıyor. Yazı tipi dosyaları bir yıl boyunca önbelleğe alınıyor ve değiştirilemez önbellek başlıklarıyla sunuluyor.

Açık Boyutlar Düzen Kaymasını Ortadan Kaldırıyor

Yerleşik temalardaki her <img>, CSS tarafından ayarlanan görüntü boyutunu değil, yüklenen küçük resim boyutunu eşleştiren açık width ve height niteliklerini içeriyor. Bu, tarayıcının görsel yüklenmeden önce doğru miktarda alan rezerve etmesine olanak tanıyarak Kümülatif Düzen Kaymasını ortadan kaldırıyor. get_featured_image() yardımcısı hem URL'yi hem de boyutları döndürüyor; özel temalar her ikisini de kullanmalı.