WordPress-də WebP fayllarını necə istifadə etmək olar və səhifə yükləmə müddətini azaltmaq

webp sənədləri wordpress

WordPress veb saytınızın ümumi yükləmə müddətində böyük bir rol oynadığı üçün görüntü optimallaşdırmasının çox vacib olduğunu indi çoxumuz bilirik. Bu gün Google WebP fayllarını WordPress saytınıza necə birləşdirmək barədə asan bir alternativi sizinlə bölüşmək istəyirik. Bəzi istifadəçilər görüntü faylı ölçüsünün 70% -dən çox azaldığını gördülər!


WebP nədir?

İlə tanış deyilsinizsə VebP, daha kiçik və daha sürətli görüntü yaratmaq niyyəti ilə veb üzərindəki Google performans qrupu tərəfindən yaradılan görüntü faylı formatıdır. İlk dəfə 2010-cu ildə elan edilmiş və həm itkisiz, həm də itkisiz sıxılma üsullarını əks etdirir. Şəkillər istifadə olunan MIME tipinə əsaslanan veb serverdən veb brauzerə çatdırılır şəkil / veb.

WebP itkisiz şəkillərdir 26% kiçikdir PNG və WebP-lə müqayisədə ölçülü zərərli şəkillər var 25-34% daha kiçikdir JPEG-lərə nisbətən.

YouTube və eBay kimi şirkətlər artıq bir çox saytlarını səssizcə gücləndirmək üçün WebP-dən istifadə edirlər. Aşağıda eBay’dan bir nümunə var, burada ana səhifələrində təxminən 30 WebP fayl var.

veb istifadə ebay

WebP niyə bu qədər vacibdir? Görə həvaric, avqust 2016-cı il tarixinə, şəkillər orta veb səhifənin çəkisinin 64% -dən çoxunu təşkil edir. Adətən bu, CSS, JS və HTML birləşdirilmiş olduğundan daha çoxdur. Buna görə səhifənizin çəkisini mümkün qədər azaltmağınız üçün WebP kimi sağlam bir görüntü optimallaşdırma metodu və şəkil formatını seçmək çox vacibdir. Ümumiyyətlə, səhifəniz nə qədər kiçik olsa, yükləyəcək qədər sürətli olur. Və bu, yalnız ziyarətçilərinizi deyil, həm də Google-u da sevindirəcəkdir səhifə sürəti sıralanma amildir.

WebP dəstəyi

İndi WebP çox maraqlı olsa da, brauzer dəstəyini də qeyd etmək lazımdır. Hal-hazırda bütün müasir brauzerlər WebP-i dəstəkləmir. Görə caniuse, Hal hazırda WebP Chrome 23+, Opera 39+, Opera mini-nin bütün versiyaları, Android brauzeri 4.3+ və Android üçün Chrome-da dəstəklənir.

webp brauzer dəstəyi

Ancaq gözləyin! Çox məyus olmayın, çünki aşağıda sizə göstərəcəyimiz dərsdə bir metod var WebP fayllarını dəstəklənən brauzerlərə və JPG / PNG-lərə bir geriləmə kimi çatdırın. Bu o deməkdir ki, dəstəklənməyən brauzerlər pozulmuş görüntünü görməyəcək, sadəcə əvvəl gördüklərini görəcəklər. WebP’i köçmək əvəzinə WordPress saytınıza əlavə olaraq düşünün.

Görə W3Məktəblər, Chrome brauzer bazarında 70% -dən bir qədər çox inhisara malikdir. Ancaq bazar payını etibarlı bir sübut kimi götürməyin, ziyarətçilərinizin məlumatlarına baxın və nişinizə görə fərqli ola biləcəyi üçün onların hansı brauzerlərdən istifadə etdiyinə baxın. Statistikanın nə qədər əyri olmasına baxmayaraq təəccüblənə bilərsiniz. “Tamaşaçı” altındakı Google Analytics-də “Brauzer və OS” -ə vurub saytınıza vurduqda insanların hansı brauzerlərdən istifadə etdiyini görə bilərsiniz. Təsadüfi bir veb sayt çəkdik və aşağıda gördüyünüz kimi ziyarətçilərin 67% -i Chrome, digər 1% isə Opera-dan. Belə ki Bu insanların 68% -i WebP-yə baxa və faydalana bilər şəkil faylı formatı!

brauzerlər chrome webp

WordPress-də WebP fayllarını necə istifadə etmək olar

Bugünkü misalda, WebP-ni işə salmaq və WordPress-də işləmək üçün iki fərqli WordPress eklentinin birləşməsindən istifadə edəcəyik. Bunlar qlobal məzmun çatdırılma şəbəkəsi (CDN) olan KeyCDN-də komanda tərəfindən yaradılmışdır və inkişaf etdirilir..

  1. [mükafat] Optimus Image Optimizer: WordPress üçün itkisiz görüntü sıxılma plagini, şəkilləri WebP-yə çevirir
  2. [pulsuz] WordPress Cache Enabler: Plugin’i saxlayır WebP xidmət etməyə imkan verir dəstəklənən brauzerlərə

Optimus Image Optimizer

Sizdən Optimus Image Optimizer proqramını yükləyə bilərsiniz WordPress depo, dən optimus.io, və ya plagin tablosuna daxil olun. Qeyd: Şəkillərinizi WebP-yə çevirmək istəyirsinizsə, mükafat lisenziyası tələb olunur. Yükləndikdən sonra plugin parametrlərində “WebP sənədlərinin yaradılması” nı aktivləşdirə bilərsiniz.

webp sənədlərinin yaradılması

WebP aktiv olduqdan sonra bu, çevrilən hər şey üçün əlavə bir görüntü yaradır. Buna görə bir PNG faylı və ya JPG yükləsəniz, görüntünüzün .Web versiyası da var. Unutmayın, PNG / JPG hələ də lazımdır, çünki bunlar hələ dəstəklənməyən brauzerlərə xidmət etmək üçün istifadə olunur. Optimus itkisiz sıxılma edir, buna görə PNG və JPG-ləriniz də sıxılmışdır.

webp və png faylları

Əvvəlcədən şəkillərinizi sıxmış olsanız və hələ də onları WebP-yə çevirməyiniz lazım olsa, toplu optimizator seçimi də var..

toplu görüntü optimizatoru

WordPress Cache Enabler

Beləliklə, indi WebP şəkilləriniz var, WordPress-ə dəstəklənən brauzerlərə və PNG / JPG-ni digər brauzerlərə WebP şəkillərinə xidmət etməyi söyləmək üçün bir yola ehtiyacınız var. Bu, pulsuz WordPress Cache Enabler plugin ilə yerinə yetirilə bilər. Plugin’i yükləyə bilərsiniz WordPress depo və ya plugin tablosuna quraşdırın. Quraşdırıldıqdan sonra plugin parametrlərində “Əlavə bir WebP yaddaşlı bir versiya yarat” funksiyasını aktiv edə bilərsiniz.

cache enabler parametrləri

Bu seçimi işə saldıqdan sonra səhifənizin əlavə bir keşlənmiş WebP versiyası yaradılır.webp versiyaları

Və budur! İndi WordPress veb saytınızda işləyən WebP sənədləriniz olmalıdır.

WebP müqayisə üçün JPG

Bir müqayisə apardıq WebP-ə JPG əldə edə biləcəyiniz fərqləri göstərmək.

FAYL ADIORIGINAL JPGTƏCİLİ JPGWEBP FORMATISIZE FƏRQLİ%
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58,8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

WebP ilə nəticələndi Təsvirin orta ölçüsündə 85,87% azalma.

WebP müqayisə üçün PNG

Yenə də müqayisə apardıq WebP-yə PNG əldə edə biləcəyiniz fərqləri göstərmək.

Fayl adıOrijinal PNGSıxılmış PNGWebP formatıÖlçü Fərqi%
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

WebP ilə nəticələndi Orta görüntü ölçüsündə 42,8% azalma.

Xülasə

Gördüyünüz kimi, WebP-ni WordPress saytınızda həyata keçirmək çox asandır və nəzərə çarpacaq dərəcədə kiçik görüntü faylı ölçülərinə nail ola bilərsiniz! Orada WebP əmanətləri ilə müqayisə edə biləcək heç bir görüntü sıxılma yoxdur. Oh, və WebP-in itkisiz sıxılma istifadə etmək qabiliyyətinə sahib olduğunu qeyd etdik? Demək olar ki, heç bir keyfiyyət itkisini görməyəcəksiniz. WordPress’i sürətləndirmək üçün daha yaxşı bir yol axtarırsınızsa, WebP əla bir həll ola bilər.

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