Bir sayfa açıldığında tarayıcı, içeriği ekrana çizmeden önce bazı dosyaları indirip işlemek zorunda kalabilir. Bu dosyalar çizimi bekleten kaynaklardır ve ziyaretçi boş bir ekrana baktığı süreyi uzatır. İlk içerik görünene kadar geçen süre arttıkça hemen çıkma oranı yükselir, Core Web Vitals değerleri de olumsuz etkilenir.
Hangi dosyalar render’ı engeller?
İki ana grup vardır. Birincisi head bölümünde çağrılan CSS dosyalarıdır. Tarayıcı, stilsiz bir sayfa göstermemek için tüm stil dosyalarını bekler. İkincisi, head içinde senkron yüklenen JavaScript dosyalarıdır. Tarayıcı bu betiği indirip çalıştırana kadar HTML’i ayrıştırmayı durdurur. Yazı tipi dosyaları, üçüncü taraf takip kodları, sohbet eklentileri ve kullanılmayan tema dosyaları da sık görülen suçlulardır.
Sorunlu kaynakları nasıl tespit edersiniz?
Lighthouse ya da PageSpeed Insights raporunda “Render engelleyen kaynakları ortadan kaldırın” uyarısı, ilgili dosyaları ve tahmini kazancı listeler. Tarayıcı geliştirici araçlarında Network sekmesinden yükleme sırasını izleyebilir, Coverage aracıyla her CSS ve JS dosyasının ne kadarının gerçekten kullanıldığını görebilirsiniz. Kullanım oranı düşük dosyalar ilk temizlik adayıdır. Ölçümü hem mobil hem masaüstü için, mümkünse yavaş ağ simülasyonuyla yapın.
Çözüm yaklaşımları
JavaScript için en basit adım defer veya async niteliğini kullanmaktır. Defer, betiği HTML ayrıştırıldıktan sonra sırasıyla çalıştırır ve sayfa etkileşimi için güvenlidir. Async ise bağımsız betikler, örneğin analiz kodları için uygundur. Gerekmeyen betikleri tamamen kaldırın ya da kullanıcı etkileşiminden sonra yükleyin.
CSS tarafında önce dosyaları küçültüp birleştirin ve kullanılmayan kuralları temizleyin. Ardından ekranın ilk görünen bölümü için gereken stilleri kritik CSS olarak doğrudan HTML içine gömün, kalan stilleri sonradan yükleyin. Yalnızca belirli ekran boyutlarında gereken dosyalara media niteliği ekleyerek diğer cihazlarda engelleyici olmaktan çıkarabilirsiniz.
Yazı tiplerinde font-display: swap kullanmak, metnin yazı tipi inene kadar görünmesini sağlar. Kritik yazı tiplerini preload ile önceden çağırmak da gecikmeyi azaltır. Üçüncü taraf kodlarını tek bir etiket yöneticisi üzerinden, sayfa yüklendikten sonra tetikleyin.
Değişiklikleri tek tek uygulayıp her adımdan sonra yeniden ölçmek, hangi düzenlemenin işe yaradığını görmenizi sağlar. Özellikle kritik CSS ayrımında sayfanın bozulmadığını farklı cihazlarda kontrol etmeyi unutmayın.