Gtmetrix site hızı ve performansı test aracında karşımıza çıkan en çok hatalardan birisi Serve scaled images hatasıdır. Bu hata sitemizde bulunan görsellerin görünüm boyutuna göre boyutlandırılmadığı için çıkıyor. Çözümü oldukça basit olan bu hatayı inceleyerek çözümünü sunacağım.
Sitelerimizi en çok yavaşlatan etkenlerin başında gelen görsel boyutları site yöneticilerinin büyük derdi. Görselin boyutu ve ölçüleri sitemizin açılış hızını etkiliyor. Serve scaled images sorunu ise görselin ölçüleri ile alakalı. Görselin boyutu 1080X1080 ancak gösterildiği yerin boyutu 50×50 ise gereksiz yere büyük ölçekte görsel kullanmış oluyoruz ve görselin boyutu büyüdüğü için sayfa yüklenmesinde gecikmeler oluşuyor.
Avoid a character set in the meta tag çözümü
Yazı İçeriği
Tasarımınız bozulmayacak
İşlemleri yanlış yapmak görsellerin bulunduğu bölgeye göre ölçeklendirmek sitenizin tasarımını bozabilir. Bu hatanın çözümünde en çok yapılan hatalardan birisidir. Görselleri elinizle boyutlandırmak bir çok sistemde hem zaman kaybı hem de tasarımsal bozukluklara yol açabilir.
Yazılım tarafında kullanılacak eklentiler ile kullandığınız görselin ihtiyacınıza göre farklı çözünürlükte ve boyutta kopya görseller oluşturuyor bu sayede 50×50 olan yere 50×50 çözünürlüğündeki görsel 250×250 olan yere ise 250×250 çözünürlüğündeki görsel gelerek tasarım ve görsel kalitesi bozulmadan sorunu çözmüş olacağız.
Büyük görsel kullanımı performansı etkiliyor
İhtiyacınız olan görsel çözünürlüğünden daha büyük bir çözünürlükteki görseli kullanmak görselin boyutunu(KB-MB) arttırmak ile kalmıyor tarayıcıya yük bindiriyor. Özellikle mobil tarayıcılarda yüksek boyutta ve çözünürlükteki görseller sitenizin yüklendikten sonraki kullanım performansını bile etkiliyor. Aşırı kullanımda mobil tarafta kasmalar meydana getirebilir.
Serve scaled images sorunu nasıl çözülür
WordPress
WordPress kullanıcıları için çözüm oldukça basit eklentiler ile serve scaled images sorununu otomatik olarak çözebilirsiniz. WordPress tarafında önerdiğimiz iki eklentiden birini seçerek çözüme ulaşabilirsiniz.
Optimole firmasının “Image optimization & Lazy Load by Optimole” eklentisi ile görsellerinizi ekrana bölgeye göre boyutlandırabilirsiniz. Firma eklentinin tahmini ekrana göre değil gerçek verilere göre boyutlandırdığını iddia ediyor bu ise ekstra bir yeniden boyutlandırma demektir.
WPMU DEV firmasının ise “Smush – Lazy Load Images, Optimize & Compress Images” adındaki eklentisi aynı işlemleri siteniz için yapıyor. Firmanın açıklamasına göre siteniz içerisindeki gereksin boyuttaki görselleri kendisinin tespit ettiğini söylüyor.
HTML Yolu ile çözüm
WordPress kullanmayan kullanıcılar veya tek bir bölgedeki görseli boyutlandırmak isteyenler için tarayıcıların desteklediği basit bir yöntemi sunacağım.
<img src="kucuk.jpg"
srcset="kucuk.jpg 500w,
orta.jpg 1000w,
buyuk.jpg 1500w"
alt="…">Bu kodun açıklaması şöyle; ana görselin 3 farklı boyutunu sitemize yüklüyoruz. Küçük olarak işaretlediğimiz görsel 500W yani 500 genişliğinde gözükecek. Orta olarak işaretlediğimiz 1000W yani 1000 genişliğinde gözükecek. Büyük olarak işaretlediğimiz görsel ise 1500W yani 1500 genişliğinde gözükecek. Ekran boyutu değiştikçe görseller değişecek.
