WebP Dosyalarını WordPress’te Kullanma ve Sayfa Yükleme Sürelerini Azaltma

webp dosyaları wordpress

Çoğumuz, WordPress web sitenizin toplam yükleme sürelerinde büyük bir rol oynadığı için görüntü optimizasyonunun çok önemli olduğunu biliyoruz. Bugün, Google’ın WebP dosyalarını WordPress sitenize nasıl entegre edeceğiniz konusunda sizinle kolay bir alternatif paylaşmak istiyoruz. Bazı kullanıcılar% 70’in üzerinde resim dosyası boyutu küçültme gördü!


WebP nedir?

Eğer aşina değilseniz WebP, daha küçük ve daha hızlı resimler oluşturmak amacıyla Google’da web performansı ekibi tarafından oluşturulan bir resim dosyası biçimidir. İlk kez 2010 yılında duyuruldu ve hem kayıplı hem de kayıpsız sıkıştırma yöntemlerini içeriyor. Görüntüler, kullandığı MIME türüne göre bir web sunucusundan web tarayıcısına gönderilir. image / webp.

WebP kayıpsız görüntüler % 26 daha küçük PNG ve WebP kayıplı görüntülere kıyasla boyut olarak % 25-34 daha küçük JPEG’lerden daha.

YouTube ve eBay gibi şirketler, sitelerinin çoğuna sessizce güç vermek için zaten WebP kullanıyor. Aşağıda, eBay’den bir örnek verilmiştir; ana sayfalarında yaklaşık 30 WebP dosyası ortalaması vardır.

webp kullanımı ebay

WebP neden bu kadar önemli? Göre httparchive, Ağustos 2016 itibariyle, resimler ortalama bir web sayfasının ağırlığının% 64’ünden fazlasını oluşturur. Genellikle CSS, JS ve HTML birleştirmenizden daha fazlasıdır. Bu nedenle, güçlü bir görüntü optimizasyon yöntemi ve WebP gibi görüntü formatı seçmek çok önemlidir, böylece sayfa ağırlığınızı mümkün olduğunca azaltabilirsiniz. Genel olarak, sayfanız ne kadar küçükse o kadar hızlı yüklenir. Ve bu sadece ziyaretçilerinizi değil, Google’ı da memnun edecektir. sayfa hızı bir sıralama faktörüdür.

WebP Desteği

WebP çok heyecan verici olsa da, tarayıcı desteğinden bahsetmek de önemlidir. Şu anda tüm modern tarayıcılar WebP’yi desteklememektedir. Göre kullanabilirmiyim, WebP şu anda Chrome 23+, Opera 39+, Opera mini’nin tüm sürümleri, Android tarayıcı 4.3+ ve Android için Chrome’da desteklenmektedir.

webp tarayıcı desteği

Fakat bekle! Çok hayal kırıklığına uğratmayın, çünkü eğitimde size aşağıda göstereceğiz, WebP dosyalarını desteklenen tarayıcılara ve JPG / PNG’lere yedek olarak teslim etme. Bu, desteklenmeyen tarayıcıların bozuk bir resim görmeyecekleri, daha önce gördüklerini görecekleri anlamına gelir. WebP’yi bir geçiş yerine WordPress sitenize bir ek olarak düşünün.

Göre W3Schools, Chrome, tarayıcı pazar payında% 70’in biraz üzerinde tekele sahip. Ancak pazar payını sağlam bir kanıt olarak almayın, kendi ziyaretçilerinizin verilerine bakın ve nişinize bağlı olarak farklılık gösterebileceğinden hangi tarayıcıları kullandıklarını görün. Ancak istatistiklerin ne kadar çarpık olduğuna şaşırabilirsiniz. Google Analytics’te “Kitle” altında “Tarayıcı ve İşletim Sistemi” ni tıklayabilir ve kullanıcıların sitenize ulaştıklarında hangi tarayıcıları kullandığını görebilirsiniz. Rastgele bir web sitesi çektik ve aşağıda görebileceğiniz gibi, ziyaretçilerin% 67’si Chrome’dan ve% 1’i Opera’dan. Yani Bu kişilerin% 68’i WebP’yi görüntüleyebilir ve Web’den yararlanabilir görüntü dosyası formatı!

tarayıcıları chrome webp

WordPress’te WebP Dosyaları Nasıl Kullanılır

Bugünkü örnekte, WebP’yi WordPress’te çalıştırmak ve çalıştırmak için iki farklı WordPress eklentisinin bir kombinasyonunu kullanacağız. Bunlar, global bir içerik dağıtım ağı (CDN) olan KeyCDN’de ekip tarafından oluşturulur ve geliştirilir..

  1. [ödül] Optimus Image Optimizer: WordPress için kayıpsız görüntü sıkıştırma eklentisi, görüntüleri WebP’ye dönüştürür
  2. [Bedava] WordPress Önbellek Etkinleştirici: Önbellek eklentisi WebP sunmanıza olanak tanır desteklenen tarayıcılara

Optimus Image Optimizer

Optimus Image Optimizer’ı şuradan indirebilirsiniz: WordPress deposu, itibaren optimus.io, veya eklenti panonuzdan. Not: Görüntülerinizi WebP’ye dönüştürmek istiyorsanız premium lisans gerektirir. Kurulduktan sonra eklenti ayarlarında “WebP dosyalarının oluşturulması” nı etkinleştirebilirsiniz..

webp dosyalarının oluşturulması

WebP etkinleştirildikten sonra bu, dönüştürülen her şey için ek bir görüntü oluşturur. Bir PNG dosyası veya JPG yüklerseniz, görüntünüzün şimdi bir .webp sürümü de vardır. Unutmayın, PNG / JPG hala gereklidir, çünkü bunlar desteklenmeyen tarayıcılara sunmak için hala kullanılır. Optimus kayıpsız sıkıştırma yapar, bu nedenle PNG ve JPG’leriniz de sıkıştırılır.

webp ve png dosyaları

Ayrıca, resimlerinizi daha önce sıkıştırmış olmanız ve yine de bunları WebP’ye dönüştürmeniz gerektiğinde bir toplu iyileştirici seçeneği de vardır..

toplu görüntü iyileştirici

WordPress Önbellek Etkinleştirici

Artık WebP görüntüleriniz olduğuna göre, WordPress’e desteklenen tarayıcılara WebP görüntülerini ve diğer tarayıcılara PNG / JPG’yi sunmasını söylemenin bir yoluna ihtiyacınız var. Bu, ücretsiz WordPress Cache Enabler eklentisi ile gerçekleştirilebilir. Eklentiyi şuradan indirebilirsiniz: WordPress deposu veya eklenti kontrol panelinizden yükleyebilirsiniz. Yüklendikten sonra, eklenti ayarlarında “Ek bir WebP önbelleğe alınmış sürüm oluştur” u etkinleştirebilirsiniz.

önbellek etkinleştirici ayarları

Bu seçeneği etkinleştirdiğinizde, sayfanızın önbelleğe alınmış ek bir WebP sürümü oluşturulur.webp sürümleri

Ve işte bu! Şimdi WordPress web sitenizde çalışan WebP dosyalarınız olmalıdır.

JPG – WebP Karşılaştırması

Bir karşılaştırma yaptık JPG’den WebP’ye elde edebileceğiniz farklılıkları göstermek için.

DOSYA ADIORİJİNAL JPGBASINÇLI JPGWEBP FORMATIBOYUT FARKI%
jpg-to-webp-1.jpg758 KB685 KB109 KB% 86
jpg-to-webp-2.jpg599 KB529 KB58,8 KB% 90
jpg-to-webp-3.jpg960 KB881 KB200 KB% 79
jpg-to-webp-4.jpg862 KB791 KB146 KB% 83
jpg-to-webp-5.jpg960 KB877 KB71,7 KB% 93

WebP bir Ortalama görüntü boyutunda% 85,87 azalma.

PNG’den WebP Karşılaştırması

Yine, PNG’den WebP’ye elde edebileceğiniz farklılıkları göstermek için.

Dosya adıOrijinal PNGSıkıştırılmış PNGWebP BiçimiBoyut Farkı%
png-webp-1.png için44 KB34 KB30 KB% 32
png-webp-2.png için46 KB35 KB33 KB% 28
png-webp-3.png için43 KB31 KB25 KB% 42
png-webp-4.png için30 KB24 KB18 KB% 40
png-webp-5.png için15 KB11 KB8 KB% 47
png-webp-6.png için34 KB24 KB18 KB% 47
png-webp-7.png için15 KB13 KB8 KB% 47
png-webp-8.png için63 KB47 KB44 KB% 30
png-webp-9.png için48 KB36 KB33 KB% 31
png-webp-10.png için17 KB14 KB11 KB% 35
png-webp-11.png için18 KB13 KB9 KB% 50
png-webp-12.png için61 KB45 KB39 KB% 36
png-webp-13.png için32 KB25 KB21 KB% 35
png-webp-14.png için26 KB21 KB17 KB% 35
png-webp-15.png için14 KB12 KB9 KB% 36
png-webp-16.png için36 KB27 KB24 KB% 33
png-webp-17.png için14 KB12 KB8 KB% 43
png-webp-18.png için21 KB18 KB13 KB% 38
png-webp-19.png için42 KB30 KB27 KB% 36
png-webp-20.png için23 KB20 KB18 KB% 22

WebP bir Ortalama görüntü boyutunda% 42,8 azalma.

özet

Gördüğünüz gibi, WebP’nin WordPress sitenize uygulanması çok kolaydır ve çok daha küçük görüntü dosyası boyutlarına ulaşabilirsiniz! WebP’nin tasarruflarıyla karşılaştırılabilecek görüntü sıkıştırma yok. Oh, ve WebP’nin kayıpsız sıkıştırma kullanma yeteneğine sahip olduğunu söylemiş miydik? Bu, gözle görülür bir kalite kaybı görmeyeceğiniz anlamına gelir. WordPress’i hızlandırmanın daha iyi bir yolunu arıyorsanız, WebP harika bir çözüm olabilir.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map