Resim yayınlamayı kolaylaştırın uyarısı nasıl giderilir?
PageSpeed uyarılarının en yaygın kaynağı görseller; tek bir kapak görseli dört beş uyarıyı birden tetikleyebiliyor. Boyut, biçim ve yükleme sırasının doğru kurulması ve en sık yapılan hata.
En yaygın uyarı
Sahada gördüğümüz PageSpeed raporlarının neredeyse tamamında bu uyarı var ve genellikle listenin en üstünde duruyor.
Sebebi basit: bir web sayfasında indirilen verinin en büyük kısmı görseller. Metin kilobaytlarla, görseller megabaytlarla ölçülüyor.
Uyarının başlığı "Resim yayınlamayı kolaylaştırın" ve altında hangi görselin ne kadar fazla veri indirdiği tek tek yazılı.
İyi haber şu: bu uyarı hem en yaygın hem en kolay düzeltilen. Ve düzeltildiğinde rapordaki başka maddeler de kendiliğinden kapanıyor.
Üç ayrı sorun, tek uyarı
Bu başlık altında aslında üç farklı şey toplanıyor ve çözümleri farklı.
1. Görsel gereğinden büyük. Ekranda 400 piksel genişlikte görünen bir görsel, 2.000 piksel olarak yükleniyor. İndirilen verinin büyük kısmı hiç kullanılmıyor.
2. Eski biçim kullanılıyor. Aynı görsel, modern bir biçimde belirgin şekilde küçük dosya boyutuna iniyor.
3. Yanlış sırayla yükleniyor. İlk ekrandaki görsel geç indiriliyor ya da ekranın altındaki görseller baştan indiriliyor.
Rapor bu üçünü ayırmıyor; hepsini aynı başlık altında topluyor. Ayrımı sizin yapmanız gerekiyor.
Ana içeriğin görünme süresinin nasıl iyileştirildiği web.dev'in ilgili belgesinde anlatılıyor; ölçülerin tanımı ayrı bir sayfada duruyor.
Boyut — en büyük kazanç
Çoğu sitede tek başına en çok kazandıran düzeltme bu.
Kural: görsel, ekranda göründüğü boyutun en fazla iki katı olmalı. İki kat payı yüksek çözünürlüklü ekranlar için bırakılıyor.
Ekranda 400 piksel görünen bir görselin 800 pikselden büyük olmasına gerek yok. 2.000 piksel yüklemek, indirilen verinin dörtte üçünün çöpe gitmesi demek.
Farklı ekran boyutları için farklı sürümler sunmak da mümkün: telefona küçük, masaüstüne büyük dosya gidiyor. Bu, modern sistemlerin çoğunda otomatik yapılabiliyor.
İpucu — Görselin ekranda kaç piksel göründüğünü öğrenmek için tarayıcının geliştirici araçlarında görselin üzerine gelin. Gerçek boyut ve görüntülenen boyut yan yana yazıyor; aradaki fark israfın kendisi.
Biçim — ikinci büyük kazanç
Eski görsel biçimleri, aynı görsel kalitesini çok daha büyük dosyalarla veriyor.
Modern biçimler aynı görseli belirgin şekilde küçültüyor ve gözle fark edilir bir kalite kaybı olmuyor. Tarayıcı desteği bugün yaygın.
Uygulama yolu iki türlü:
Otomatik. Çoğu içerik yönetim sistemi ve eklenti, yüklenen görseli modern biçimde de üretip destekleyen tarayıcılara onu sunuyor.
Elle. Görselleri dönüştürüp yüklemek. Küçük sitelerde pratik, büyük kataloglarda değil.
Eski biçimler yedek olarak bırakılıyor; desteklemeyen bir tarayıcı gelirse onu alıyor.
Sıra — en sık yapılan hata
Bu bölüm, uyarının en çok yanlış anlaşılan kısmı.
İlk ekrandaki görsele tembel yükleme uygulanmaz. Tembel yükleme, görselin indirilmesini kullanıcı oraya kaydırana kadar geciktiriyor. İlk ekrandaki görsel zaten görünüyor; geciktirmenin tek etkisi ölçüyü kötüleştirmek oluyor.
Ekranın altındaki görsellere uygulanır. Orada gerçek kazanç var.
Bu ayrım yapılmadan açılan tembel yükleme, hız için eklenen bir özelliğin hızı bozmasına yol açıyor. Ayrıntısını tembel yükleme yazısında anlattık.
İkinci sıra meselesi: ilk ekrandaki görselin öncelikli yüklenmesi. Tarayıcıya "bunu diğerlerinden önce indir" demek mümkün ve bu, ölçüyü doğrudan iyileştiriyor.
Görselin yeri | Doğru davranış |
|---|---|
İlk ekran, ana görsel | Öncelikli yükle, tembel yükleme YOK |
İlk ekran, küçük öğeler | Normal yükle |
Ekranın altı | Tembel yükleme VAR |
Galeri ve liste | Tembel yükleme VAR |
Arka plan görseli | Boyut ve biçim optimize, öncelik duruma göre |
Ölçü tanımı — ayrı ama ilgili
Görsellere genişlik ve yükseklik değeri yazmak, bu uyarıyla doğrudan ilgili değil ama aynı anda çıkan başka bir uyarıyı kapatıyor.
Bu değerler yazılmadığında tarayıcı görselin ne kadar yer kaplayacağını bilmiyor ve görsel gelince sayfa zıplıyor. Ayrıntısını düzen kayması yazısında ele aldık.
İki değeri yazmak tek satırlık bir iş ve iki uyarıyı birden etkiliyor.
Dikkat — Ölçü değerlerini yazmak, görselin sabit boyutta görüneceği anlamına gelmiyor. Stil tarafında duyarlı davranış korunuyor; bu değerler yalnızca oranı bildiriyor.
Arka plan görselleri
Rapor bazen arka plan olarak kullanılan görselleri de işaret ediyor ve bunlar gözden kaçıyor.
Arka plan görselleri stil dosyasından yükleniyor; yani tarayıcı önce stil dosyasını indirmek zorunda, sonra görseli. Bu, iki adımlı bir gecikme demek.
İlk ekranda büyük bir arka plan görseli varsa, onu normal bir görsel öğesi olarak kullanmak genellikle daha hızlı sonuç veriyor.
Kaç görsel gerekiyor?
Optimizasyondan önce sorulacak bir soru daha var ve en çok kazandıranı bu olabiliyor: bu görsellerin hepsi gerekli mi?
Sahada gördüğümüz durum: sayfada altı slayt var ve kullanıcıların büyük kısmı ikinciyi bile görmüyor. Altı görselin altısı da indiriliyor.
Kaldırılan bir görsel, optimize edilen görselden her zaman hızlı.
Örnek senaryo — Bir kurumsal sitede ana sayfada beş görselli bir slayt var. Toplam 4,8 MB. Ölçüm yapıldığında kullanıcıların çok azının ikinci slayta geçtiği görülüyor. Slayt kaldırılıp tek bir görsel bırakılıyor; o da yeniden boyutlandırılıp modern biçime çevriliyor. Sayfa ağırlığı 4,8 MB'tan 340 KB'a iniyor ve rapordaki dört uyarı birden kayboluyor.
Kontrol listesi
- Her görsel, ekranda göründüğü boyutun en fazla iki katı mı?
- Modern biçim sunuluyor mu?
- İlk ekrandaki görselde tembel yükleme kapalı mı?
- İlk ekrandaki ana görsel öncelikli yükleniyor mu?
- Her görselde genişlik ve yükseklik değeri var mı?
- Sayfadaki görsellerin hepsi gerçekten gerekli mi?
Altı maddenin tamamı bir öğleden sonrada kontrol edilebiliyor ve çoğu sitede rapordaki uyarıların yarısını kapatıyor.
Farklı ekranlara farklı görsel
Tek bir görsel dosyasını her cihaza göndermek, mobil kullanıcıya gereğinden büyük dosya indirtmek demek.
Modern tarayıcılar aynı görselin farklı boyutlardaki sürümlerini destekliyor: telefona küçük, masaüstüne büyük dosya gidiyor.
Bu, içerik yönetim sistemlerinin çoğunda otomatik yapılıyor — yüklenen görselin birkaç boyutu üretiliyor ve uygun olan sunuluyor. Ayarın açık olduğundan emin olmak yeterli.
Özel geliştirilen sitelerde bu davranışın kurulması gerekiyor ve genellikle tek seferlik bir iş.
Görsel kalitesi ne kadar düşürülebilir?
Sıkıştırma oranını artırmak dosya boyutunu düşürüyor ama bir noktadan sonra gözle görülür kalite kaybı başlıyor.
Pratik yaklaşım: kaliteyi kademeli düşürüp gözle karşılaştırmak. Fotoğraflarda belirgin bir sıkıştırma çoğu zaman fark edilmiyor; düz renkli grafiklerde ise erken bozulma başlıyor.
Kural şu: fotoğraf ve grafik farklı davranıyor. Aynı ayarı ikisine birden uygulamak, birinde israf birinde bozulma üretiyor.
İpucu — Karşılaştırmayı telefonda yapın. Masaüstü ekranında fark edilen bozulmaların bir kısmı mobilde hiç görünmüyor ve asıl kazanç orada.
Sonuç — Görsel optimizasyonu, hız çalışmasında emek başına en çok kazandıran iş. Karmaşık bir teknik gerektirmiyor; boyut, biçim ve sıra — üçü de ölçülebilir ve düzeltilebilir.
Görsel ve hız düzeltmelerinin uygulamasını teknik SEO kapsamında yapıyoruz; yeni bir sitede bu ayarlar baştan doğru geliyor — web sitesi geliştirme ve kurumsal web tasarım sayfalarında anlattık.
Rapordaki diğer uyarıların ne anlama geldiğini PageSpeed uyarıları yazısında topladık.
