WebP resim formatı ile WordPress de %40-%50 daha hızlı olun

WebP yeni nesil resim formatı olarak karşımıza çıkıyor ve neden bu formata geçilmesi gerektiğini, ne faydaları olduğunu yazımızda bulabilirsiniz.

WebP resim formatı kayıpsız resim sıkıştırma formatı olarak karşımıza google amcanın desteği ile çıkıyor. Daha doğrusu google tarafından geliştirilen Web’i daha hızlı hale getirmek için yaptığı çalışmalardan sadece bir tanesi. Ancak bu yapı sitemizin hızında ciddi oranda bir fayda sağlamakta, hem dosya boyutu düşmekte, hemde bu sayede sitedeki resimlerin açılış hızı %50 oranında artmaktadır.

WebP formatında resim oluştururken yada dönüştürürken kayıplı şekilde resim boyutunu daha da küçültme özelliği bulunmakta. Aslında çok fazla fark olmadan, kayıplı şekilde daha fazla dosya boyutunu küçülterek yer ve açılış hızı konusunda pozitif geri dönüşler alabilirsiniz.

---

WebP resim türü Neden önemlidir?

Bir ziyaretçi sitenize girdiğinde, sunucunuzda yada hostunuz da bulunan statik dosyaları indirerek görsel anlamda sitelerimizi güzel bir şekilde keşfederler, incelerler. Bu statik dosyalar arasında, css, js, fontlar ve resim formatları bulunmakta, ekstralarda bu listeye eklenebilir. Statik dosyalara baktığımızda bizim için en büyük yükü medya dosyalarının oluşturduğunu görüyoruz. Yani hostumuzda bulunan ve kullanıcıya gösterdiğimiz resim dosyaları. Resim dosyaları yapılarından dolayı boyutları bir hayli büyük olabilen dosyalardır. Kabaca hesaplamak gerekirse yazı üzerine bir sayfanız varsa bu sayfaya ekleyeceğiniz tek resim, sayfa boyutu kadar yer ve zaman kaybettirecektir bize. Bu yazıda birden fazla resim eklediğimizide düşünürsek, her resmin indirilme süresi = < hız düşümü olarak karşımıza çıkar.

---

Resimlerin hızlı yüklenmesi için neler yapılabilir ?

Bir önceki paragraf da resim dosyalarının ağırlığından ve kaybettirdiği zamandan bahsetmiştim. Örnek olması açısından internetden bir film dosyası indirdiğinizde ki ile aynı mantık da çalışmaktadır. Yani bir dosya var ve bu dosyanın indirilip kullanıcıya gösterilmesi gerekmekte. İlk istekden sonra resim dosyalarını ziyaretçinin tarayıcısında cache de bekleterek sonraki girişlerde hız kazandırabiliriz ama bu yinede ilk açılış hızını değiştirmez.

Bununla beraber her giren kullanıcı bu resimleri ayrı ayrı tarayıcı cache bölümüne saklamak zorunda. Eğer devamlı ziyaretçiniz yoksa, google den ihtiyaçları doğrultusunda ziyaretçi alıyorsanız, sitenize giren bir kullanıcının bir daha girmeme ihtimali yüksek olacaktır. Buda sitenizin açılış hızının ne kadar önemli olduğunu göstermektedir. Çünkü bu açılış hızları hem ziyaretçinin dikkatinde olacak, hemde google arama sonuçlarını düzenleyen akıl almaz algoritmaların. Sitenize gelen ziyaretçi sitenizin açılması uzun sürdüğü için çıkıyorsa sonraki aramalarda şansınız çok fazla düşecektir. Bizim başarmak istediğimiz bu ilk açılış hızlarını en kısa olacak şekilde yapılandırmak, hem ziyaretçi gözünde, hemde google amcanın gözünde kalite standardımızı yükseltmek. Şimdi sitemizin ağır yükü olan resim dosyalarının hızlı yüklenmesi için neler yapılır sıralayalım.

Resimleri optimize etmek

Resimleri optimize ederek kayıplı yada kayıpsız sıkıştırma yapabiliriz. WordPress de bununla ilgili bir çok eklenti bulunmakta, bu eklentilerin cdn servis özelliğide bulunabiliyor. Resim formatını değiştirmeden belli bir oranda kalite kaybını göze alarak, resim dosyalarının boyutlarının küçültülmesi sağlanabilir. (Bu optimizasyonla küçültülen resim boyutları webP formatına oranla %40-%60 daha büyük olabilir).

Resimleri WebP formatına dönüştürerek sunmak

Burda bir çelişkide kalabilirsiniz, çünkü bu resim formatını henüz bir çok tarayıcı desteklemiyor ve eski tarayıcı versiyonlarını kullananlarda çalışmıyor. Yani resim yerine bozuk resim dosyaları yada anlamsız karakterler görünebilir. Örnek İnternet Explorer’in eski ve yeni versiyonları dahi bu web resim formatını malesef desteklememekte. Bunun için farklı yöntemler var, örneğin bu formatı destekleyen tarayıcılarda webP formatını, desteklemeyen tarayıcılarda da orjinal resim dosyasını gösterebiliriz. Bunun için anlatacağım eklentinin ayarlarını ve anlatımını aşağıdan yapacağım, siz okumaya devam edin.

CDN servislerinden yardım almak

Resim dosyaları sunucularımız da olacağı için, bir kullanıcı sunucumuz dan ne kadar uzakta bu resim dosyalarını görmeye çalışırsa o kadar yavaş açılacaktır, çünkü yüklenme hızları düşecektir. Cdn servisleri sitenize giren ziyaretçiye en yakın konumda bulunan sunucuya yedeklenen resim dosyalarınızı (statik dosyaların hepsi) ziyaretçiye yönlendirerek resminizin uzaklıktan ve sunucudaki yanlış optimizasyondan doğan yavaşlıkları giderecektir. Bunun ciddi bir faydası olacağından tavsiye ettiğim bir kullanımdır. webP ile beraber cdn servislerinden birinin kullanılması ilkine oranla %60 olumlu geri dönüş sağlayacaktır. Milyonlarca sitenin olduğunu düşünürsek %1 lik bir fayda bile bizi biraz öne çıkaracaktır. Bunu göz önünde bulundurmak gerekir.

CloudFlare kullanmak

Cloudflare çok aşırı gelişmiş bir proxy servisidir. Sitenizin dns ‘lerini cloudflare sunucularına yönlendirerek yapılandırıyorsunuz. Sonrasında sitenizi ziyaret eden herkes öncelikle cloudflare sunucularından geçerek, güvenlik, yer, cache kontrolleri yapılarak kullanıcıya %30-%35 yansıyacak bir hız kazandırmaktadır. Bizim buradaki kullanacağımız kısım cache özelliği olacak. Cloudflare statik dosyalarınızı cache ederek, sonraki isteklerde kendi sunucularından bu dosyaları sunmaktadır. Bunun anlamı resim yada statik dosyalarını cloudflare sunucularında yedeklenerek, ziyaretçiye sunucunuzdan trafik kaybı yaşamadan gösterilmesidir.

Cloudflare ‘nin dünya çapında yüzlerce sunucusu bulunmaktadır. Bunu bir önceki başlığımda anlattığım CDN servislerine benzetebiliriz. Ziyaretçi cloudflare sisteminden istek yaptığında, resim dosyası cachede varsa kendi sunucularında ziyaretçiye en yakın yerden gösterir. Buda resimlerin daha hızlı yüklenmesi demektir. Eğer resim yoksada sunucumuzdan gösterilir ve sonraki kullanımlar için bu resimler cache ‘ye alınarak saklanır. Cloudflarenin sitenizin hızında çok farklı etkileri de bulunmaktadır. Statik dosyaları cache ederek hızlı bir şekilde sunmasının yanında, bir çok alanda sitelerimizin vazgeçilmesi olmaktadır. SSL kullanımı, güvenlik, ddos saldırılarına karşı güvenlik, hız ve cache desteği vs sadece bir kaçı. Cloudflare kullanmanızı yapacaklar listenizin ilk sırasına eklemenizi öneririm. Ücretsiz versiyonu size fazlasıyla yetecektir. CloudFlare sevişini kullanarak yapabilecekleriniz ile ilgili daha önce bir çok içerik yayınladım. Buradaki sayfadan arama sonuçlarındaki cloudflare anlatımlarım’ı inceleyebilirsiniz.

WordPress sitelerde WebP kullanılması

WordPress de olmazsa olmaz eklentiler listemde de yer verdiğim WebP Express eklentisini kullanacağız. Herzaman söylediğim gibi, eklentilerin harika işlevleri olabilir ama bu eklentileri doğru yapılandırmadığınızda sitenize zarar verirsiniz ve sizi zamanda geriye götürüp emeklerinizi kaybettirebilir. Webp Express eklentisi kullanmasanız bile kurup yüklenen resimleri şimdiden webp formatında da yedeklemesini sağlamanızı öneririm. Böylece ilerde bu sisteme geçeceğiniz zaman sunucunuzdaki resimleri dönüştürmek için zaman kaybetmezsiniz. Eklenti içerisinde kendiside dönüştürme yapıyor ancak çok fazla resim varsa sunucunuz kitleniyor malesef denemeyin. Bunun yanında bir ayarı daha var, resmin webP türünde oluşturulmuş görüntüsü yoksa oluşturuyor, sonraki isteklerde oluşturduğu webp dosyasını gösteriyor. Burda kontrol etmek yoksa oluştur seçeneği olduğu için azda olsa zaman kaybedeceğini düşündüğümden ve php kullanacağı için tavsiye etmiyorum, ama başka bir yol yoksa tabiki bu seçeneği kullanmak en mantıklısı olacaktır..

Ben sunucu taraflı dosya dönüştürme kullandım. Böylece binlerce resmi dönüştürmek daha kolay ve hızlı gerçekleşti. (makaleci.com da 500 binden fazla resim olduğunu düşünürsek, sunucu taraflı dönüştürme en mantıklısı olurdu zaten. Farklı resim boyutlarınıda hesaba katmak gerekiyor) Konunun altında sunucu tarafında resimleri WebP formatına dönüştürmeyi anlatacağım ;)

WebP Express eklentisini buradan indirip kuralım ve aktif edelim. sonrasında ayar sayfasına girelim, genelde ayarlar sekmesinin içerisinde yer alıyor ayar kısmı.

Ayar kısmında ihtiyaçlarınıza göre bir çok ayar bulunmakta. Ben kendi cdn servisimi kullandığım için ve sunucu taraflı her resmi önceden webP formatına çevirdiğim için aşağıdaki gibi yaptım. Sonradan yüklenen resimleri otomatik webP formatına çevirmesi için alan bulunmakta onuda aktif ettiğimiz için sonraki yüklemelerde resimlerin otomatik webP türünde kopyasını oluşturacak.

Yukarıdaki ayarlarda göreceğiniz gibi sitenin html sindeki resimlerin üzerine yeni bir kod ekliyor, ve birde js dosyası ekliyor sitenin başına. Bu ayar ziyaretçinin tarayıcısı eğer webP formatını destekliyorsa webP türündeki resimi göstermesini, desteklemiyorsa da orjinal resim dosyasını göstermesini sağlamakta. Yukarıdaki ayarlar eklentiyi kurmadan önceki resimleri webp türüne çevirdiyseniz faydalı olur, çevirmediyseniz aşağıdaki ayar kısmınıda işaretlemeniz gerek, yoksa sorunlar yaşayabilirsiniz. En azından resim için istek yapıldıkça, bu eklenti, orjinal resmin webP versiyonunuda oluşturacaktır sunucuya (her resim icin bir defa yapar).

Centos (linux) sunucularda toplu WebP dönüştürme yapmak

Çok fazla resim varsa ve bu resimlerin ayrı olarak webP formatınıda dönüştürmek istiyorsanız anlatacaklarımı dikkatle dinleyin. Anlatımdaki kurulumu centos a göre yaptım ancak sizde sunucunuzun türüne göre bu iki uygulamayı kurduktan sonra yazdığım dönüştürme konudu kullanarak dönüştürmeyi başlatabilirsiniz. Öncelikle ssh terminaline giriş yaparak aşağıdaki komutu çalıştırın e ihtiyacımız olan uygulamaları kuralım: parallel ve cwebp

yum -y install parallel libwebp-tools

Sonrasında Resim klasörümüze girelim, örnek wordpress in resim klasörüne aşağıdaki şekilde girebilirsiniz:

cd /home/kuazacom/public_html/wp-content/uploads

WordPress in yada wordpress olmak zorunda değil, dönüştürmek istediğiniz resimlerin klasörüne girin ve aşağıdaki kodu çalıştırın, kod betiğini çalıştırdıktan sonra resimlerinizin webp formatında ayrı olarak oluşturulduğunu göreceksiniz. Aşağıdaki kodları satır satır çalıştırın, önceki bittikten sonra diğer satırdakini çalıştırın. Her resim formatını ayrı olarak dönüştüreceğiz.

find . -name "*.jpg" | parallel -eta cwebp -q 85 {} -o {.}.jpg.webp
find . -name "*.jpeg" | parallel -eta cwebp -q 85 {} -o {.}.jpeg.webp
find . -name "*.png" | parallel -eta cwebp -q 85 {} -o {.}.png.webp

Kod içerisinde göreceğiniz “85” rakamı resimleri dönüştürürken belirleyeceğimiz optimizasyon yüzdesidir. Bu rakam ne kadar aşağı düşerse resmin kalitesi o kadar bozulur. İdeali %80-90 arasındadır, farkedilmeyecek bir kalite kaybı olabilir ama zaten bunu farketmek çok zor olacaktır. İsterseniz benim kullandığım gibi çalıştırın, yinede kaliteyi %100 de tutmak isterseniz 85 kısmını 100 yapabilirsiniz.