Ne anlama gelir?
Kaynak İpuçları (Resource Hints), tarayıcıya "bu kaynağı birazdan isteyeceğim, şimdiden hazırlan" demenin yollarıdır. preload, preconnect, dns-prefetch ve prefetch bunların başlıcalarıdır.
Başlıca türleri
- preconnect: Bir alan adıyla bağlantıyı önceden kurar
- dns-prefetch: DNS çözümlemesini erken yapar
- preload: Kritik bir kaynağı (font, hero görsel) öne alır
- prefetch: Sonraki sayfada gerekecek kaynağı hazırlar
Faydası
Kritik kaynakların beklenmeden hazır olması, algılanan yükleme süresini ve Core Web Vitals metriklerini iyileştirir.
Ne yapmalı?
Kritik font, hero görseli ve üçüncü taraf bağlantıları için kaynak ipuçlarını dikkatli kullanın. Ölçülü uygulayın; her şeyi "preload" etmek fayda değil, tıkanıklık yaratır.
Ne anlama gelir?
Kaynak ön yükleme (resource preloading), bir web sayfasının, ilerideki bir noktada ihtiyaç duyacağı önemli kaynakları (fontlar, kritik görseller, CSS, JavaScript) tarayıcıya erken haber vererek, normalden daha önce yüklenmesini sağlama tekniğidir. Bu, genellikle HTML'de <link rel="preload"> gibi kaynak ipuçları (resource hints) ile yapılır. Kaynak ön yükleme, önemli kaynakların erken indirilmesini sağlayarak, bunların gerektiğinde hazır olmasını ve sayfa yükleme sürecinin hızlanmasını sağlar; sayfa hızı optimizasyonunun ileri bir tekniğidir.
Kaynak ipuçları türleri
- preload: önemli kaynağı erken yükle
- preconnect: bir sunucuya erken bağlan
- prefetch: gelecekteki gezinme için kaynak getir
- dns-prefetch: DNS çözümlemesini erken yap
Neden önemli?
Kaynak ön yükleme, sayfa yükleme performansını ince ayarla iyileştiren güçlü bir tekniktir; çünkü tarayıcının kaynakları keşfetme ve yükleme sırasını optimize ederek, önemli kaynakların daha erken hazır olmasını sağlar. Normalde tarayıcı, kaynakları HTML'i işlerken sırayla keşfeder ve yükler; bir kaynağa ihtiyaç duyulduğunda onu keşfeder ve indirmeye başlar. Ancak bazı önemli kaynaklar, HTML'de geç keşfedilebilir veya bir zincirin sonunda yer alabilir, bu da onların geç yüklenmesine ve sayfa render'ını geciktirmesine yol açabilir. Kaynak ön yükleme, tarayıcıya bu önemli kaynakları erkenden haber vererek, onları normalden daha önce (sıra gelmeden) yüklemeye başlamasını sağlar, böylece bu kaynaklar gerektiğinde zaten hazır veya yükleniyor olur. Farklı kaynak ipuçları, farklı amaçlara hizmet eder. Birincisi, preload; mevcut sayfada kesinlikle ihtiyaç duyulacak önemli bir kaynağı (örneğin ekranın üst kısmındaki kritik bir görsel, önemli bir font veya kritik CSS/JS) erkenden yüklemeyi söyler, bu da o kaynağın render'ı geciktirmemesini sağlar. Özellikle fontlar için preload değerlidir, çünkü fontlar genellikle geç keşfedilir ve metnin görünmesini geciktirebilir. İkincisi, preconnect; sayfanın bir kaynak alacağı bir üçüncü taraf sunucuya (örneğin bir CDN veya font sağlayıcısı) erkenden bağlantı kurmayı söyler, böylece asıl istek geldiğinde bağlantı kurma gecikmesi (DNS, TCP, TLS) önceden halledilmiş olur. Üçüncüsü, prefetch; kullanıcının bir sonraki adımda ihtiyaç duyabileceği (örneğin bir sonraki sayfa için) kaynakları, düşük öncelikle, gelecekte kullanmak üzere önceden getirir. Dördüncüsü, dns-prefetch; bir alan adının DNS çözümlemesini erkenden yaparak, o sunucuya yapılacak isteklerin bir adımını hızlandırır. Kaynak ön yükleme, doğru ve seçici kullanıldığında güçlüdür, ancak dikkatli uygulanmalıdır; çok fazla veya yanlış kaynağı ön yüklemek, öncelikleri bozabilir ve gerçekten önemli kaynakların yüklenmesini geciktirebilir, bu yüzden sadece gerçekten kritik ve fayda sağlayacak kaynaklar ön yüklenmelidir. Kaynak ön yüklemenin SEO açısından önemi, sayfa hızıyla olan ilişkisidir; önemli kaynakların (özellikle render'ı etkileyen fontlar, kritik görseller ve CSS) daha erken hazır olması, sayfanın daha hızlı görünmesini ve Core Web Vitals metriklerinin iyileşmesini sağlar. Kaynak ön yükleme, bir sayfanın önemli kaynaklarını tarayıcıya erken haber vererek normalden önce yüklenmesini sağlama tekniğidir (preload, preconnect, prefetch, dns-prefetch); önemli kaynakların erken hazır olmasını sağlayarak sayfa hızını ve Core Web Vitals'ı iyileştiren, seçici ve dikkatli kullanılması gereken ileri bir performans tekniğidir.
Gerçek örnek
Bir sitede, metin geç görünüyordu çünkü özel web fontları geç keşfedilip yükleniyordu, bu da metnin gecikmeli render edilmesine yol açıyordu. Kritik fontlar preload ile ön yüklendiğinde ve font sağlayıcısına preconnect uygulandığında, fontlar erkenden hazır oldu, metin daha hızlı görünür hale geldi ve sayfa render performansı ile Core Web Vitals iyileşti.
Özet
Kaynak ön yükleme, bir sayfanın önemli kaynaklarını tarayıcıya erken haber vererek normalden önce yüklenmesini sağlamaktır: preload (kritik kaynak), preconnect (erken bağlantı), prefetch (gelecekteki kaynak), dns-prefetch (erken DNS). Önemli kaynakların (fontlar, kritik görseller) erken hazır olmasıyla sayfa hızını ve Core Web Vitals'ı iyileştirir. Seçici ve dikkatli kullanılmalıdır.