WebP-failide kasutamine WordPressis ja lehe laadimisaegade vähendamine

veebi failid WordPress

Enamik meist teab nüüdseks, et pildi optimeerimine on väga oluline, kuna see mängib suurt osa teie WordPressi veebisaidi kogu laadimisajast. Täna tahame jagada teiega lihtsat alternatiivi selle kohta, kuidas integreerida Google’i WebP-failid oma WordPressi saidile. Mõni kasutaja on näinud, et pildifaili suurus on vähenenud üle 70%!


Mis on WebP?

Kui te pole tuttav WebP, see on pildifailivorming, mille Google’i veebitoimitusmeeskond on loonud eesmärgiga luua väiksemaid ja kiiremaid pilte. See kuulutati esmakordselt välja 2010. aastal ja sellel on nii kadudeta kui ka kadudeta pakkimismeetodid. Pildid toimetatakse veebibrauserisse veebiserverist selle MIME tüübi põhjal, mida ta kasutab pilt / veebp.

WebP kadudeta pildid on 26% väiksem võrreldes PNG-dega ja WebP-ga kahjumlikud pildid on 25-34% väiksem kui JPEG-d.

Ettevõtted, nagu YouTube ja eBay, juba kasutavad WebP-d suure osa oma saitide vaikselt toiteks. Allpool on näide eBayst, kus nende kodulehel on keskmiselt umbes 30 WebP-faili.

veebi kasutamine ebay

Miks on WebP nii oluline? Vastavalt httparhiiv, seisuga 2016. aasta august, kujutised moodustavad üle 64% keskmise veebilehe massist. Tavaliselt on see midagi enamat kui teie CSS, JS ja HTML kokku. Nii et tugeva pildi optimeerimise meetodi ja pildivormingu (nt WebP) valimine on ülioluline, et saaksite oma lehe kaalu nii palju kui võimalik vähendada. Üldiselt, mida väiksem on teie leht, seda kiiremini see laaditakse. Ja see meeldib mitte ainult külastajatele, vaid ka Google’ile lehekülje kiirus on järjestamise tegur.

WebP tugi

Ehkki WebP on väga põnev, on oluline mainida ka brauseri tuge. Praegu ei toeta kõik tänapäevased brauserid WebP-i. Vastavalt Kas ma võin kasutada, WebP on praegu toetatud Chrome 23+, Opera 39+, kõigi Opera mini versioonide, Androidi brauseri 4.3+ ja Chrome for Android jaoks.

veebibrauseri tugi

Aga oota! Ärge liiga pettunud, sest õpetuses, mida me teile allpool näitame, on olemas meetod, kuidas seda teha varundage WebP-failid toetatud brauseritesse ja JPG / PNG-failidesse. See tähendab, et toetamata brauserid ei näe katkist pilti, nad näevad lihtsalt seda, mida nad varem nägid. Mõelge WebP-ist kui oma WordPressi saidi täiendusele, mitte migratsioonile.

Vastavalt W3koolid, Chrome’il on brauseri turuosa monopoolne osa pisut üle 70%. Kuid ärge võtke lihtsalt turuosa kindla tõendina, vaadake oma külastajate andmeid ja vaadake, milliseid brausereid nad kasutavad, kuna see võib teie niši järgi erineda. Võite olla üllatunud, kui statistika on viltu. Google Analyticsi jaotises „Vaatajaskond” saate klõpsata jaotises „Brauser ja OS” ja vaadata, milliseid brausereid inimesed teie saidile jõudmisel kasutavad. Tõmbasime juhusliku veebisaidi ja nagu näete allpool, on 67% külastajatest Chrome ja veel 1% Opera. Nii 68% neist inimestest saab WebP-d vaadata ja sellest kasu saada pildifaili vorming!

brauserid chrome webp

Kuidas kasutada WebP-faile WordPressis

Tänases näites hakkame WebP-i käivitamiseks ja töötamiseks WordPressis kasutama kahte erinevat WordPress-pluginat. Need loob ja arendab KeyCDN-i meeskond, mis on ülemaailmne sisu edastamise võrk (CDN).

  1. [lisatasu] Optimus Image Optimizer: WordPressi kadudeta piltide tihendamise plugin teisendab pildid WebP-ks
  2. [tasuta] WordPressi vahemälu võimaldaja: Vahemälu plugin, mis võimaldab teil WebP-d teenindada toetatud brauseritesse

Optimus Image Optimizer

Optimus Image Optimizer saate alla laadida saidist WordPressi hoidla, alates optimus.io, või pistikprogrammi juhtpaneelilt. Märkus. Kui soovite oma pilte WebP-i teisendada, on vaja lisalitsentsi. Pärast installimist saate pistikprogrammi sätetes lubada „WebP-failide loomine”.

Webp-failide loomine

Pärast WebP lubamist loob see sisuliselt täiendava pildi kõigele teisendatud failile. Nii et kui laadite üles PNG-faili või JPG-faili, on teie pildil nüüd ka .webp-versioon. Pidage meeles, et PNG / JPG on endiselt vajalik, kuna neid kasutatakse endiselt toetamata brauserite jaoks. Optimus teeb kadudeta pakkimise, nii et ka teie PNG ja JPG on tihendatud.

webp- ja png-failid

Samuti on hulgipõhise optimeerimise võimalus juhuks, kui olete oma pildid juba varem kokku pakkinud ja peate need ikkagi WebP-i teisendama.

hulgipiltide optimeerija

WordPressi vahemälu võimaldaja

Nüüd, kui teil on WebP-pildid, vajate viisi, kuidas käskida WordPressil pakkuda WebP-pilte toetatud brauseritesse ja PNG / JPG teistele brauseritele. Seda saab teha tasuta pistikprogrammi WordPress Cache Enabler abil. Pistikprogrammi saate alla laadida saidist WordPressi hoidla või installige see pistikprogrammi juhtpaneelilt. Pärast installimist saate pistikprogrammi seadetes lubada funktsiooni „Looge täiendav WebP-i puhverdatud versioon”.

vahemälu võimaldaja seaded

Kui olete selle valiku lubanud, luuakse teie lehe täiendav puhverdatud WebP-versioon.webpi versioonid

Ja see selleks! Nüüd peaks teie WordPressi veebisaidil olema töötavad WebP-failid.

JPG WebP-i võrdlus

Võrdlesime JPG WebP-le näidata erinevusi, mida võite saavutada.

FAILI NIMIORIGINAAL JPGKOMPRESSEERITUD JPGVEEBI VORMSUURUSTE Erinevus%
jpg-veebi-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 tulemuseks oli a Kujutise keskmise suuruse vähenemine 85,87%.

PNG WebP-i võrdlus

Jällegi, me võrdlesime ka PNG WebP-le näidata erinevusi, mida võite saavutada.

Faili nimiAlgne PNGTihendatud PNGWebP-vormingSuuruse erinevus%
png-veebis-1.png44 KB34 KB30 KB32%
png-veebp-2.png46 KB35 KB33 KB28%
png-veebp-3.png43 KB31 KB25 KB42%
png-veebp-4.png30 KB24 KB18 KB40%
png-veebp-5.png15 KB11 KB8 KB47%
png-veebp-6.png34 KB24 KB18 KB47%
png-veebp-7.png15 KB13 KB8 KB47%
png-veebp-8.png63 KB47 KB44 KB30%
png-veebp-9.png48 KB36 KB33 KB31%
png-veebp-10.png17 KB14 KB11 KB35%
png-veebp-11.png18 KB13 KB9 KB50%
png-veebp-12.png61 KB45 KB39 KB36%
png-veebp-13.png32 KB25 KB21 KB35%
png-veebp-14.png26 KB21 KB17 KB35%
png-veebp-15.png14 KB12 KB9 KB36%
png-veebp-16.png36 KB27 KB24 KB33%
png-veebp-17.png14 KB12 KB8 KB43%
png-veebis-18.png21 KB18 KB13 KB38%
png-veebp-19.png42 KB30 KB27 KB36%
png-veebp-20.png23 KB20 KB18 KB22%

WebP tulemuseks oli a Kujutise keskmise suuruse vähenemine 42,8%.

Kokkuvõte

Nagu näete, on WebP-i oma WordPressi saidil väga lihtne rakendada ja võite saavutada drastiliselt väiksema pildifaili suuruse! Seal pole ühtegi pildi tihendamist, mida saaks võrrelda WebP kokkuhoiuga. Oh, ja kas me mainisime, et WebP-l on võimalus kasutada kadudeta pakkimist? See tähendab, et te ei näe märgatavat kvaliteedi langust. Kui otsite paremat viisi WordPressi kiirendamiseks, võib WebP olla suurepärane lahendus.

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