WordPress'te Resim Optimizasyonu

Başlatan ali, Haz 10, 2019, 12:06 öö

« önceki - sonraki »
WordPress sitenizde birçok tam boyutlu görüntü mü kullanıyorsunuz? Bunun sayfalarınızın yavaş yüklenmesine neden olduğuna dikkat edin. Yavaş bir web sitesi SEO'nuzu etkiler, hemen çıkma oranlarını artırır ve izleyicilerinizi uzak tutar. Bu makale, daha iyi yükleme süreleri elde etmek için sitenizdeki tüm görüntüleri (elle veya otomatik pilotta) nasıl kolayca optimize edebileceğinizi öğrenmenize yardımcı olacaktır.

Yavaş bir web sitesi herkesin endişesidir.
Sadece ziyaretçileri etkileyen değil, aynı zamanda SEO'nuzu da etkiliyor. Bu yüzden 'formda' kalmaya çalışmak, bir işletmeyi veya hatta kişisel bir siteyi yönettiğinizde kesinlikle işaretleyebileceğiniz ana öğelerden biri.

Her biri diğerini tamamlayan WordPress sitenizi hızlandırmanın birçok yolu vardır. Evrensel bir yöntem yok. Sitenizin hızını artırmak aslında bu yöntemlerin bir araya gelmesinin toplamıdır. Bunlardan biri, bu gönderide yoğun şekilde ele alacağımız resim optimizasyonu.

Bu nedenle, WordPress sitenizdeki tüm resimleri manuel olarak ve otomatik olarak nasıl optimize edeceğinizi öğrenmek için daha fazla bilgi edinin. Bu, sitenizi daha hafif ve daha hızlı hale getirecek resim optimizasyonu hakkında adım adım bir rehberdir.

Görüntü Optimizasyonunun Önemi

Snipcart'a göre , resimlerin WordPress sitenizi etkilemesinin üç ana nedeni:

  • Çok büyük resim dosyaları.
  • Elementlerin senkronize yüklenmesi.
  • Çok fazla resim ve HTTP isteği var.

Alıntıbaşlamadan önce kendinize şu soruyu soruyor olabilirsiniz: "Resimlerin şu anda sayfamın yüklenme süresini yavaşlattığını nasıl bilebilirim?" Google'ın PageSpeed ​​Insights , sayfalarınızın hızını doğrulamak ve sıkıntılı unsurlar bulmak için harika bir araçtır. Resimlerinizin optimizasyona ihtiyaç duyup duymadığını onaylamak için sitenizle birlikte çalıştırmalısınız.

1. Çok büyük resim dosyalarının yüklenmesi uzun sürebilir
Büyük boyutlu görüntüler, yüksek çözünürlüklü görüntüler ve sıkıştırılmamış görüntüler sayfa yükleme hızını büyük ölçüde azaltabilir.

Bu nasıl düzeltilir?
→ Ekran boyutu

Masaüstü, dizüstü bilgisayar, tablet, akıllı telefon gibi farklı son kullanıcı cihazlarında görüntü gösterimi için en uygun genişliğe ve yüksekliğe karar verin.

Büyük bir görüntü kullanmayın ve ekran boyutunu IMG öğesinin genişlik ve yükseklik özelliklerine sahip ölçeklendirin. Bunun yerine, farklı boyuttaki dosyaları oluşturun ve saklayın.

Kullanıcı cihazına bağlı olarak uygun boyutta görüntü dosyasını sunmak için koşullu mantık kullanın.

→ Çözünürlük

Standart bir 15 "dizüstü bilgisayar ekranı yaklaşık 100 PPI (İnç Piksel) veya DPI (İnç Başına Nokta) değerinde bir ekran özelliğine sahiptir. 300 DPI çözünürlükte görüntüler sunmanın anlamı yok.

Web sayfalarında görüntü gösterimi için standart çözünürlük 72 ÜFE'dir. Ekranlar için değil baskı için 300 DPI gereklidir. Neredeyse tüm ekranlar 72 PPI ile 100 PPI arasında değişmektedir.

→ Görüntü işleme

JPEG, GIF ve PNG, görüntüleri daha az bayt almak için sıkıştırabilen ve böylece indirilecek dosyanın boyutunu azaltan standart dosya formatlarıdır. Ancak, bu üç dosya tipi, görüntülerle birlikte depolanan gereksiz veri yükünü meta veri biçiminde azaltarak daha da optimize edilebilir.

Bunun dışında görsel detaylardan kurtulmadan görüntünün boyutunu küçültmek için görüntü işleme tekniklerini kullanabilirsiniz (daha fazla bilgi için bu wiki sayfasına bakınız ).

Bu, statik görüntüler için GIMP veya Adobe Photoshop gibi uygulamalarda veya dinamik görüntüler için bir bulut görüntü çözümü kullanarak yapılabilir.

2. HTML, CSS, JavaScript ve Görseller'i senkronize olarak yükleme
Web sayfanız tüm HTML, CSS, JavaScript ve resimleri eşzamanlı olarak yüklediğinde, ilk oluşturma süresi çok yüksek olabilir.

Görüntüler oluşturma süresinin önemli bir kısmını alabilir.

Bu nasıl düzeltilir?
Yükleme görüntüleri erteler. Bunun yerine, gerekli CSS ve HTML oluşturulduktan sonra bunları zaman uyumsuz olarak yükleyin. Görüntüler katın altına yerleştirilebilir ve ziyaretçi sayfanın ilgili bölümüne kaydırıldığında JavaScript kullanılarak koşullu olarak yüklenebilir.

Bu, ilk sayfa yüklemesi sırasında HTTP isteklerinin sayısını da azaltır.

3. Çok fazla resim ve HTTP isteği
Web sayfasında referans verilen her görüntü dosyasının sunucuya bir bağlantıya ihtiyacı var.

Web sayfasındaki çok fazla resim yalnızca yükleme boyutunu artırmakla kalmaz, aynı zamanda izin verilen HTTP isteklerinden daha fazlasını göndererek sunucuya bağlantıyı boğabilir.

Bu nasıl düzeltilir?
→ Görüntü sayısını azaltın

Görüntüleri az miktarda kullanın. Numarayı beşten az tut.

→ CDN kullanın

Bir CDN (İçerik Dağıtım Ağı), dosyalarınızı dünya çapında dağıtılan sunuculara yerleştirmenize izin verir. Web sayfanızdaki görüntü dosyası istekleri dış sunuculara gider ve sunucunuz yalnızca temel HTML dosyasına hizmet verebilir.

→ Yükseltme sunucusu

Paylaşılan barındırma, sunucuyu paylaşan her web sitesine sınırlı kaynaklar sağlar. En önemli sınırlama, her site için izin verilen eşzamanlı bağlantı sayısıdır, genellikle ondan azdır.

Bu, yalnızca yapabileceğiniz dosya isteklerinin sayısını azaltmakla kalmaz, aynı zamanda web sitenizi görüntüleyebilen eşzamanlı ziyaretçi sayısını da sınırlar.

Bir VPS'ye (Sanal Özel Sunucu) yükseltme, bu sınırlamanın bir dereceye kadar üstesinden gelmenize yardımcı olabilir. DigitalOcean, UpCloud, Linode, Vultr gibi çeşitli satıcılar ayda 5 dolardan az bir fiyata temel VPS sağlıyor.

Görüntü sayısını azaltamıyor musunuz?
Web sitenizdeki resim sayısı azaltılamazsa ne yapmalı?

Sayfa içeriğiniz ağırlıklı olarak belirli bir resimden ibaret değilse, küçük resim görüntüsünü içeriğe satırla yerleştirmek ve onu orijinal görüntüye bağlamak akıllıca olur.

Ayrıca düşük genişlikte, düşük kaliteli bir görüntü kullanmayı veya içeriğin izin vermesi durumunda yalnızca bir yer tutucu kullanmayı deneyebilirsiniz. Ziyaretçiler talep üzerine gerçek, büyük resmi görebilirler.

Talep, bir dokunuşla veya bir tıklamayla, hatta bazı JavaScript özelliklerine sahip bir fareyle çalışmak üzere programlanabilir. Böylece görüntü sayısını azaltamasanız da, en azından indirilen bayt sayısını azaltabilirsiniz.

4. Hala bir şey yanlış gibi görünüyor
Yukarıda tartışılan tüm optimizasyonları yaptıktan sonra sayfanız PageSpeed ​​Insights ile uyumlu değilse, yapabileceğiniz başka bir şey var mı?

1 Doğru görüntü formatını kullanın: PNG görüntülerinin kayıpsız sıkıştırması yerine, fotoğraflar için kayıpsız sıkıştırmanın bozulmasının uygun olduğu JPEG görüntüsünü kullanın. JPEG, PNG ve GIF arasındaki farkı tanımlayan Gizmodo'daki bu makaleye göz atın .

2 Daha yeni resim formatı kullanın : Google, JPEG'den % 25 ila% 34 daha küçük resim dosyaları üreten yeni bir resim formatı olan WebP'yi tanıttı . Yani WebP formatını kullanmak daha iyi olurdu.

3 CSS3 yöntemlerini kullanın: CSS3 yöntemlerini kullanarak, görüntüleri görsel olarak çekici efektler yaratan degradelerle ve gölgelerle değiştirmek mümkündür.

AlıntıEditörün notu: SEO için buradaysanız, hızın arama motoru sıralamalarını etkileyen birçok faktörden yalnızca biri olduğunu unutmayın. Burada ve burada diğer teknik SEO sorunlarını ele alıyoruz .