Lighthouse'da Largest Contentful Paint görselinin geç yüklenme uyarısını düzeltin

Largest Contentful Paint görselinin geç yüklenme sorunu - kısaca.

Largest Contentful Paint görselini lazy loading ile yüklemek bir Lighthouse uyarısını tetikleyecektir. Lazy loading uygulanan görseller normal (eager) görsellere kıyasla çok daha geç indirilmek üzere sıraya alınır. Bu durum görselin daha geç render edilmesine ve Largest Contentful Paint metriğinin gecikmesine neden olur. 

Tarayıcılar bunu anlayacak kadar akıllı değil mi? Evet, tarayıcılar oldukça akıllıdır, ancak bu durumda değil!

Bir görsel öğesine lazy loading uyguladığınızda, tarayıcıya bu görselin önceliğini düşürmesini açıkça söylemiş olursunuz.

Bu, diğer tüm lazy olmayan görsellerin, lazy görsellerinizden önce indirilmek üzere planlanacağı anlamına gelir. Bu lazy görsel LCP öğeniz olduğunda, muhtemelen LCP'nizi geciktirirsiniz. Hatta belki de oldukça fazla!

JavaScript tabanlı lazy loading kütüphaneleri (lazysizes.js gibi) kullandığınızda durum daha da kötüleşir. Artık tarayıcı yalnızca LCP görsel öğenizi geciktirmekle kalmaz, ayrıca JavaScript'in indirilmesini ve çalıştırılmasını da beklemeniz gerekir.

LCP görselinizden loading="lazy" özelliğini kaldırarak veya eklentilerinizin filtrelerini LCP görseli için lazy loading'i atlayacak şekilde güncelleyerek Lighthouse uyarısını düzeltin.

'Largest Contentful Paint image was lazily loaded' uyarısı nedir?

Bu uyarı, Largest Contentful Paint görseli tarayıcı tarafından lazy loading ile yüklendiğinde verilir. Neden? Çünkü sayfadaki en önemli görseli (Largest Contentful Paint öğesi) lazy loading ile yüklemek kötü bir fikirdir. Sayfa hızı açısından bu öğeyi mümkün olduğunca erken yüklemelisiniz. Bu öğeye lazy loading uygulamak Largest Contentful Paint'i geciktirebilir.

Kısa bir hatırlatma: lazy loading

Lazy loading, bir öğenin (genellikle bir görsel) sayfa yüklenirken tarayıcı tarafından hemen indirilmek üzere planlanmadığı, bunun yerine öğe ekranın görünür kısmına yaklaştığında indirildiği bir yöntemdir. İki lazy loading yöntemi vardır.

Native lazy loading

Native lazy loading, tarayıcının yerleşik lazy loading API'sini kullanır. Görseller için görsel etiketine loading="lazy" eklemek kadar basittir. Native lazy loading şu anda tüm modern tarayıcılar tarafından desteklenmektedir.

<img  
     src="image.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

JavaScript tabanlı lazy loading

JavaScript tabanlı lazy loading, bir görselin görünür viewport'ta veya yakınında olup olmadığını belirlemek için intersection observer adlı bir JavaScript API'si kullanır. Bir görsel görünür viewport'ta olduğunda, görsel src'si son görselle değiştirilir. Genellikle JavaScript tabanlı lazy loading'i görseldeki data-src özelliğinden tanıyabilirsiniz. JavaScript lazy loading daha fazla tarayıcı tarafından desteklenir ancak ciddi bir dezavantajı vardır: 'JavaScript kullanır'. Lazy loading'in başlaması için bile bir JavaScript dosyasının indirilmesi gerekir. Bu da JavaScript tabanlı lazy loading'in asla native lazy loading kadar hızlı ve verimli olamayacağı anlamına gelir

<img  
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

'Lazy loading uygulanan Largest Contentful Paint görseli' sayfa hızını nasıl etkiler?

Bu öğeye lazy loading uygulamak, LCP görselinin ekrana boyanma anını geciktirecektir. Bu durum ziyaretçinin sayfanın daha yavaş yüklendiğini düşünmesine neden olur çünkü 'görsel olarak hazır' olması daha uzun sürer

En önemli görsel, genellikle LCP öğesi, ekrana mümkün olduğunca hızlı boyanmasını sağlamak için hemen yüklenmelidir.

Şimdi bir tarayıcının bunu anlayacak kadar akıllı olacağını düşünebilirsiniz? Yanılıyorsunuz! Bir görsel öğesine lazy loading uyguladığınızda, tarayıcıya bu görselin önceliğini düşürmesini açıkça söylemiş olursunuz. Bu, diğer tüm lazy olmayan görsellerin, lazy görsellerinizden önce indirilmek üzere planlanacağı anlamına gelir. Bu lazy görsel LCP öğeniz olduğunda, muhtemelen LCP'nizi geciktirirsiniz. Hatta belki de oldukça fazla!

JavaScript tabanlı lazy loading kütüphaneleri (lazysizes.js gibi) kullandığınızda durum daha da kötüleşir. Artık tarayıcı yalnızca LCP görsel öğenizi geciktirmekle kalmaz, ayrıca JavaScript'in indirilmesini ve çalıştırılmasını da beklemeniz gerekir.

LCP görselini (HERO.jpg) lazy loading ile yüklediğim ve diğer 6 görseli eager olarak yüklediğim bu Chrome ağ sekmesine bir bakın. HERO görselinin indirilmeye en son başlayan ve ayrıca indirilmesi en son tamamlanan görsel olduğunu göreceksiniz!

Biraz daha detay

Şimdi biraz daha teknik olalım. Tarayıcı neden bunu kendi başına çözemez? Çünkü lazy loading ile tarayıcıya bir görselin önceliğini düşürmesini açıkça söylüyorsunuz. Birçok durumda bu, tarayıcının önce diğer kaynakları indirmeye başlayacağı anlamına gelir. Ve tam olarak bu LCP'deki gecikmeye neden olur.

• Lazy görseller, lazy olmayan (eager) görsellere kıyasla çok daha geç indirilmek üzere sıraya alınır.
• Lazy görseller genellikle düşük öncelikle indirilir.
• Normal görseller, ertelenmiş scriptler, fontlar gibi diğer öğeler lazy görsellerden önce indirilmek üzere planlanabilir.
• JavaScript tabanlı lazy loading, lazy loading'in başlayabilmesi için önce indirilmesi ve çalıştırılması gereken bir JavaScript'e bağlıdır.
  

'Largest Contentful Paint image was lazily loaded' nasıl düzeltilir

Lazy Largest Contentful Paint görseli uyarısını düzeltmek basittir. Bu görsele lazy loading uygulamayın.

Teoride

• Native lazy loading kullanıyorsanız, LCP öğesinden loading="lazy" özelliğini kaldırın veya loading="eager" olarak değiştirin
• JavaScript tabanlı lazy loading kullanıyorsanız, daha hızlı olan native lazy loading'e geçmeyi düşünebilir veya LCP görselini lazy loading'den muaf tutabilirsiniz.
• next/image gibi bir görsel bileşeni kullanıyorsanız strategy="eager" olarak ayarlayın.

Pratikte

Pratikte bu bazı sorunlara neden olabilir. Birçok site, tüm görselleri sizin için lazy loading ile yükleyen optimizasyon eklentileri kullanır. Bu eklentiler önemli, her zaman görünür görseller ile ekranın altında kalan görseller arasında ayrım yapmaz.

Çoğu eklenti, dosya adı, sınıf adı veya diğer özelliklere göre 'lazy loading'i atlamanıza' olanak tanır. Bu, eklentinizin belgelerini okumanız veya '[eklenti adınız] + bypass lazy loading' şeklinde arama yapmanız gerektiği anlamına gelir. Ardından şablon dosyanızı düzenleyin ve ana görselinizi buna göre değiştirin veya sayfa editöründeki görselleri değiştirin.

'Largest Contentful Paint image was lazily loaded' için geçici çözümler

Bazen CMS'niz görsellerin lazy loading ayarlarını değiştirmenize izin vermeyebilir. Bu durumda etkiyi en aza indirmek için kullanabileceğiniz bazı geçici çözümler vardır.

• Tüm görsellere lazy loading uygulayın böylece ekranın altındaki 'eager' görseller LCP görselinden önce indirilmez
  
• Arka plan görsellerinden kaçının böylece LCP öğesinden önce hiçbir arka plan görseli indirilmez
  
• LCP öğesini önceden yükleyin (preload). Bu, LCP görselinin mümkün olduğunca erken indirilmek üzere planlanmasını sağlar
  
• JavaScript tabanlı lazy loading'i devre dışı bırakın ve native lazy loading'e geçin. Bu en azından JavaScript gecikmesini ortadan kaldırır
  
• LCP öğesine fetchpriority = "high" ekleyin. Bu, görselin erken indirilmek üzere planlanmasını sağlar
  
• Tüm görsellerinizi optimize edin. Görselleri indirme süresini azaltmak için responsive görseller ve yeni nesil görsel formatları kullanın.