Preload ve prefetch
<link rel="preload"> ile kritik kaynakları önceden yüklersin.
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.