PageSpeed Insights’ta serve images in next-gen formats / resimleri yeni nesil biçimlerde yayınlayın uyarısı, görselleriniz WebP ya da AVIF formatında değilse karşınıza çıkar. Bu uyarı, LCP ve FCP ile ilgilidir. Uyarı ile ilgili gerekli çalışmaları yaptığınız takdirde bu iki metrikte iyileşmeler görmeye başlarsınız.
AVIF ve WebP, JPEG ve PNG gibi eski formatlara göre daha iyi sıkıştırma ve kalite sunan modern görsel formatlardır. Bu formatlarda görseller kullanmak, sayfalarınızın daha hızlı yüklenmesini ve daha az veri tüketmesini sağlar.
AVIF; Chrome, Firefox ve Opera tarafından desteklenir ve aynı kalite ayarlarında diğer formatlardan daha küçük dosya boyutları sunar. WebP ise Chrome, Firefox, Safari, Edge ve Opera gibi popüler tarayıcılarda çalışır. Bu formatlar sayesinde sitenizin hızını ve kullanıcı deneyimini artırabilirsiniz. Ben bu formatlar arasından WebP’yi tercih ediyorum.
Ancak mevcuttaki tüm görsellerinizi tek tek WebP’ye çevirip tekrardan yüklemeniz gerekmez ve bunu yapmak kolay da değildir. Bunun yerine bir eklenti kullanabilirsiniz. Örneğin; WordPress alt yapılı web sitelerinde LiteSpeed Cache, Shopify alt yapılı web sitelerinde Tiny SEO Speed Image Optimizer ya da Avada SEO Suite eklentilerini kullanabilirsiniz.
LiteSpeed Cache’de bunu yapabilmek için aşağıdaki adımları takip edebilirsiniz:
- Görsel Optimizasyonu > Görsel Optimizasyon Ayarları > Resimleri WebP Formatına Dönüştür – Açık > Değişikliği Kaydet
Avada SEO Suite uygulaması ile bunu yapabilmek için aşağıdaki adımları takip edebilirsiniz:
- Image Optimization > Settings – Edit > Convert to – WebP
Bu eklentiler sayesinde mevcut tüm görsellerinizi kolay bir şekilde WebP formatına çevirebilirsiniz. Ancak yeni görsel eklerken görseli WebP formatı ile yüklemek daha da sağlıklı olacaktır. Bunun için Photopea sitesini kullanabilirsiniz. Yükleyeceğiniz görseli buraya ekleyip aşağıdaki adımları takip edebilirsiniz:
- File > Export as > WebP
Ayrıca görselinizi dışarı aktarırken kalitesini de ayarlayabilirsiniz. Kalitesini azaltmak görselin boyutunu küçültecektir. Bu aşamada kalitesini bozmadan, kalitesi %80-90 civarlarında olacak şekilde bir ayarlama yapabilirsiniz.
Kaynaklar
- Serve images in next-gen formats, GTmetrix
- Serve images in modern formats, Chrome for Developers