E-Ticaretinizi Hızlandırmak için 12 Görsel Optimizasyon İpuçları (SEO + Performans)

E-Ticaret siteniz için resimleri neden ve nasıl optimize edeceğinizi bilmek ister misiniz? Görüntü optimizasyonunun nihai amacı, görüntü kalitesinden ödün vermeden en küçük dosya boyutunu oluşturmaktır. Sitenizin performansını etkilemeden yüksek kaliteli resimler göstermek istiyorsunuz.

Araştırmalar, hızlı sayfa hızının Google'da daha iyi bir konuma ve daha yüksek bir dönüşüm oranına yol açacağını sürekli olarak göstermiştir. Sonuç olarak, görsellerinizin optimize edilmesini ve ziyaretçiler için çok büyük olmamasını istiyorsunuz.

Görüntüler bir çevrimiçi mağaza için çok önemlidir; satışlarınızın çoğu ürün resimlerine bağlıdır. Müşteriler, herhangi bir satın alma yapmadan önce her zaman ürünlerin ayrıntılarını (renkler veya malzeme gibi) kontrol etmek isterler.

Biliyor musun? Salsify'a göre, alışveriş yapanların %73'ünün satın alma kararı vermek için en az üç görsel görmesi gerekiyor.

Şimdi, aşağıdaki örneğimize bakarsanız, bir sonraki yaz partiniz için hangi ürünü alırdınız? Cevap A, değil mi?

Görüntüler, dönüşümleri artırmak için olmazsa olmazdır, ancak optimize edilmemiş görüntüler, e-ticaret sitenizin yavaşlamasına neden olur (potansiyel müşterileri mağazanızdan uzaklaştırır). Bu performans sorunlarından kaçınmak için resimleri optimize etmek, çevrimiçi mağazanızın hızını artırmak ve Google'daki sıralamanızı iyileştirmek için en iyi ipuçlarımızı paylaşıyoruz.

E-Ticaret Görsellerinizi Optimize Etmek için 12 SEO ve Performans İpuçları

İşte e-ticaret görsellerinizi optimize etmek, e-ticaret mağazanızı hızlandırmak ve Google'da daha üst sıralarda yer almak için uygulayabileceğiniz 12 SEO ve Performans ipucu:

1. Resimlerinizi Doğru Boyutlandırın
2. Görüntüleri Sıkıştır
3. Doğru Dosya Formatını Seçin
4. Tarayıcı Önbelleğe Alma özelliğini kullanın
5. Görüntüleri Daha Hızlı Görüntülemek ve LCP'nizi Artırmak için Önceden Yükleyin
6. Fetchpriority Özelliğini Kullan
7. Ani Yerleşim Hareketlerinden (CLS) Kaçınmak İçin Genişlik ve Yükseklik Boyut Niteliklerini Dahil Edin
8. Bir Görüntü CDN'si kullanın
9. Tembel Yüklemeyi Etkinleştir
10. Duyarlı Görseller Kullanın
11. Görüntü Dosyası Adlarını Optimize Edin ve SEO Dostu Bir Alt Metin Ekleyin
12. Bir Görsel Site Haritası Oluşturun

E-Ticaret sitenizin SEO'sunu ve performansını artıracak görüntü optimizasyon tekniklerinin her birine dalalım.

1. Resimlerinizi Doğru Boyutlandırın

E-Ticaret görselleri için en iyi boyut, görsel dosyanızın boyutunu 70-80 KB'ın altında tutmaya çalışmaktır. Gerçek boyut, kullandığınız CMS veya e-perakendeciye bağlıdır.

• WooCommerce görüntüleri: 600 x 600 (minimum)

• Amazon görüntüleri : 1000 x 1000 piksel (minimum)
• Shopify görselleri : 800 x 800 piksel (yakınlaştırma işlevini elde etmek için minimum)

2. Görüntüleri Sıkıştır

Görüntüleri sıkıştırmak, kaliteyi kaybetmeden görüntü boyutunu küçültmek anlamına gelir. İki tür sıkıştırma vardır: kayıplı ve kayıpsız.

• Kayıpsız – kalitede hiçbir değişiklik olmaksızın dosya boyutunda küçük bir azalma.
• Kayıplı – dosya boyutunda daha önemli bir azalma ancak kaliteyi etkileyebilir. "Kayıplı" sıkıştırmanın birkaç seviyesi vardır: bazıları insan gözüyle bile görülemez ve bazıları daha agresiftir ve kaliteyi etkiler.

3. Doğru Dosya Formatını Seçin

Google PageSpeed ​​Insights, resimlerinizi optimize etmek için WebP gibi yeni nesil bir format kullanmanızı önerir. Resimlerinizi e-ticaret sitenizde WebP'ye sunarak, aşağıdaki şekilde gösterildiği gibi resim dosyası boyutundan tasarruf edeceksiniz:

4. Tarayıcı Önbelleğini Kullanın

En etkili optimizasyon yöntemlerinden biri görüntü önbelleğe almadır. WP Rocket gibi bir WordPress eklentisi ile, gelecekte daha hızlı ve daha kolay erişim için görüntü dosyalarını bir kullanıcının tarayıcı önbelleğinde veya bir proxy sunucusunda saklayabilirsiniz.

5. Görüntüleri Daha Hızlı Görüntülemek ve LCP'nizi Güçlendirmek için Önceden Yükleyin

Ekranın üst kısmındaki en büyük görüntüyü önceden yüklemek, Önemli Web Verilerinden biri olan En Büyük İçerikli Boyamayı (LCP) geliştirecektir. Nasıl? LCP görüntüsünün önceden yüklenmesi, kahraman resminizi veya web sitesi banner'ınızı sayfa yükleme sırasında çok daha erken görüntüleyebilir ve bu da olumlu bir kullanıcı deneyimi sağlar.

Adından da anlaşılacağı gibi, önceden yükleme, sayfanın bir öğesinin yüklenmesine öncelik vermenizi sağlar. Yine, WP Rocket görüntüleri, yazı tiplerini ve bağlantıları önceden yüklemenize yardımcı olabilir:

İsterseniz, bu önyükleme etiketini resimlerinize manuel olarak da uygulayabilirsiniz:

 <link rel="preload" as="image" href="https://mysite.com/images/myimagename.webp" />

6. Fetchpriority Özelliğini Kullanın

Görüntüleri optimize etmek ve daha iyi bir LCP elde etmek için başka bir ipucu, fetchpriority özniteliğini kullanarak tarayıcıya önce hangi görüntüyü getirmesi gerektiğini söylemektir.

LCP görüntünüz, indirmeye öncelik vermek için fetchpriority=”high” değerine sahip olmalıdır, altbilgi görüntüleri ise hemen gerekmediğinden fetchpriority=”low” olacaktır. Google kendi dövüş arama motorunu araştırdı ve ekranın üst kısmındaki içeriğin %99'unun öncelikli ipuçları sayesinde 2 saniyeden kısa sürede görüntülendiğini buldu:

7. Ani Yerleşim Hareketlerinden (CLS) Kaçınmak için Genişlik ve Yükseklik Boyut Niteliklerini Dahil Edin

PageSpeed ​​Insights, bazı içeriklerin aniden hareket ettiğini tespit ederse, bu, kullanıcı deneyimini ve bir web sitesinin genel hızını etkiler. Kümülatif Düzen Kayması (CLS), yükleme süresi sırasında herhangi bir ani düzen değişikliği olup olmadığını ölçen başka bir Önemli Web Verisidir. Resimlerinize yükseklik ve genişlik özelliklerini ekleyerek resim alanını ayırırsanız, Google Page Insights size iyi bir CLS notu verecektir.

Görüntü genişliği ve yüksekliği belirtilmemiş : Görüntü yüklendikten sonra ani düzen kayması = Kötü CLS	Genişlik ve Yükseklik belirtilir: Düzen kaydırma yok = İyi CLS

8. Bir Görüntü CDN'si kullanın

Görüntü CDN'leri (içerik dağıtım ağları), görüntü optimizasyonu için piyasada bulunan en iyi araçlar arasındadır. web.dev'e göre, bir görüntü dosyası boyutunda %40-80 oranında tasarruf bile sağlayabilir. ​​Bir CDN'den yüklenen tüm görüntüler, yalnızca hangi görüntünün yükleneceğini değil, aynı zamanda boyut, biçim ve kalite gibi parametreleri de belirten görüntü URL'si aracılığıyla sunulacaktır. Bu, farklı senaryolar için bir görüntünün varyasyonlarını oluşturmak için kullanışlıdır:

Sıfırdan bir CDN kurmak bunaltıcı gelebilir. Otomatik kurulumu tercih ediyorsanız RocketCDN'yi deneyebilirsiniz.

9. Tembel Yüklemeyi Etkinleştir

Tembel yükleme, bir çevrimiçi mağazanın resimlerini optimize etmek için başka bir stratejidir. Kaynakları engellenmeyen olarak tanımlamayı ve bunları yalnızca gerektiğinde yüklemeyi amaçlar. Kısacası, yalnızca ziyaretçiniz o içeriğe kaydırdığında görüntüleri yükler.

Tembel yükleme komut dosyasını manuel olarak uygulama konusunda kendinizi rahat hissetmiyorsanız, size yardımcı olması için WP Rocket gibi bir eklenti kullanabilirsiniz.

10. Duyarlı Görseller Kullanın

Görsellerinizi mobil cihazlar için optimize etmek, mağazanızın kullanıcı deneyimini ve yükleme hızını artırmanın başka bir yoludur. Duyarlı görüntüler, kullanıcının kullandığı cihaza göre doğru görüntüyü yüklemek için kullanılan bir dizi tekniktir: masaüstü, tablet veya mobil. Cihaz çözünürlüğüne, yönüne, ekran boyutuna, sayfa düzenine ve ağ bağlantısına göre hesaplanır.

srcset ve boyutları özellikleri, resimlerinizi duyarlı hale getirmenize ve daha iyi performans ve harika bir kullanıcı deneyimi elde etmenize yardımcı olabilir. Şu şekilde çalışır:

• srcset = kaynak dosyaların gerçek genişliğini tanımlar
• size = tarayıcıya görüntünün ekranda ne kadar geniş gösterileceğini söyler.

Dev.to, her ikisinin de duyarlı resimleriniz için nasıl kullanılacağı hakkında mükemmel bir ayrıntılı makale yazdı. Kılavuzun tamamını okumanızı öneririz.

11. Görüntü Dosya Adlarını Optimize Edin ve SEO Dostu Bir Alt Metin Ekleyin

Görüntü optimizasyonu, dosyanın kalitesinde durmaz. Ayrıca dosyaya ve alt metne verilen ada da genişler. Resminiz için her zaman net bir alt metin ile alakalı ve belirli bir ad seçin. Görselin ne hakkında olduğunu açıklayarak görsellerinizin Google'da sıralamasına yardımcı olacaktır.

12. Bir Görsel Site Haritası Oluşturun

Bir site haritasına resim eklemek, Google'ın başka türlü bulunamayacak (JavaScript yüklü resimler gibi) resimleri keşfetmesine yardımcı olur. Çevrimiçi mağazanıza biraz SEO desteği verir. Resimlerinizi bulmak için Google'ın ihtiyaç duyduğu site haritası etiketleri şunlardır:

Artık çevrimiçi mağazanızı hızlandırmak için en iyi optimizasyon ipuçlarımızı bildiğinize göre, bunları uygulamanıza yardımcı olabilecek bazı araçlar var. Örneğin, optimizasyon noktalarının çoğunu birkaç tıklamayla ele almak için Imagify eklentisini kullanabilirsiniz. Her birinin üzerinden geçelim.

Imagify ile e-Ticaret Görsellerini Optimize Etme

Imagify eklentisi, çevrimiçi mağazanızı hızlandırmak için önceki bölümde verdiğimiz optimizasyon ipuçlarının çoğunu çözmenize yardımcı olabilir. Ücretsiz eklentiyi WordPress'e yükledikten sonra, sitenizi hızlandırmanıza ve Google'da görünürlüğü artırmanıza yardımcı olan çeşitli özelliklerin kilidini açacaksınız. Imagify'ın en iyi özelliklerini inceleyelim!

Imagify sayesinde görüntüleri aşağıdaki şekillerde optimize edebilirsiniz:

• Üç sıkıştırma seviyesi kullanarak resimlerinizi sıkıştırın ve optimize edin: normal, agresif ve ultra. Resminizin kalitesi hemen hemen aynı kalacak, ancak dosya boyutunuz çok daha hafif olacaktır.

• Aynı anda birden fazla görüntüyü sıkıştırın ve yeniden boyutlandırın:

• WordPress kitaplığından optimizasyon – ayrıca, aşağıdaki örneğimizde olduğu gibi, seçilen görseller üzerinde optimizasyon gerçekleştirebilirsiniz. Imagify, dosya boyutumun %94'ünü kurtardı!

• Resimlerinizi tek bir tıklamayla WebP'ye dönüştürün:

• En büyük resimlerinizi otomatik olarak yeniden boyutlandırın:

Son olarak, Imagify resimlerinizi, "görüntüleri yeni nesil biçimlerde sunun" (WebP dönüştürme özelliği sayesinde), "görüntüleri verimli bir şekilde kodlayın" ve "görüntüleri uygun şekilde boyutlandırın" gibi PageSpeed ​​Insights'taki Google önerilerini ele alacak şekilde optimize eder.

Imagify olmadan PSI sorunları	Imagify ile denetimden geçti

Son olarak, Imagify'ın fiyatlandırması basittir: Her ay 200 MB ücretsiz veri alırsınız ve sınırsız kaynağa ihtiyacınız varsa, sadece 9,99 USD!

Toplama

Görseller, ürününüzün algılanmasını ve satışını büyük ölçüde etkiler. Bunları Imagify gibi bir eklentiyle optimize etmek, çevrimiçi mağaza performansınızı artıracak ve arama motoru optimizasyonu (SEO) sıralamalarınızı yükseltecektir. Sonuçlar önemli ölçüde yük tasarrufu, iyileştirilmiş bir kullanıcı deneyimi ve Google'da daha iyi bir konumdur. Imagify'ı ücretsiz deneyin ve çevrimiçi mağazanızın resim sıkıştırmasının nasıl gittiğini bize bildirin!