Önceden yükleme önceliğini optimize etme

Kaynakları <link rel="preload"> ile önceden yüklemek, tarayıcıya yakında bir kaynağa ihtiyaç duyulacağını bildirir. Ancak ön yüklemeler, kaynak türü için varsayılan önceliği devralır ve özellikle resimler için bu öncelik düşüktür. fetchpriority kullanmak, bu göreceli önceliği hassaslaştırmanıza olanak tanır. Özellikle de resim ön yüklemelerinin yüksek öncelikle önceden yüklenmesini sağlayarak daha erken başlamalarını ve daha fazla bant genişliği kaynağı kullanmalarını sağlar.

Nasıl uygulanır?

1. Önceden yükleme adaylarını belirleyin: Tarayıcı tarafından erken keşfedilmeyen (ör. CSS'deki video poster resimleri veya arka plan resimleri) ancak sayfanın görünümü için gerekli olan kaynakları bulun.
2. Kritik resim ön yüklemelerini yükseltin: LCP resmi veya varsayılan olarak önceliklendirilmeyen diğer kritik resimler için <link rel="preload" fetchpriority="high"> kullanarak bunların diğer ön yüklemelere göre önceliklendirilmesini sağlayın. Yazı tiplerinin varsayılan olarak yüksek öncelikli olduğunu unutmayın.
3. Kritik olmayan ön yüklemelerin önceliğini azaltın: İlk oluşturma için kritik olmayan kaynaklar (ör. arka plan videosu veya ikincil yazı tipleri) için <link rel="preload" fetchpriority="low"> kullanın.
4. Kaynak türleriyle koordinasyon: Farklı as türlerinin farklı varsayılan öncelikleri olduğunu unutmayın. Gerektiğinde bu varsayılanları geçersiz kılmak için fetchpriority kullanın.

Örnek kod

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

En İyi Uygulamalar

• ZORUNLU: Ağ çakışmasını ve öncelik artışının etkisini azaltmayı önlemek için fetchpriority="high" özelliğini en fazla 1-2 kritik resim ön yüklemesinde kullanın.
• ZORUNLU: Largest Contentful Paint (LCP) resimlerinde fetchpriority="high" kullanın.
• ÖNERİLEN: Bant genişliği çakışmasını önlemek için bir sayfadaki toplam ön yükleme sayısını en fazla 2 resim ve 2-3 temel yazı tipiyle sınırlayın.
• Tarayıcının erken başlatmasını istediğiniz ancak kritik kaynaklar (özellikle kritik olmayan yazı tipleri) pahasına başlatmasını istemediğiniz ön yüklemeler için fetchpriority="low" KULLANIN.
• Ön yüklemenin kullanılmasını sağlamak için as özelliğini doğru şekilde BELİRTİN.
• Arka plan resimleri için önceden yüklemelere güvenmek yerine, kritik kaynakları (LCP resimleri gibi) <img> etiketleri aracılığıyla HTML'de statik olarak bulunabilir hale getirmeyi TERCİH EDİN.
• Yazı tipi ön yüklemelerinin her zaman crossorigin özelliğine sahip olduğundan emin OLUN (aynı kaynak olsa bile).
• Desteği sonlandırılan importance özelliğini KULLANMAYIN. fetchpriority ile değiştirildi.

Yedek strateji

<link rel="preload"> öğesindeki fetchpriority özelliği, progresif geliştirmedir. Bu özelliği desteklemeyen tarayıcılar, ilgili kaynak türü için varsayılan önceliklerini kullanarak kaynağı önceden yüklemeye devam eder. Uyumluluğu sağlamak için her zaman doğru as ve type özelliklerini sağlayın.