Preload ve prefetch

preload ne işe yarar?

Bazı kaynaklar sayfanın ilk çizimi için kritiktir; örneğin başlık fontu veya ana görsel. <link rel="preload"> bu kaynakları sayfanın başında önceden indirmeye başlar.

Örnek: <link rel="preload" href="/fontlar/yazi.woff2" as="font" type="font/woff2" crossorigin>. as kaynağın türünü, crossorigin ise çapraz kaynak iznini söyler. Fontlarda crossorigin şarttır.

prefetch ne zaman?

<link rel="prefetch"> ise kullanıcının sıradaki adımı için lazım olacak bir kaynağı arka planda önbelleğe alır. Örneğin bir sonraki sayfayı.

Fark şudur: preload bu sayfa için kritiktir ve hemen lazımdır. prefetch sonraki sayfa için bekleyebilir. Bu yüzden prefetch'i yalnızca büyük olasılıkla tıklanacak bir bağlantı için kullan.

Uygulama Kritik fontu preload et, sonraki sayfayı prefetch et

Head içine iki <link> ekle. İlki rel="preload" ile bir fontu erken yüklesin: href (örnek /fontlar/yazi.woff2), as="font" ve crossorigin içersin. İkincisi rel="prefetch" ile bir sonraki sayfayı önbelleğe alsın: href (örnek /hikaye/2.html) içersin.

Örnek çözümü göster

<head>
  <link rel="preload" href="/fontlar/yazi.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="prefetch" href="/hikaye/2.html">
</head>

Kendini test et

Kritik bir fontu erken indirmek için hangi rel değeri kullanılır?
- rel="preload"
- rel="prefetch"
- rel="preconnect"
- rel="stylesheet"
Cevabı göster

rel="preload" — Doğru. preload bu sayfa için kritik kaynağı erken yükler.

preload linkini tamamla

<link rel="preload" href="/fontlar/yazi.woff2" ____>

Cevabı göster

<link rel="preload" href="/fontlar/yazi.woff2" as="font" crossorigin>

rel değerini anlamıyla eşleştir

rel="preload"

Bu sayfa için kritik
rel="prefetch"

Sonraki sayfa için
as="font"

Kaynak türü
crossorigin

Çapraz kaynak izni
prefetch için en doğru yaklaşım hangisidir?
- Her bağlantıya otomatik ekle
- Yalnızca görsellerde kullan
- Büyük olasılıkla tıklanacak bağlantıya ekle
- Hiç kullanma
Cevabı göster

Büyük olasılıkla tıklanacak bağlantıya ekle — Doğru. prefetch büyük olasılıkla tıklanacak bağlantıya eklenir.

Sıradaki ders: Özet - Performans galerisi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler