PageSpeed Insights görsel sunumu uyarısı nasıl düzeltilir?

1. 01Etkilenen sayfayı PageSpeed Insights veya Lighthouse'ta açın. İyileştirmek istediğiniz mobil ya da masaüstü raporunu seçin, görsel sunumu bölümünü açıp işaretlenen görsel URL'sini ve önerilen değişikliği not edin.
2. 02Görseli sayfada bulun. Tarayıcı geliştirici araçlarında indirilen görselle görüntüleme ölçülerini ekran yoğunluğunu hesaba katarak karşılaştırın. Yalnızca medya kütüphanesindeki aslı değil, seçilen kaynağı kontrol edin.
3. 03Sunulan görsel gereğinden fazla piksel içeriyorsa önce duyarlı boyutları veya tema ayarlarını düzeltin. Ölçüler uygunsa sıkıştırmayı ya da desteklenen başka bir biçimi karşılaştırın.
4. 04Görsel düzenleyicide gerekli ölçülerde bir kopya hazırlayın. Uygun dosyalar için Bitinz görsel sıkıştırıcıyı kullanın; bir şeyi değiştirmeden yazıları, kenarları, saydamlığı ve geçişleri inceleyin.
5. 05Yeni dosyayı veya şablon değişikliğini yayınlayın. Sayfanın eski önbellek sürümü yerine yeni görseli istediğini doğrulayın, ardından aynı cihaz ayarıyla raporu tekrarlayın.

Chrome, indirme boyutundan ve biçim için verimli bayt/piksel oranından tasarruf tahmin eder. Tahmini tasarrufu 4 KiB altındaki görseller işaretlenmez. Bu bir raporlama eşiğidir, önerilen en büyük görsel boyutu değildir.

Lighthouse 13 eski görsel denetimlerini bu bilgiyle değiştirdi; Lighthouse 12 ise içgörüleri zaten varsayılan rapor görünümü yapmıştı. Biçim uyarısı, fazla ölçüler ve ağır animasyon farklı çözümler isteyebilir. Genel yayın akışı için web sitesi görsellerini sıkıştırma rehberini izleyin.

• WordPress: blokta veya temada seçilen görsel boyutunu ve gerçek srcset ile sizes işaretlemesini kontrol edin. WordPress duyarlı görsel seçenekleri üretir; ancak özel şablon veya yanlış düzen açıklaması yine uygunsuz boyut sunabilir. Yalnızca aslı düzeltmek, oluşturulmuş eski kopyaların kullanılmasını sürdürebilir.
• Shopify: mağaza görselleri biçim seçimi dâhil Shopify CDN üzerinden zaten optimize edilir. Shopify, yüklemeden önce elle sıkıştırmanın gerekmediğini belirtir. Uyarı durumunda kaynağı tekrar tekrar bozmak yerine temanın istediği genişliği ve duyarlı işaretlemeyi inceleyin. Tema geliştiricisi image_url ve image_tag değerlerini kontrol edebilir.
• Next.js: Image bileşeninin duyarlı ayarlarını kullanın ve özellikle fill ile sizes değerini gerçek düzene uygun verin. Uygun değer yoksa dar bir görsel ekran alanı genişliğindeymiş gibi değerlendirilip daha büyük seçenek indirilebilir. Yalnızca kaliteyi değiştirmek bu düzen uyuşmazlığını çözmez.

Düzenlenebilir aslı saklayın. Bağımsız sunulan görsellerde hazırlanan dosyanın gerçek boyutunu ve görünümünü karşılaştırın; JPG, PNG ve WebP karşılaştırması seçimi kolaylaştırır. Bitinz görsel ölçülerini değiştirmez. WebP dönüşümü dosyayı büyütebilir; sayfaya gerçekten uyan sürümü saklayın.

Tekrarlanan yayın akışında geliştirici API'si hesap ve aylık kota ile uygun dosyaları işleyebilir. Tema işaretlemesini veya duyarlı düzeni onarmaz. Otomasyonu bağladıktan sonra sunulan sayfayı yeniden kontrol edin.

• İşaretlenen URL değiştirdiğiniz görsel ve sürümle eşleşir.
• Tarayıcı farklı ekran boyutlarında uygun kaynağı seçer.
• Sıkıştırma yararlı ayrıntıları, saydamlığı ve yumuşak geçişleri korur.
• Ana görünür görsel, uygunsuz tembel yükleme ayarı yüzünden gecikmez.
• Yeni rapor aynı cihaz ayarını kullanır; sayfanın gerçek görünümü ve yüklenmesi de kontrol edilir.