Görsel Optimizasyonu: Blogunuz İçin Görseller Nasıl Optimize Edilir?

Google yavaş bir web sitesinden nefret eder ve hızlı olanları sever.

Bu böyle devam edecek çünkü giderek daha fazla insan içeriklerine genellikle daha yavaş bağlantı hızlarına sahip olduğunuz mobil cihazlarda göz atıyor.

Web sayfalarınızın performansını izliyor musunuz? Resimlerinizi optimize etmek için herhangi bir şey yapıyor musunuz? Çünkü bu, web siteniz için indirme süresinin önemli bir bölümünü oluşturacaktır.

Blogumuza genellikle çok sayıda resim ekleriz ve bu, sayfa indirme süresini artırabilir. Bu, görüntü optimizasyonunun bizim için önemli olduğu ve sizin için de önemli olduğu anlamına gelir!

En Yavaş Sayfalarınızı Belirleyin

Google Analytics'te Davranış -> Site Hızı -> Sayfa Zamanlamaları bölümünün altında, web sitenizdeki tüm sayfalar için ortalama sayfa indirme hızını ve her sayfanın varyasyonunu görebilirsiniz.

Yani örneğin aşağıdaki örnekte ilk sayfa (ana sayfa) ortalamadan %53,30 daha az, bu iyi. Ancak 'Facebook Organik Erişim' gönderisinin sayfasına bakın: Bu, ortalamanın %68,93 üzerinde. Bu araştırmaya değer bir şey olabilir.

Bu raporla ilgili gerçekten önemli olan şey, sonuçları en çok görüntülenen sayfalara göre otomatik olarak ilk önce göstermesidir. Bu harika, çünkü en çok sayfa görüntülemeye sahip olanlar, ilk önce üzerinde çalışmanız gerekenlerdir.

Sonuçlarınızın ilk birkaç sayfasında gezinin ve en kötü performans gösteren ilk beş sayfayla başlayın. Bu sayfalarda resimleriniz varsa, indirme süresini azaltmak için resim boyutunu küçültmeyi deneyin.

Web Sitesi Resimlerini Optimize Etme

Artık düşük performans gösteren sayfalarla ilgili bazı sorunları belirlemeye başladığınıza göre, sorunu çözmek için çalışmak isteyeceksiniz. Ana sayfanızın boyutu ne olursa olsun, web sitenizde en çok ziyaret edilen sayfa olması muhtemel olduğundan, her zaman optimizasyon için yer vardır.

Üzerinde çalışmak istediğiniz sayfayı seçtiğinizde, hangi resimlerin indirilmesinin yavaş olduğunu bulmak için daha fazla analiz yapmak isteyeceksiniz. Bu, gönderiye özel resimler olabilir, ancak kenar çubuğundaki resimler, afiş vb. gibi her bir sayfaya yüklenen resimler de olabilir.

Seçtiğim ilk sayfalardan biri, ortalamanın %86 üzerinde yükleme süresi olan SEO rakip analizi yazımızdı. Böylece, bu sayfa adını Web Sayfası Hız Testi Aracına girdik ve hangi resimlerin indirilmesinin en çok zaman aldığını analiz etmeye başladık.

Soruna neden olan belirli bir resim olduğunu görürseniz, resmi sıkıştırmanız, daha küçük bir resim yüklemeniz vb. gerekebilir.

En yavaş sayfaları belirledikten ve sorunlara neden olan görüntüleri bulmaya başladıktan sonra, sorunu çözmenin zamanı geldi. Performansı iyileştirmenin bazı yolları şunlardır:

1. Bir CDN uygulayın

Dünya çapında kullanılabilen bir çevrimiçi işletmeniz varsa, gerçekten bir içerik dağıtım ağına (CDN) abone olmanız gerekir. İrlanda'daysam ve sitem İrlanda'da barındırılıyorsa, hız iyi olacaktır. Ancak ABD'de birisi bu içeriğe erişiyorsa, hız onlar için daha yavaş olacaktır.

Ancak bir CDN'niz varsa, içerik dünya çapındaki birçok barındırma merkezi aracılığıyla kullanıma sunulacaktır. ABD'den bir talep gelirse, İrlanda'ya kadar gitmeyecek çünkü bu hiç mantıklı değil! Muhtemelen ABD olacak en yakın barındırma merkezine gidecek.

Bu, sitenizi genel olarak daha hızlı hale getirecektir. Sitemizde CDN için MaxCDN kullanıyoruz.

2. Resimlerinizi Küçültün

Bu bariz bir şey gibi görünüyor, ancak çoğu zaman gözden kaçıyor. Ekran görüntüsü aldığınızda, görüntü boyutunu %10 – 20 veya daha fazla küçültebilirsiniz ve yine de çok görünür olabilir.

Canva'da bir resim oluşturdum. Resmin boyutları 800×800 ve dosyanın boyutu 1.7 MB idi. Bunu WordPress'e eklersem seçeneklerim:

• Tam boyut – 800×800 ve boyut 1.7 MB
• Orta – 300 x 125 ve boyutu 1,7 MB
• Tam – 560 x 235 ve boyutu 1,7 MB
• Küçük resim – 150 x 150 ve boyutu 1,7 MB
• Widget afişi – 135 x 135 ve boyutu 1,7 MB'dir.

Gördüğünüz gibi, WordPress'te hangi boyutta gösterirsem göstereyim, görüntü boyutu aynı kalıyor. Daha küçük bir boyut kullanmaya ve yine de daha büyük dosyayı yüklemeye karar verirsem, bunun avantajı, kullanıcıların daha büyük resmi görmek için üzerine tıklayabilmeleridir. Ancak yapmak istediğiniz bu değilse, yüklemeden önce resim boyutunu küçültün!

Bir fotoğraf düzenleyici kullanmanız ve boyutunu içerik yönetim sisteminizde görüntülemek istediğiniz boyutlara küçültmeniz gerekir.

3. Bazı görüntüleri çıkarın

İncelemeden sonra çok fazla resminiz olduğunu fark edebilir ve alakalı olmayan resimleri kaldırabilirsiniz. İçeriğinize değer katacak resimler ekleyin, ancak bunu fazla yapmayın.

4. Görüntüleri Kırp

Görüntüleri kırpmak, ilgili olmayanları kenarlardan kesmek anlamına gelir. Ekranın yalnızca bir bölümünün gerçekten gerekli olduğu durumlarda tam ekran görüntüsü almış olabilirsiniz. Geri dönüp gerekli olmayan parçaları kesebilirsiniz.

Resimlerimizi kırpmak için genellikle Snagit kullanıyoruz, ancak birçok araç mevcut.

5. Önbelleğe Alma Uygulaması

Önbellek, bellekte sık sık değişmeyen bilgileri depolar. Bir blog gönderisi oluşturursanız, son erişimden bu yana herhangi bir değişiklik olmadıysa gönderiyi her zaman diskten almak mantıklı değildir.

Birçok önbelleğe alma programı da aşamalı oluşturmayı destekler. Bu nedenle, ekranınızda bir görüntü görüntülendiğinde, başlangıçta biraz bulanıktır, ancak daha sonra bir saniye ya da daha sonra daha iyi görünür. Bir web sitesi ziyaretçisi için bu iyidir, çünkü görüntü, oluşturulmadan daha hızlı görüntülenir.

6. Doğru Görüntü Formatıyla Kaydedin

Yanlış görüntü biçimini kullanırsanız, görüntü dosyası olması gerekenden çok daha büyük olabilir. Örneğin, dosya boyutları genellikle çok büyük olduğu için asla .bmp biçimini kullanmam. En güvenli bahis, .JPG veya .PNG formatlarına bağlı kalmaktır.

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

Resimlerinizin boyutunu sıkıştırmanıza yardımcı olacak çeşitli araçlar mevcuttur. Örneğin, TinyPNG, kaliteden ödün vermeden png dosyalarınızın boyutunu küçültür ve JPEGmini, bir Jpeg dosyasının boyutunu küçültmek için kullanılabilir. Jpegmini ile 146kb'lık bir jpeg görüntüsünü küçültmeyi denedim: 110k'ya düşürüldü ve kalite hala mükemmeldi.

Özet

Web sitenizin hızı son derece önemlidir ve görseller gecikmelere neden olabilecek şeylerden biridir. İhtiyacınız olmadığında neden bu ekstra gecikmeyi web sitenize ekleyesiniz?

Görüntü optimizasyonu için hangi araçları kullanıyorsunuz? Yukarıdakilerden herhangi birini kullanır mısınız? senden haber almak isterim

Shutterstock tarafından bilgisayar resmi