Render engelleyen kaynaklar.
Render engelleyen kaynaklar, tarayıcının indirip işlemeden ilk boyamayı yapamadığı stil ve betik dosyalarıdır.
Tarayıcı bir sayfayı boyamadan önce iki şeye ihtiyaç duyar: belgenin yapısı ve o yapıya uygulanacak stiller. Stil eksikse boyamaz — çünkü boyadığı şey bir sonraki anda tamamen değişebilir ve kullanıcı bir «stilsiz içerik parlaması» görür. Bu yüzden stil dosyaları tanım gereği engelleyicidir.
Betikler ise farklı bir sebeple engelleyici: klasik bir betik etiketi, belge ayrıştırmasını durdurur çünkü betik belgeyi değiştirebilir. Tarayıcı ne yapacağını bilmediği için bekler.
Üç engelleme türü
- Stil dosyası — her zaman engelleyici. Medya sorgusuyla sınırlandırılırsa, o koşul geçerli değilken engellemez.
- Senkron betik — hem indirme hem çalıştırma boyunca ayrıştırmayı durdurur. En pahalısı.
- Ertelenmiş betik — indirme paralel, çalıştırma belge hazır olduktan sonra. Engellemez ve sırayı korur.
- Eşzamansız betik — indirme paralel, çalıştırma indiği anda. Engellemez ama sıra garantisi yok.
- Modül betiği — varsayılan olarak ertelenmiş davranır.
Pratik kural: hiçbir betik senkron olmamalı. İstisna, sayfanın ilk boyamasını doğrudan etkileyen ve gecikmesi görsel bir zıplama üretecek çok küçük bir kod parçasıdır — ve o bile genelde başka türlü çözülebilir.
Stil tarafında ise engellemeyi kaldırmak mümkün değil, azaltmak mümkün. İki yol var: dosya sayısını düşürmek ve dosya boyutunu düşürmek.
Bu sitede ölçülen ve kapatılan
Bu sitede engelleme ölçüldü ve kapatıldı; süreç kayda geçti. Lighthouse mobil koşumunda iki ayrı stil dosyası render'ı bloke ediyordu: biri 821 milisaniye, diğeri 221 milisaniye. İki dosya iki istek demekti.
Birinci düzeltme birleştirmeydi: iki dosya tek dosyada toplandı ve istek sayısı ikiden bire indi. İkinci düzeltme sıyırmaydı — kaynak dosyanın kayda değer bir bölümü yorumdu ve yorumlar kullanıcıya inmemeliydi.
Ölçülen sonuç: kaynak 67,4 kilobayt, gzip sonrası 12,4 kilobayt. Render'ı bloke eden dosyada 11,4 kilobayt kazanç. Sıyırma bilerek muhafazakâr tutuldu — yalnız yorumlar ve girintiler; seçicinin ya da değerin içine hiç dokunulmadı.
Muhafazakârlığın gerekçesi de ölçüldü: agresif sıyırma yalnız 747 bayt daha kazandırıyordu ve torun-pseudo desenlerini bozma riski taşıyordu. Kazanç ile risk yan yana konup karar verildi.
747 bayt için bir seçiciyi bozma riski alınmaz — kazanç da ölçülür, risk de.
Üçüncü taraf engelleyiciler
Kendi kaynaklarınızı optimize ettikten sonra kalan en büyük engelleyici genelde başkasının kodudur. Etiket yöneticileri, yazı tipi sağlayıcıları, A/B test araçları ve sohbet balonları — hepsi genelde senkron olarak ve sayfanın başına ekleniyor.
Bu betikler ayrıca harici bir alan adına gidiyor, yani ek bir alan adı çözümlemesi ve ek bir bağlantı kurulumu maliyeti taşıyor. Toplam maliyet, çoğu sitede kendi stil dosyalarının maliyetinin üstünde.
Bu sitede üçüncü taraf betiği yok ve içerik güvenlik politikası harici kaynak isteğini zaten engelliyor. Karar performans kadar gizlilik kararı — ve doğrulama süiti, sayfa açılışında herhangi bir dış isteğin yapılmadığını ölçüyor.
Ölçüm ve denetim
Render engelleyen kaynakları bulmak birkaç dakika sürüyor ve özel bir araç gerektirmiyor. Tarayıcının performans panelinde ilk boyama anına kadar inen kaynaklar listelenir; o listedeki her stil ve senkron betik bir engelleyicidir.
- Kaç stil dosyası iniyor — birden fazlaysa birleştirme adayı.
- Senkron betik var mı — varsa ertelenmiş ya da eşzamansız yapılabilir mi?
- Harici alan adı var mı — her biri ek çözümleme ve bağlantı maliyeti.
- Medya sorgusu kullanılıyor mu — yalnız yazdırma için olan bir stil, ekranda engellememeli.
- Sıkıştırma açık mı — sunucu gerçekten sıkıştırılmış gönderiyor mu?
Dördüncü madde ucuz bir kazanç: yalnız belirli koşullarda gereken stiller, o koşul bildirilirse tarayıcı tarafından düşük öncelikle indirilir ve boyamayı engellemez. Yazdırma stilleri bunun klasik örneği.
Beşinci madde varsayılmamalı. Sıkıştırmanın açık olduğu sanılan ama olmadığı durumlar sık görülüyor — özellikle özel sunucu yapılandırmalarında. Kontrol tek satırlık bir istekle yapılabiliyor ve etkisi tüm metin kaynaklarında.
Bu sitede stil tek dosyada, betikler ertelenmiş, harici kaynak yok ve içerik güvenlik politikası harici istekleri zaten engelliyor. Beş kontrolün beşi de yapılandırma düzeyinde kapatılmış durumda.
Pratik kontrol listesi
Bu sayfanın anlattıklarını bir denetim adımına çevirmek gerekirse, engelleyici kaynakları için bakılacaklar şunlar. Liste kısa tutuldu çünkü uzun listeler yürünmüyor; altı madde bir oturumda tamamlanabilir.
- İlk boyamaya kadar kaç kaynak iniyor?
- Senkron betik var mı — olmamalı.
- Stil dosyası sayısı bir mi?
- Harici alan adına istek var mı?
- Medya sorgusuyla sınırlanabilecek stil var mı?
- Sıkıştırma gerçekten açık mı?
Bu sitede altı kontrolün altısı da yapılandırma düzeyinde kapatılmış: tek stil dosyası, ertelenmiş betikler, harici kaynak yok ve içerik güvenlik politikası dış istekleri zaten engelliyor.
Sıkıştırmanın açık olduğu varsayılmaz; ölçülür.
Kapanışta bir sıra önerisi: render engelleyicileri temizlemek, performans çalışmasının ilk adımı olmalı çünkü etkisi doğrudan ilk boyamaya gidiyor ve maliyeti düşük. Görsel optimizasyonu ve kod bölme daha görünür işler ama ilk boyama zaten engelleniyorsa ikisinin de etkisi sınırlı kalıyor.
Ve bir bakım notu: engelleyici sayısı zamanla artıyor. Yeni bir yazı tipi, yeni bir analitik betiği, yeni bir stil dosyası — hepsi tek tek küçük görünüyor ve toplamda ilk boyamayı geri götürüyor. Bu yüzden kontrol listesi bir kez yürünüp bırakılmamalı; bir teste bağlanmalı ki artış dağıtım anında görünsün.
Son bir teknik not: stil dosyasını engellemeyen hâle getirmenin yolları var ama hepsi bir ödünleşim taşıyor. Bir stili sonradan yüklemek, o stille boyanacak içeriğin bir süre stilsiz görünmesi anlamına geliyor — ve stilsiz içerik parlaması, yavaş yüklemeden daha rahatsız edici olabiliyor. Bu yüzden ilk görünen alanı ilgilendiren hiçbir stil ertelenmemeli; erteleme yalnız sayfanın derinlerinde kullanılan stiller için anlamlı.