preload, prefetch, preconnect ve dns-prefetch resource hint'leri arasındaki fark nedir?
Cevap
Resource hint'ler tarayıcıya gelecekte ihtiyaç duyulacak kaynakları önceden bildirir. Fark, kaynağın ne zaman ve hangi öncelikle kullanılacağıdır.
| Hint | Ne yapar? | Ne zaman? |
|---|---|---|
preload | Mevcut sayfa için kritik bir kaynağı hemen, yüksek öncelikle indirir | Geç keşfedilen kritik font, LCP görseli |
prefetch | Sonraki navigasyon için kaynağı boşta kalınca düşük öncelikle indirir | Kullanıcının muhtemelen gideceği sayfanın JS'i |
preconnect | Bir origin'e DNS + TCP + TLS bağlantısını önceden kurar | Kesin kullanılacak üçüncü parti origin (CDN, font sunucusu) |
dns-prefetch | Sadece DNS çözümlemesi yapar | Belki kullanılacak çok sayıda origin |
modulepreload | ES module'ü ve bağımlılıklarını önceden indirip parse eder | Kritik JS modülleri |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.avif" as="image" fetchpriority="high" />
<link rel="prefetch" href="/checkout.js" />Dikkat edilecekler
preloadile font yüklerkencrossoriginunutulursa font iki kez indirilir.- Çok fazla
preloadher şeyi kritik yapar, yani hiçbir şeyi; bant genişliği gerçekten kritik kaynaklardan çalınır. Kullanılmayan preload için Chrome konsolda uyarı verir. preconnect'i 2-3 origin ile sınırlayın; açık bağlantılar kaynak tüketir.- Navigasyonları neredeyse anlık yapmak için Chromium'da Speculation Rules API (
<script type="speculationrules">) ile prefetch/prerender yapılabilir. fetchpriority="high"/"low"ile tek tek kaynakların önceliği de ayarlanabilir.
İlgili Web Performansı soruları
- Bundle boyutunu nasıl analiz eder ve küçültürsünüz?
- Çok uzun bir listeyi (on binlerce satır) performanslı nasıl gösterirsiniz?
- Bir web sayfasının yükleme performansını nasıl iyileştirirsiniz?
- Core Web Vitals nedir? LCP, INP ve CLS neyi ölçer?
- Vite ile webpack arasındaki temel fark nedir? Tree shaking nasıl çalışır, neden bazen çalışmaz?
- INP değeriniz kötü. Yavaş etkileşimleri nasıl bulur ve düzeltirsiniz?
Bu konuda başka bir soru biliyor musun?
Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.