Google PageSpeed için görseller nasıl optimize edilir?

İşe yarar bir başlangıç kaydı oluşturun

PageSpeed Insights’ı açın, test etmek istediğiniz sayfanın herkese açık URL’sini girin ve mobil cihaz veya masaüstü için bir test başlatın.

1. Yayımlanan URL'yi tam yoluyla test edin.
2. Mobil mi masaüstü mü olduğunu kaydedin.
3. Belirtilen görseli ve mevcut URL'sini not edin.
4. Ölçüleri ve dosya boyutunu raporla birlikte saklayın.
5. Hedefi belirleyin: dosya boyutu, keşif, yerleşim kararlılığı veya başka bir sorun.

Kapsamlı değişikliklerden önce temsili bir sayfa seçin: olağan galerisine sahip bir ürün veya tipik kapak görseli olan bir makale. Ana sayfa, tüm şablonların durumunu tek başına göstermez.

Hedefli bir düzeltme seçin

Sunulan görsel kapladığı alana göre fazla büyükse uygun boyutlu sürümler oluşturun. Sorun kodlamaysa JPG'den WebP'ye veya PNG'den WebP'ye dönüştürerek karşılaştırın.

Görsel göründüğünde yerleşim kayıyorsa önceden yer ayırın. Ana görselin isteği geç başlıyorsa tarayıcının onu nasıl bulduğunu inceleyin. Core Web Vitals rehberi bu farkları açıklar.

İki ölçüm türünü anlayın

PageSpeed Insights, Lighthouse laboratuvar testini mevcut olduğunda gerçek kullanıcı verileriyle birleştirir. Bu veriler son 28 günü kapsar ve tek bir sayfa yerine aynı protokolü, sunucu adını ve bağlantı noktasını kullanan tüm sayfaları kapsayabilir. Küçük sitelerde yeterli veri bulunmayabilir; bu, testin başarısız olduğu anlamına gelmez. Google'ın PageSpeed belgelerine bakın.

Yeni bir çıktı bir sonraki laboratuvar testini etkileyebilir; geçmiş veriler ise hemen yalnızca güncel sayfayı yansıtmaz. Anlık test iyileşmesini tüm kullanıcıların deneyimiyle karıştırmamak için raporun hangi bölümünü karşılaştırdığınızı not edin.

Saha verilerinin bu URL’yi mi yoksa tüm kaynağı, yani origin’i mi temsil ettiğini kontrol edin. Origin; aynı protokolü, ana makine adını ve bağlantı noktasını paylaşan sayfaları kapsar. Bu veriler, düzenlediğiniz tek bir ürün sayfasının iyileştiğini doğrulamaz. Sayfa düzeyindeki laboratuvar karşılaştırmalarını bu genel görünümden ayrı tutun. Tahmini bayt tasarrufunu ölçülmüş LCP iyileşmesinden de ayırın: görsel küçülse bile daha erken görünmeyebilir.

Değişikliğin yayında olduğunu doğrulayın

Dosyayı yayımlayın ve gerektiğinde dosya bağlantısını güncelleyin. Tarayıcının gerçek isteğini kontrol edin. Yerel çıktı almak ziyaretçiler için hiçbir şeyi değiştirmez. Eski sürüm sunuluyorsa önbelleği ve üretilen görsel sürümlerini inceleyin.

Aynı URL'yi ve cihaz kategorisini yeniden test edin. Beklenmedik dalgalanmaları tekrar ölçün ve yalnızca puanı değil, ilgili sorunu karşılaştırın. Hangi işlemin işe yaradığını anlamak istiyorsanız barındırmayı, betikleri ve tüm görselleri aynı anda değiştirmeyin.

Diğer darboğazlar ne zaman daha önemlidir?

Görsel sorunları giderildikten sonra kalan gecikmeleri inceleyin. Yavaş yanıtlar, ağır betikler veya geç oluşturma baskın olabilir. Daha fazla sıkıştırma bu durumda asıl nedeni çözmeden görüntüyü kötüleştirir.

Sayfayı, orijinali, yerine konan dosyayı ve gözlenen sonucu kaydedin. Böylece süreç tekrarlanabilir olur; tema veya yerleşim değişikliklerinden sonraki gerilemeleri fark edebilirsiniz.

Örnek: rapordaki bulgudan düzeltmeye

Mobil raporun çok büyük bir ürün fotoğrafı belirlediğini düşünün. Raporu, sayfa ve görsel URL'lerini ve gösterim ölçülerini saklayın. Aynı kırpmayla küçük bir kopyayı test sayfasında yayımlayıp ölçümden önce gerçek isteği doğrulayın. Bu bir iş akışı örneğidir, ölçülmüş puan artışı değildir.

Tarih, cihaz türü, ölçüler, dosya boyutu, LCP, yerleşim kaymaları ve kaliteyi kaydedin. Karşılaştırılabilir testleri tekrarlayıp değişim aralığına bakın; en iyi yeni sonucu en kötü eski sonuçla karşılaştırmayın. Dosya küçülürken LCP değişmiyorsa başka bir aşama baskın olabilir.

Değişikliğin kalmasına karar verin

Sorunu ayrıntıları, metni veya düzeni bozmadan çözüyorsa değişikliği koruyun. İstek hâlâ geç başlıyorsa keşif ve yüklemeyi inceleyin. Dosya gelmiş ama görünmüyorsa oluşturmayı ve görünme efektlerini kontrol edin. Yalnızca sıkıştırma bu gecikmeleri çözmez.