Jason Leung tarafından, Unsplash üzerinden
Çoğu pazarlama sitesinde LCP öğesi bir görsel; ve görsel, duyarlı boyutlandırma ve öncelik ipucu olmadan ham JPEG ya da PNG olarak sunuluyor. Modern formatlar bu açığı kapatıyor. AVIF, JPEG'in yaklaşık %50'si dosya boyutunda çalışıyor ve animasyonlu görsellerde GIF veya animasyonlu WebP'ye kıyasla yaklaşık %70 bayt tasarrufu sağlıyor (Cloudinary AVIF rehberi, 2023-2024). Tarayıcı destek hikayesi, önce AVIF, sonra WebP yedeği, son çare JPEG düzeninin 2024 itibarıyla yaygın pratik olmasına yetecek kadar oturmuş durumda.
Gerçek üretim kazanımları takip ediyor. Carousell, viewport üstündeki ürün görsellerinden lazy-loading'i kaldırdı ve önyükleme ekledi; mobilde LCP 200 ms iyileşti (Carousell mühendislik blogu, 2021). Tokopedia'nın görsel optimizasyonunun bir kaldıraç olduğu birleşik görsel ve JS çalışması, %8 dönüşüm artışı ve %55 LCP iyileşmesine katkı sundu (web.dev Tokopedia vaka çalışması, 2021). Renault'nun 1 saniyelik LCP iyileştirmesi, yaklaşık 10 milyon ziyaret üzerinde %13 dönüşüm artışı getirdi (web.dev Renault, 2021).
Mobil yükleme süresi eğrisinin bilinen bir şekli var. Cloudinary'nin derlenmiş benchmarkları, mobil dönüşümün yaklaşık 2,4 saniyelik yükleme süresinde tepe yaptığını ve 4,2 saniyenin ötesinde %1'in altına düştüğünü gösteriyor (Cloudinary, 2024). Akamai'nin klasik Amazon kökenli '100 ms = %1 gelir kaybı' verisi (orijinali 2006 Amazon çalışması; Conductor Academy özeti) sıklıkla zamansız bir gerçek olarak alıntılanır ama 2006-2017 e-ticaret ortamını yansıtır; yön olarak hâlâ örtüşüyor, ancak iddiaları güncel vaka verisine bağlayın.
Pratik oyun planı kısa. Her rotada LCP öğesini belirleyin, AVIF ve WebP arasında pazarlık yapan bir loader üzerinden sunun, CLS'yi önlemek için açık genişlik ve yükseklik tanımlayın, viewport üstündeki görsellere öncelik ipucu verin ve ilk viewport'ta hiçbir şeyi lazy-load yapmayın. Lazy loading, HTTP Archive 2024'ün izlediği sayfaların yaklaşık %33'üne ulaşmış olsa da, hero görsellerde tutarlı şekilde LCP'yi geriletiyor.