preload, prefetch ve preconnect gibi kaynak ipuçları nedir?

Question

Accepted Answer

**Kaynak ipuçları**, tarayıcıya kaynakları erken almesini veya bağlanmasını söyleyen `` etiketleridir ve yükleme performansını optimize ederler. Her biri farklı bir zamanlama/öncelik ihtiyacına hizmet eder. ```html ``` ## Her birinin yaptığı - **`preload`** — "Buna **mevcut sayfa için ihtiyacım var**, şimdi yüksek öncelikle al." Ayrıştırıcının geç keşfettiği kritik kaynaklar için: yazı tipleri, hero görselleri, CSS tarafından referans edilen varlıklar. Tarayıcının doğru öncelik/başlıkları ayarlaması için `as` gereklidir. - **`preconnect`** — "Bu **origin'e** yakında bağlanacağım; DNS araması + TCP + TLS el sıkışmasını şimdi yap." Üçüncü taraf kaynaklara ilk isteğinden önce gidiş-dönüş işlemlerini tasarruf eder (API, yazı tipi ana bilgisayarı, CDN). Birkaç kritik origin için kullanın. - **`dns-prefetch`** — preconnect'in daha hafif bir versiyonu: sadece DNS çözümlemesi. İyi bir yedek / birçok origin için. - **`prefetch`** — "Buna **muhtemelen** **sonraki** navigasyon için ihtiyacım olacak; boşta iken düşük öncelikle al." Muhtemel sonraki sayfalar/varlıklar için. Gelecek için önbelleğe alınır, mevcut sayfa için değil. ## Yaygın gerçek örnek: yazı tipleri ```html ``` Yazı tipleri geç keşfedilir (tarayıcı önce CSS'yi ayrıştırmalıdır), bu nedenle onları önceden yükleme görünmez metin gecikmelerini önler. ## Uyarı: aşırı ipucu vermeyin Her şeyi önceden yüklemek amacı bozar — gerçekten kritik kaynaklar için bant genişliğiyle rekabet eder. Sadece en önemli olanlar için ipucu verin. ## Neden önemli Kaynak ipuçları kritik yoldan gecikmeyi ortadan kaldırır: `preconnect` üçüncü taraflar için el sıkışma gecikmesini kaldırır, `preload` geç keşfedilen kritik varlıkları (yazı tipleri, LCP görüntüsü) önceliklendirir ve `prefetch` *sonraki* navigasyonu anlık hale getirir. Cerrahî bir şekilde kullanıldığında, Core Web Vitals'i anlamlı şekilde iyileştirirler.