Google’dan yeni bir videoda, Geliştirici Avukatı Alan Kent, e-ticaret web siteleri için görüntüleri optimize etmeye yönelik altı ipucu paylaşıyor. Video özellikle e-ticaret sitelerine yönelik olsa da, tavsiye çok sayıda görsel sunan tüm web siteleri için geçerlidir. 14 dakikadan fazla süren Google’ın videosu, web sitelerinde çalışmakla meşgulseniz sindirilecek çok şey var. İşte beş dakikadan kısa sürede tüketebileceğiniz daha lezzetli bir özet. Bunlar, resimlerin daha hızlı ve daha verimli şekilde yüklenmesini sağlamak için Google’ın ipuçlarıdır.
1. Görüntü Kümülatif Düzen Kaymasını (CLS) Ortadan Kaldırın
CLS, sayfadaki içeriğin yüklenirken bir yerden diğerine görsel olarak hareket ettiği veya kaydığı durumları ifade eder. Bu sorun yalnızca görüntülerden kaynaklanmasa da, yanlış kullanılırsa soruna katkıda bulunabilirler. Çoğu durumda, yükleme sırasında bir sayfada hareket arayarak CLS’yi tespit etmek kolaydır, ancak bunu ölçmek için birkaç araç vardır.
2. Resimlerinizi Doğru Boyutlandırın
Daha büyük dosyaların indirilmesi daha uzun sürdüğü için resimleriniz için doğru genişlik ve yüksekliği seçin. Sitenizi ziyaret eden ekran boyutları ve çözünürlük aralıkları nedeniyle görüntüleri doğru şekilde boyutlandırmak karmaşık olabilir. Tarayıcı görüntüyü kendi kendine kırparsa, indirme boyutu gerekenden daha uzun olur ve bu da yalnızca işleri aşağı çeker. Yanlış boyuttaki görüntüleri algılamanın kolay bir yolu , PageSpeed Insights raporundaki Fırsatlar altındaki doğru boyuttaki görüntüler bölümünü kullanmaktır . Gerekenden daha büyük görselleri belirledikten sonra, duyarlı görseller gibi çözümlerle sorunu çözebilirsiniz.
3. En İyi Görüntü Dosyası Formatını Kullanın
PNG, JPEG veya webP dosyalarının kullanılıp kullanılmayacağı gibi resimlerinizin dosya biçimini düşünün. Dosya formatı dosya boyutunu etkiler, bu nedenle doğru olanı seçmek dikkatli bir şekilde düşünmeyi gerektirir. Her format için tartılacak artılar ve eksiler vardır. Örneğin, JPEG ve webP, daha küçük dosya boyutlarına sahip olma eğilimindedir, ancak daha küçük boyut, görüntü kalitesi pahasına elde edilir. Ancak, görüntü kalitesindeki bozulma alışveriş yapanlar tarafından fark edilmeyebilir ve hız avantajı önemli olabilir. Sitenizin farklı bir resim formatı kullanmaktan fayda sağlayıp sağlayamayacağını tespit etmek için , PageSpeed Insights raporunun yeni nesil formatlarda sunum resimleri bölümüne bakın. Bu rapor, daha verimli bir dosya biçimine dönüştürülebilecek resimleri listeler.
4. Görüntüleri Uygun Şekilde Sıkıştırın
İstenen görüntü kalitesini korurken, görüntülerinizi verimli bir şekilde kodlamak için doğru kalite faktörünü kullanın. PageSpeed Insights raporunun Görüntüleri Verimli Şekilde Kodla bölümü , sıkıştırma optimizasyonu için iyi aday olan görüntüleri belirlemek için kullanılabilir. Rapor ayrıca olası dosya boyutu tasarruflarını da gösterir. Memnun kaldığınız bir kalite faktörü bulmak için, farklı kalite değerleri kullanan birkaç görüntü üzerinde tercih ettiğiniz görüntü dönüştürme aracını kullanın ve öncesi ile sonrasını karşılaştırın. Google, sıkıştırmalı ve sıkıştırmasız görüntüleri karşılaştırmanın kolay bir yolu olarak Squoosh.app sitesini önerir.
5. Tarayıcıda Önbellek Görüntüleri
Tarayıcıya, görüntüleri ne kadar süreyle güvenli bir şekilde önbelleğe alabileceğini söyleyin. Bir görüntü döndürdüğünüzde, bir tarayıcının bir görüntüyü önbelleğe almasının ne kadar süre için önerildiği gibi önbelleğe alma kılavuzuyla birlikte bir HTTP yanıt başlığı döndürebilirsiniz. Yine, HTTP yanıtı önbellek başlıklarının sitenizde doğru şekilde ayarlanıp ayarlanmadığını saptamak için PageSpeed Insights raporunu kullanabilirsiniz. Statik varlıkları verimli bir önbellek ilkesiyle sun , önbelleğe alma iyileştirmelerinden yararlanabilecek görüntüleri tanımlar. Sitenizdeki sorunları düzeltmek için, sitenizdeki görüntülerin önbellek ömrünü ayarlamak için değiştirebileceğiniz platform veya web sunucusu ayarlarınız olup olmadığına bakın. Resimleri sık sık değiştirmiyorsanız, uzun bir önbellek ömrü ayarlayabilirsiniz.
6. Resim İndirmelerinizi Doğru Bir Şekilde Sıralayın
Daha gelişmiş bir ipucu olarak Google, web sayfası kaynaklarının indirilme sırasını doğru şekilde sıralamanızı önerir. Aşağıdaki indirme sırası tavsiye edilir:
- Sayfanın üst kısmındaki kahraman görüntüleri
- Ekranın üst kısmındaki diğer resimler
- Ekranın hemen altındaki resimler
Bir web sayfasındaki resimlerin geri kalanı tembel olarak yüklenebilir. Sitenizin görüntüleri verimli bir şekilde yükleyip yüklemediğini tespit etmek için PageSpeed Insights raporuna başvurabilirsiniz. Raporun ekran dışı görüntüleri erteleme bölümünde, diğer görüntülerden sonra yüklenebilecek görüntülerin bir listesini göreceksiniz.
Google’dan 6 Görsel Optimizasyon İpuçları