Google’dan 6 Görsel Optimizasyon İpuçları


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.

CLS, nasıl ölçüleceği ve nasıl düzeltileceği hakkında daha fazla bilgi için kapsamlı kılavuzumuza bakın:

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ış boyutlandırılmış görüntüleri algılamanın kolay bir yolu, uygun boyutta resimler bölümündeki Fırsatlar bölümünde PageSpeed ​​Insights raporu.

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ı saptamak için şuna bakın: görüntüleri yeni nesil formatlarda sunun PageSpeed ​​Insights raporunun bölümü. 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.

bu Görüntüleri Verimli Bir Şekilde Kodlayın PageSpeed ​​Insights raporunun 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.

bu verimli bir önbellek politikasıyla statik varlıklara hizmet edin bölüm, ö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. İçinde ekran dışı görüntüleri erteleme raporun bölümünde, diğer resimlerden sonra yüklenebilecek resimlerin bir listesini göreceksiniz.

Yukarıdaki ipuçlarından herhangi biri hakkında daha fazla ayrıntı için, aşağıdaki Google’dan tam videoya bakın:


Öne Çıkan Görsel: Tada Görselleri/Shutterstock

Yoruma kapalı.