Görsel boyutu Core Web Vitals değerlerini nasıl etkiler?

Hangi Core Web Vitals değerleri etkilenebilir?

Largest Contentful Paint (LCP), görünür en büyük görselin veya metin bloğunun ne zaman çizildiğini ölçer. Bu bir fotoğraf olabilir; otomatik olarak logo ya da en büyük dosya değildir. Önce ölçülen öğeyi bulun. Google’ın LCP rehberi keşif, indirme ve çizim gecikmelerini açıklar.

Cumulative Layout Shift (CLS) beklenmedik hareketi ölçer. Yer ayrılmamış görseller geldiğinde içeriği aşağı itebilir. CLS rehberi, tarayıcının en-boy oranına uygun alan ayırabilmesi için ölçü belirtmeyi önerir.

Interaction to Next Paint (INP), kullanıcı etkileşimlerine yanıtı ele alır. Fotoğraf sıkıştırmak yavaş menüyü veya ağır tıklama işlemini otomatik düzeltmez. Bunları INP belgeleriyle ayrıca araştırın.

İyi bir Core Web Vitals sonucu nedir?

Tablo, Google’ın Core Web Vitals rehberindeki iyi sonuç eşiklerini gösterir. Üç metriğin de gerçek ziyaretlerin 75. yüzdelik diliminde hedefi karşılaması gerekir; mobil ve masaüstü ayrı değerlendirilir. Daha küçük bir görsel veya tek bir iyi laboratuvar testi, sayfanın değerlendirmeyi geçtiğini göstermez. Sorun INP ise fotoğrafı tekrar sıkıştırmak yerine etkileşim gecikmelerini araştırın.

Görünür ana görselle başlayın

Ürün sayfasında ana fotoğrafı; makalede raporun belirttiği kapak veya başlığı inceleyin. Önce-sonra karşılaştırması için kopyadan önce dosya büyüklüğünü, piksel ölçülerini ve görüntüleme boyutunu kaydedin.

Fotoğraf gerekenden büyükse boyutlandırma aracıyla küçültün. Ardından JPG’den WebP’ye çıktısını karşılaştırın. Yalnızca tasarrufu değil, ziyaretçinin ihtiyaç duyduğu ürün ayrıntılarını ve yazıları değerlendirin.

Tarayıcının ana görseli erken yüklemesini sağlayın

LCP görselinde geç yükleme kullanmayın. Betikler keşfi geciktiriyorsa küçük dosya bile geç görünebilir. Sıkıştırma az fayda sağlıyorsa tema veya site geliştiricisinden gerçek isteği incelemesini isteyin.

Geç yüklemeyi aşağıdaki görsellerde seçici kullanın. Galerinin ilk görünen fotoğrafı hemen gerekir; sonrakiler ziyaretçi yaklaştığında yüklenebilir.

Ölçülen LCP görselini yayımlanan sayfada belirleyin. Erken keşfedilmeli ve ertelenmiş yüklenmemelidir. Geliştirici o görsel için fetchpriority="high" ayarını değerlendirebilir; bütün galeriye uygulamak önceliğin amacını bozar. Sonrasında ağ isteklerini kontrol edin.

Düzeni sabit tutun

Kodda genişlik ve yükseklik belirtin, duyarlı stille oranı koruyun. Dar telefon ve geniş masaüstünü kontrol edin. Bilinçli kırpmada gösterilen alanı tutarlı ayırın.

Hareket sürerse banner, gömülü içerik ve yazı tiplerini de inceleyin. Görseli değiştirmek, sayfa göründükten sonra makalenin üstüne eklenen bildirimi düzeltmez.

width="1200" ve height="800" gibi HTML ölçüleri oranı belirtir. CSS, max-width: 100% ve height: auto ile görseli dar gösterebilir. Temanın uyumsuz sabit yükseklik vermediğini kontrol edin. Bilerek kırpılmış kartlar uygun bir ayrılmış alana ihtiyaç duyar.

Küçük dosya göründüğünde paragraf hâlâ sıçrıyorsa ayrılmış alan eksik olabilir. Ölçüleri veya kırpma kapsayıcısını düzeltip tekrar deneyin. Tersine, sabit çerçeve yavaş bir görsel içerebilir: alan ayırmak dosyayı küçültmez.

Tek değişikliği doğrulayın

1. URL, test cihazı ve sorunlu öğeyi kaydedin.
2. Bir görseli veya sunum ayarını değiştirin.
3. Canlı sayfanın önbellekteki eski dosya yerine yenisini istediğini doğrulayın.
4. Aynı testi tekrarlayıp açılış görünümünü inceleyin.
5. Kalite ve ölçüm destekliyorsa değişikliği koruyun.

Dışa aktarma performansın yalnızca bir parçasıdır. PageSpeed görsel iş akışıyla devam edin.