Yakın zamanda web sitenizin hızını “Google Pagespeed Insights” aracnda test ettiyseniz, “görüntüleri WebP formatı gibi yeni nesil biçimlerde yayınlayın” önerisini görmüş olmalısınız. Yeni nesil görüntü formatları, web sitelerinin daha hızlı yüklenmesini sağlayan, modern tarayıcılarda gömülü sıkıştırma bilgilerini kullanabilen resim formatlarıdır.
WordPress kulananlar web sitelerini yeni nesil resim formatları kullanarak nasıl daha hızlı hale getirebilirler?
JPEG 2000, JPEG XR ve WebP gibi görüntü formatları genellikle PNG veya JPEG’den daha iyi sıkıştırmakta, daha hızlı indirme ve daha az veri tüketimi sağlamaktadır. Sitenizde WordPress içerik yönetim sistemi kullanıyorsanız, muhtemelen resimleriniz JPEG, GIF ve PNG olarak kaydedilmiştir. Resimlerinizi yeni nesil formatlarda yayınlamak için daha önce yüklediklerinizin değişmesi gerekmemekle birlikte, bazı tarayıcılar halen WebP gibi yeni nesil biçimleri düzgün şekilde yükleyemediğinden, eski ve yeni formatları aynı anda sunmak daha verimli olacaktır.
WebP Formatı nı Destekleyen Tarayıcılar
- WebP Kayıplı Sıkıştırma Desteği
- Google Chrome (desktop) 17+
- Google Chrome for Android version 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 11.10+
- Native web browser, Android 4.0+ (ICS)
- WebP kayıplı, kayıpsız & alpha desteği
- Google Chrome (desktop) 23+
- Google Chrome for Android version 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 12.10+
- Native web browser, Android 4.2+ (JB-MR1)
- Pale Moon 26+
- WebP Animasyonu desteği
- Google Chrome (desktop and Android) 32+
- Microsoft Edge 18+
- Firefox 65+
- Opera 19+
Kaynak: https://developers.google.com/speed/webp/faq
Görsellerinizi yeni nesil biçimlerde yayınlamak çok zorunlu bir işlem değildir, yine de performansı hissedilir derecede etkiliyor. İyi haber şu ki, kodlama gerekmeden yapabilirsiniz ve mevcut görüntüleri silmeniz gerekmez. İşinizi kolaylaştıracak eklentiler mevcut. Sadece bir eklenti indirerek yapılamayacağını iddia edenler var, ancak bu tam olarak doğru değil. WebP Express ve ShortPixel Eklentilerini birlikte kullanarak yapabilirsiniz, ben kendi yöntemimi anlatacağım. Ancak başta söylemeliyim, WebPye dönüştürme kullandığım eklentinin (Webcraftic Clearfy 19 USD) ücretli sürümüne ait bir özelliktir.
Clearfy WordPress’i sadeleştirerek hızlandırmayı hedeflemiş ve bunu hemen hemen başarmış bir eklentidir. Image Optimizer özelliğine ek olarak, ücretli sürümünde görselleri WebP biçimine dönüştürebilirsiniz. Gayet basittir ancak kullandığınız diğer eklentiler ve sunucu özelliklerinize göre seçmeniz gereken birkaç özelliği var.
WebP Formatı Nedir ve WebP Görselleri WordPress’i Nasıl Hızlandırabilir?
WebP, Google tarafından geliştirilmiş modern bir görüntü formatıdır. Çevrimiçi görsel yayınlamak için idealdir; seçime göre kayıpsız ve kayıplı sıkıştırma sağlar.
Google’a göre, WebP formatı kayıpsız görüntüler PNG’lerden %26 daha az yer kaplar. WebP kayıplı görüntülerin boyutu, aynı SSIM kalite endeksine sahip JPEG’lerden %25 ila %34 daha küçüktür. Kayıpsız WebP biçiminde saydamlık özelliği (alfa kanalı) dosya boyutunu %22 artırır. Kayıplı sıkıştırılmış WebP saydamlığı destekler ve kayıplı sıkıştırılmış bir PNG’ye kıyasla 3 kat daha küçük dosya boyutu sağlar.
Resimlerin WebP Sürümlerini Oluşturma
Clearfy eklentisi ile gelen Robin Image Optimizer 1.3.5 sürümünden itibaren JPG ve PNG resimleri WebP’ye dönüştürme özelliği sunmaya başladı. JPG ve PNG görüntülerini optimize ettiğinizde eklenti bunların ilave WebP kopyalarını yaratır. Bu şekilde, desteklenen tarayıcılarda WebP görüntüleri kullanabilir ve desteklenmeyenlerde otomatik olarak JPG ve PNG kopyalarını gösterebilirsiniz.
Robin Image Optimizer’i ayrı indirebilir ya da Clearfy eklentisi içinden kurabilirsiniz. Premium versiyonunu aktifleştirin ve ayarlar sayfasına gidin. Görüntüleri WebP’ye dönüştürme seçeneğini bulun ve özelliği açın. Eklenti resimlerinizin WebP kopyalarını oluşturacaktır.
Eklentiyi daha önceden kullandıysanız ve tüm görselleri zaten optimize ettiyseniz WebP dönüşümü için yedek kopyayı geri yükleyin ve optimizasyonu tekrarlayın.
WebP dağıtım modları
WebP dönüşümü için bu aşamada hangi seçeneği kullanmanız gerektiğine karar vermeniz gerekiyor. Her seçeneğin dezavantajları vardır.
Yönlendirme (htaccess üzerinden) – Bu seçenek, ziyaretçinin tarayıcısı destekliyorsa JPG ve PNG resimlerden WebP kopyalarına yönlendirmeler oluşturur. Eklenti, htaccess dosyasına yönlendirme kuralları yazar ve yeni bir MIME türü ekler. En uygun seçenektir, ancak birkaç dezavantajı vardır. Bu seçeneği yalnızca Apache sunucularında kullanabilirsiniz. Nginx ve ISS sunucularında çalışmaz. Ben bu seçeneği kullandım, Page Speed üzerinde performansı olumlu etkiledi ancak sayfa ilk açılırken 1 saniyelik bir takılma oluyordu.
Webp’i srcset’e ekleyerek, görsel etiketlerini değiştirme – Eklenti, her resmin html etiketini dinamik olarak değiştirerek WebP sürümünü ekler. Bu şekilde tarayıcı en uygun resim formatını seçebilir. Ancak, tüm tarayıcılar WebP’nin kullandığı “srcset” etiketini desteklemez. Böyle bir durumda etiket desteğini eski tarayıcılara ekleyen picturefill.js kütüphanesini kullanabilirsiniz. Bu seçenek, önbellekleme eklentileri ve sunucu önbelleği ile sorunsuz çalışır. Yine de bir dezavantajı var. Temanızda kullanılan stiller etiket konumunuza bağlı olduğundan sayfa görünümüyle ilgili bazı sorunlar yaşayabilirsiniz.
Resim URL’lerinin değiştirilmesi – Kullanıcının tarayıcısı WebP’yi destekliyorsa, eklenti JPG ve PNG resimlerin URL’lerini WebP formatı ile değiştirecektir. Bu seçeneğin sıkıntılı bir tarafı var, önbellekleme ile çalışmaz. Çünkü bazı önbellek eklentileri, farklı tarayıcı desteği için her sayfanın iki kopyasını oluşturur. Önbellek eklentiniz WebP görüntülerini destekliyorsa bu çözümü kullanabilirsiniz.
No Delivery – Bu seçenek ile WebP görüntülerini ön yüzde göstermeyi ve Jpeg / Png biçimleriyle değiştirmeyi devre dışı bırakabilirsiniz. Tam görüntü optimizasyonu için bu seçeneği kullanabilir veya WebP resimlerini ön yüze iletmek için özel bir yol seçebilirsiniz.
