Kaynak İpuçları (preload / preconnect) Denetimi
Kaynak ipuçları, tarayıcıya "bunu birazdan isteyeceğim, şimdiden hazırlan" demenin yoludur. Doğru kurulduklarında ilk çizimi belirgin biçimde hızlandırırlar; yanlış kurulduklarında ise sessizce zarar verirler — kaynak iki kez iner, boşuna bağlantı açılır, kritik dosyalar sıraya girer. Bu araç sayfanızdaki preload, preconnect, dns-prefetch ve prefetch etiketlerini yalnız saymakla kalmaz, her birinin doğru kurulup kurulmadığını ve sayfanın gerçekten kullandığı kaynaklara karşılık gelip gelmediğini denetler.
Hangi ipucu ne işe yarar?
Dördü birbirine benzer görünse de farklı işler yaparlar. preload, BU sayfada kullanılacak belirli bir dosyayı yüksek öncelikle indirtir. prefetch, GELECEK bir sayfada kullanılacak dosyayı düşük öncelikle, tarayıcı boştayken indirtir. preconnect, bir origin'e TCP bağlantısı ve TLS anlaşmasını önceden kurar; henüz hangi dosyanın isteneceği belli değilken bile bağlantı maliyetini peşin öder. dns-prefetch ise yalnız alan adı çözümlemesini yapar, bağlantı kurmaz — preconnect'in hafif akrabasıdır. Sık yapılan hata, bunları birbirinin yerine kullanmaktır: gelecek sayfanın kaynağını preload etmek bant genişliğini şimdi harcar, bu sayfanın kritik fontunu prefetch etmek ise onu zamanında getirmez.
as özniteliği neden zorunlu?
preload etiketinde as özniteliği, tarayıcıya kaynağın ne tür bir istek olduğunu söyler: script mi, style mı, font mu, görsel mi. Bu bilgi yalnız önceliklendirme için değil, EŞLEŞTİRME için gereklidir. as yoksa tarayıcı dosyayı indirir ama sayfa o dosyayı asıl bağlamında istediğinde (örneğin CSS'ten ya da script etiketinden) bunu daha önce indirdiği kaynakla ilişkilendiremez ve ikinci kez indirir. Sonuç, hızlandırma amacıyla eklenen bir etiketin bant genişliğini iki katına çıkarmasıdır. Chrome bu durumu konsolda uyarı olarak da bildirir, ancak uyarı çoğu zaman fark edilmez.
Fontlarda crossorigin: en pahalı sessiz hata
Font istekleri, kaynak aynı alan adından geliyor olsa bile CORS kurallarına tabidir. Bu, tarayıcının fontu "anonim" modda istemesi anlamına gelir. Preload etiketinizde crossorigin özniteliği yoksa, ön yükleme normal modda yapılır ve CSS'in başlattığı gerçek font isteğiyle eşleşmez. Font iki kez iner: bir kez boşuna, bir kez gerçekten. Üstelik ilk indirme bant genişliğini tükettiği için asıl isteği geciktirebilir — yani font preload'u eklemek, hiç eklememekten daha yavaş bir sayfa üretir. Doğru kullanım crossorigin özniteliğini değersiz olarak eklemektir; bir değer yazmanıza gerek yoktur.
Kullanılmayan preconnect neden zarar verir?
Her preconnect üç iş başlatır: DNS çözümlemesi, TCP el sıkışması ve HTTPS için TLS anlaşması. Sayfa o origin'den gerçekten bir şey yüklüyorsa bu maliyet peşin ödenmiş olur ve kazanca dönüşür. Yüklemiyorsa tamamen israftır: bağlantı açılır, bir süre bekletilir ve kapanır. Dahası tarayıcının aynı anda kurabileceği bağlantı sayısı sınırlıdır; boşa açılan bağlantılar kritik kaynaklarla yarışır. Bu araç preconnect verdiğiniz origin'leri sayfanın gerçekten yüklediği script, stil ve görsel kaynaklarıyla karşılaştırır; karşılığı olmayanları işaretler. Pratikte bu ipuçları bir kez eklenip yıllarca unutulduğu için, üçüncü taraf servis değiştiğinde geride ölü preconnect'ler kalır.
Ölçü: az ve hedefli
Kaynak ipuçlarında "daha fazlası daha iyidir" kuralı işlemez. Dört üzeri preconnect soket havuzunu zorlar; on üzeri preload ise önceliklendirmenin anlamını yok eder, çünkü her şey öncelikliyse hiçbir şey öncelikli değildir. Sağlıklı bir yapı genellikle şuna benzer: ilk çizimde görünen bir-iki font için crossorigin'li preload, kritik CSS için preload, ve gerçekten kullanılan iki-üç üçüncü taraf origin için preconnect. Bunun ötesi ölçülmeden eklenmişse büyük olasılıkla zarar veriyordur.
Sorularla
Sıkça Sorulan Sorular
preload ile prefetch arasındaki fark ne?
preload, bu sayfada kullanılacak bir kaynağı yüksek öncelikle hemen indirtir. prefetch ise gelecekte ziyaret edilmesi muhtemel bir sayfanın kaynağını, tarayıcı boştayken düşük öncelikle indirtir. Bu sayfanın kritik kaynağı için prefetch kullanmak onu zamanında getirmez; gelecek sayfanın kaynağı için preload kullanmak ise bant genişliğini şimdi harcar.
Font preload'unda crossorigin yazmazsam ne olur?
Font iki kez iner. Font istekleri aynı origin'den bile olsa CORS moduna tabidir; crossorigin olmadan yapılan ön yükleme CSS'in başlattığı gerçek istekle eşleşmez. Sonuçta preload eklemek sayfayı hızlandırmak yerine yavaşlatır.
Kaç tane preconnect kullanmalıyım?
Genellikle dörtten fazlası önerilmez ve yalnız ilk çizimde gerçekten kullanılan üçüncü taraf origin'lere verilmelidir. Her preconnect bağlantı kaynağı tüketir; karşılığı olmayanlar kritik isteklerle yarışır.
Hem preconnect hem dns-prefetch yazmalı mıyım?
Hayır. preconnect zaten DNS çözümlemesini içerir, dolayısıyla aynı origin için ikisini birlikte yazmak gereksizdir. dns-prefetch'i preconnect'in yedeği olarak yazma alışkanlığı çok eski tarayıcı desteği kaygısından kalmadır; bugün pratik karşılığı yoktur.
Hiç kaynak ipucu kullanmıyorum, sorun mu?
Hayır. Kaynak ipuçları isteğe bağlı optimizasyonlardır ve yanlış kurulmuş bir ipucu, hiç olmamasından kötüdür. Sayfanın ilk çizimini doğrudan bekleten bir font ya da üçüncü taraf kaynak varsa hedefli bir ipucu ölçülebilir kazanç verir; yoksa eklememek doğru karardır.
Bu araç ipuçlarının gerçekten işe yarayıp yaramadığını ölçüyor mu?
Doğru kurulup kurulmadıklarını ve sayfanın yüklediği kaynaklara karşılık gelip gelmediklerini ölçer — yani israfı ve çift indirmeyi yakalar. Kazancın milisaniye cinsinden ölçümü ise tarayıcıda gerçek yükleme gerektirir; bunun için PageSpeed portalındaki laboratuvar testini kullanabilirsiniz.