Resim önceliğini optimize etme

Tarayıcılar, resimlere yükleme öncelikleri atamak için sezgisel yöntemler kullanır ancak bu varsayılanlar her zaman sayfanızın Largest Contentful Paint (LCP) değeriyle uyumlu olmayabilir.

<img> öğesinde fetchpriority kullanmak, bir resmin önemini tarayıcıya açıkça bildirmenizi sağlar. Böylece, kritik resimler daha hızlı yüklenirken gerekli olmayan resimler bant genişliği için rekabet etmez.

loading=lazy özelliği, ekranın yeterince dışında olan resimlerin indirilmesini tamamen engeller. Bu da resimlere öncelik verilmesine daha fazla yardımcı olabilir.

Nasıl uygulanır?

1. LCP resmini belirleyin: Largest Contentful Paint için en olası adayın hangi resim olduğunu belirleyin (genellikle sayfanın üst kısmındaki hero resim).
2. LCP önceliğini artırma: LCP adayı için <img> öğesine fetchpriority="high" ekleyin.
3. Kritik olmayan resimlerin önceliğini azaltın: İkincil bir kullanıcı arayüzünün parçası olan veya yalnızca kullanıcı etkileşiminden sonra gösterilen resimler (ör. mega menüler, modüller veya ekran dışı rulo slaytları) için fetchpriority="low" ekleyin.
4. Geç yüklemeyi optimize edin: LCP resminde hiçbir zaman loading="lazy" kullanmayın. Standart ekranın alt kısmındaki resimler için loading="lazy", kullanıcı resimlerin yakınına kaydırana kadar isteği ertelemek için yeterlidir. Kullanıcı bu resimlere kaydırdığında normal öncelikte yüklenmelerini istediğiniz için bu resimlere fetchpriority="low" eklemekten kaçının. Teknik olarak "ekranın üst kısmında" olan ancak başlangıçta görünmeyen resimler (ör. gizli bant slaytları veya mega menüler) için fetchpriority="low" ayırın. Bu gizli resimler için loading="lazy" kullanmak da kabul edilebilir. Tarayıcı, düşük önceliğe saygı göstererek istek zamanlamasını yönetir.
5. Varsayılan öncelikleri tercih edin: Bir resmin normal yükleme önceliği olması gerekiyorsa fetchpriority özelliğini auto olarak ayarlamak yerine tamamen çıkarın. Bu, tarayıcının yerel sezgisel yöntemlerini kullanırken HTML'nizi daha temiz tutmak için kullanılan bir stil kuralıdır.

Örnek kod

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

En iyi uygulamalar

• ZORUNLU: LCP resmine her zaman fetchpriority="high" uygulayın.
• ZORUNLU: Ağ çakışmasını ve öncelik artışının etkisini azaltmayı önlemek için fetchpriority="high" özelliğini en fazla 1-2 kritik resimde kullanın.
• ZORUNLU: Teknik olarak "ekranın üst kısmında" olan ancak başlangıçta gizlenen resimler (ör. gizli bant slaytları, mega menü resimleri) için fetchpriority="low" kullanın.
• ZORUNLU: Halihazırda loading="lazy" kullanan standart ekranın alt kısmındaki resimlerde fetchpriority="low" kullanmayın. Bu resimler, görüntü alanına girdikten sonra normal öncelikte yüklenmelidir.
• ÖNERİLİR: fetchpriority="auto" kullanmaktan kaçının. Varsayılan önceliği kullanmak istiyorsanız HTML'nizi temiz tutmak için özelliği tamamen çıkarın.
• fetchpriority="high" ile loading="lazy"'yi BİRLEŞTİRMEYİN.
• Desteği sonlandırılan importance özelliğini KULLANMAYIN. Bu özelliğin yerini fetchpriority aldı ve hiçbir tarayıcı tarafından desteklenmiyor.
• Desteği sonlandırılan loading="auto" değerini KULLANMAYIN. Başlangıçta Chrome tarafından destekleniyordu ancak kaldırıldı ve artık hiçbir tarayıcı tarafından desteklenmiyor.

Yedek strateji

fetchpriority özelliği, <img> öğesi için progresif bir geliştirmedir. Tarayıcı bu özelliği desteklemiyorsa özellik yoksayılır ve tarayıcı, varsayılan öncelik bulgusal yöntemlerini kullanır.