Preload, Prefetch ve Preconnect
Kritik kaynakların erkenden alınması için tarayıcıya ipucu verin
Preload, Prefetch ve Preconnect, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Kaynak İpuçları Neden Kullanılır?
Modern tarayıcılar kaynakları yalnızca HTML'yi ayrıştırırken keşfeder. Kaynak ipuçları (<head> içindeki link rel öznitelikleri), tarayıcıya "buna yakında ihtiyacım olacak" demenizi sağlar; böylece ağ isteği, normal keşif sürecinin izin vereceğinden daha erken başlar.
preload Şimdi Yükler
<link rel="preload" as="..." href="...">, tarayıcıya kaynağı as türüne uygun öncelikle hemen getirmesini söyler. Sayfanın kesinlikle ihtiyaç duyacağı varlıklar için kullanınız: öne çıkan görseller, kritik yazı tipleri ve rota düzeyi JavaScript.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>as Özniteliği
Her zaman as değerini ayarlayınız — bu değer istek önceliğini, Accept üst bilgisini ve CSP uygulamasını belirler. Yaygın değerler: "script", "style", "font", "image", "fetch". as olmadan tarayıcılar preload'u yok sayar ve bir uyarı kaydeder.
Fontlar için crossorigin
Yazı tipi preloading işlemleri, yazı tipi aynı kaynakta olsa bile crossorigin gerektirir. Bu öznitelik olmadığında tarayıcı, gerçek kullanım için yazı tipini CORS modunda; preload içinse anonim modda getirir ve indirme iki katına çıkar — bu, fark edilmesi zor ve yaygın bir performans hatasıdır.
prefetch Daha Sonra Yükler
<link rel="prefetch" href="...">, bir kaynağa gelecekteki bir gezinme sırasında ihtiyaç duyulacağını belirtir. Tarayıcı kaynağı boşta kaldığı sürede en düşük öncelikle getirir, ardından önbelleğe alır; böylece sonraki sayfa anında görüntülenir.
<link rel="prefetch" href="/next-page.html">preconnect Bağlantıları Isıtır
<link rel="preconnect" href="https://api.example.com">, tarayıcıya ilk istek gelmeden önce üçüncü taraf kaynağıyla DNS, TCP ve TLS el sıkışmasını gerçekleştirmesini söyler. Sayfanızın istek göndereceği API sunucuları ve CDN'ler için kullanınız.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch Daha Hafif Seçenektir
<link rel="dns-prefetch"> yalnızca DNS aramasını gerçekleştirir; bu, preconnect'ten daha düşük maliyetlidir. Her biri için tam bir preconnect ayırmanın mümkün olmadığı çok sayıdaki üçüncü taraf sunucusu için dns-prefetch kullanınız; en kritik birkaç kaynakta preconnect'i tercih ediniz.
İpuçlarını Sınırlayınız
Çok fazla preload aynı bant genişliği için yarışır ve sayfayı yavaşlatır. Yalnızca kritik oluşturma yolunu engelleyen kaynakları preload ediniz — genellikle bir öne çıkan görsel ve bir veya iki kritik yazı tipi yeterlidir. Diğer her şey normal şekilde keşfedilebilir.
ES Modülleri için modulepreload
<link rel="modulepreload" href="/app.js">, yalnızca modül dosyasını değil, bağımlılık ağacını da preload eder. Bu, her içe aktarma işleminin öncekinin ayrıştırılmasını beklediği yerel ES modüllerinde görülen basamaklı indirme şelalesini önler.
Etkiyi Ölçme
Preload edilen kaynakların gerçekten erken getirildiğini doğrulamak için Ağ panelinin Initiator sütununu kullanınız; kaçırılan fırsatları tespit etmek için de Lighthouse'ın "Gerekli kaynaklara preconnect yapın" denetimini çalıştırınız. Yavaş ama kullanılmayan bir preload'u kaldırmak, çoğu zaman iyi bir preload eklemek kadar kazanım sağlar.
Her İpucunun Kendine Özgü Davranışı
preload, kaynak yaklaşık 3 saniye içinde kullanılmazsa konsola bir uyarı yazar. prefetch, ağ veya bellek baskısı altında tarayıcı tarafından iptal edilebilir. preconnect bağlantıları yaklaşık 10 saniyelik etkinliksizlikten sonra kapanır — bunu yakında istenecek kaynaklar için kullanınız.
Bilginizi Sınayın
preconnect, dns-prefetch'in yapmadığı neyi yapar?
Özet
preload, kritik kaynakları şimdi getirir (gerektiğinde as ve crossorigin ile). prefetch, büyük olasılıkla bir sonraki gezinmede kullanılacak kaynakları boşta kalınan sürede önbelleğe alır. preconnect (TCP+TLS) ve dns-prefetch (yalnızca DNS), üçüncü taraf kaynaklarıyla bağlantıları ısıtır. modulepreload, preload işlemini ES modülünün bağımlılık ağacını kapsayacak şekilde genişletir. Bunları ölçülü kullanınız ve etkilerini ölçünüz.
Sıkça Sorulan Sorular
“Preload, Prefetch ve Preconnect” dersi ücretsiz mi?
Evet — “Preload, Prefetch ve Preconnect” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Preload, Prefetch ve Preconnect” dersinde ne öğreneceğim?
Kritik kaynakların erkenden alınması için tarayıcıya ipucu verin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Preload, Prefetch ve Preconnect” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- async ve defer Öznitelikleri
- Preload, Prefetch ve Preconnect
- Görsellerde Tembel Yükleme: loading=lazy
- Kaynak İpuçları: modulepreload