Kako uporabljati datoteke WebP v WordPress-u in zmanjšati čas nalaganja strani

datotek

Večina nas že ve, da je optimizacija slike zelo pomembna, saj igra ogromno vlogo v skupnih časih nalaganja vaše WordPress spletne strani. Danes želimo z vami deliti enostavno alternativo o tem, kako integrirati Googlove datoteke WebP v svoje WordPress spletno mesto. Nekateri uporabniki so videli manjšo velikost slikovne datoteke za več kot 70%!


Kaj je WebP?

Če niste seznanjeni z WebP, gre za obliko slikovne datoteke, ki jo je ustvarila ekipa za spletno uspešnost pri Googlu z namenom ustvariti manjše in hitrejše slike. Prvič je bil objavljen leta 2010 in vsebuje tako metode stiskanja, kot so izgube in brez izgub. Slike se v spletni brskalnik dostavijo s spletnega strežnika na podlagi vrste MIME, ki jo uporablja image / webp.

Slike brez izgub WebP so 26% manjši v velikosti v primerjavi z PNG in WebP izgubljene slike 25-34% manjši kot JPEG.

Podjetja, kot sta YouTube in eBay, že uporabljajo WebP, da tiho napajajo veliko svojih spletnih mest. Spodaj je primer z eBaya, kjer na svoji domači strani povprečno štejejo približno 30 datotek WebP.

spletna uporaba ebay

Zakaj je WebP tako pomemben? Po navedbah httparchive, od avgusta 2016, slike predstavljajo več kot 64% povprečne teže spletne strani. Običajno je več kot vaš CSS, JS in HTML skupaj. Izbira robustnega načina optimizacije slike in oblike slike, kot je WebP, je ključnega pomena, da lahko čim bolj zmanjšate težo svoje strani. Na splošno je manjša vaša stran, hitrejša bo nalaganje. In to bo ugajalo ne le vašim obiskovalcem, ampak tudi Googlu kot hitrost strani je dejavnik razvrstitve.

Podpora za WebP

Medtem ko je WebP zelo navdušujoč, je treba omeniti tudi podporo brskalnika. Trenutno ne podpirajo vsi sodobni brskalniki WebP. Po navedbah kaniuza, WebP je trenutno podprt v Chromu 23+, Operi 39+, vseh različicah Opera mini, brskalniku Android 4.3 ali novejši in Chromu za Android.

podpora brskalniku webp

Ampak počakaj! Ne bodite preveč razočarani, ker v vadnici, ki vam ga bomo prikazali spodaj, obstaja metoda, kako to storiti dostavite datoteke WebP v podprte brskalnike in JPG / PNG kot rezervno datoteko. To pomeni, da nepodprti brskalniki ne bodo videli pokvarjene slike, temveč bodo videli le tisto, kar so videli prej. Predstavljajte WebP kot dodatek k svojemu mestu WordPress in ne kot selitev.

Po navedbah W3Šole, Chrome ima monopol na tržnem deležu brskalnika nekaj več kot 70%. Toda ne jemljite tržnega deleža kot trden dokaz, poglejte podatke svojih obiskovalcev in poglejte, katere brskalnike uporabljajo, saj se lahko razlikujejo glede na vašo nišo. Morda boste presenečeni nad tem, kako zelo so nagnjeni podatki. V storitvi Google Analytics v razdelku »Občinstvo« lahko kliknete »Brskalnik in OS« in si ogledate, kaj brskalniki uporabljajo, ko uporabnikijo vaše spletno mesto. Potegnili smo naključno spletno mesto in kot vidite spodaj, je 67% obiskovalcev iz Chroma, še 1% pa iz Opere. Torej 68% teh ljudi si lahko ogleda in koristi spletno stran Oblika slikovne datoteke!

brskalniki chrome webp

Kako uporabljati datoteke WebP v WordPressu

V današnjem primeru bomo uporabili kombinacijo dveh različnih WordPress vtičnikov, da začnemo uporabljati WebP in uporabljati WordPress. Te ustvari in razvija skupina v KeyCDN, ki je globalno omrežje za pošiljanje vsebin (CDN).

  1. [premium] Optimus Image Optimizer: Vtičnik za stiskanje slik brez WordPressa pretvori slike v WebP
  2. [prost] WordPress predpomnilnik: Vtičnik za predpomnjenje, ki omogoča strežbo WebP do podprtih brskalnikov

Optimus Image Optimizer

Optimus Image Optimizer lahko prenesete s spletnega mesta WordPress repozitorij, iz optimus.io, ali na nadzorni plošči vtičnikov. Opomba: Če želite pretvoriti svoje slike v WebP, potrebujete premijsko licenco. Ko je nameščena, lahko v nastavitvah vtičnika omogočite »Ustvarjanje datotek WebP«.

ustvarjanje spletnih datotek

Ko je WebP omogočen, to v bistvu ustvari dodatno sliko za vse, kar se pretvori. Če naložite datoteko PNG ali JPG, je na voljo tudi različica .webp slike. Ne pozabite, da je PNG / JPG še vedno potreben, ker se še vedno uporabljajo za nepodprte brskalnike. Optimus stisne brez izgub, zato sta tudi PNG in JPG stisnjena.

datotek webp in png

Obstaja tudi možnost za optimiziranje v velikem obsegu, če ste že stisnili svoje slike in jih morate še vedno pretvoriti v WebP.

orodje za optimiziranje velikih slik

WordPress predpomnilnik

Zdaj, ko imate slike WebP, potrebujete način, kako WordPressu sporočiti, da WebP slike prikaže podprtim brskalnikom, PNG / JPG pa drugim brskalnikom. To je mogoče doseči z brezplačnim vtičnikom WordPress Cache Enabler. Vtičnik lahko prenesete s seznama WordPress repozitorij ali ga namestite znotraj nadzorne plošče vtičnika. Ko je nameščena, lahko v nastavitvah vtičnika omogočite “Ustvari dodatno predpomnjeno različico WebP”.

nastavitve omogočil predpomnilnika

Ko omogočite to možnost, se ustvari dodatna predpomnjena različica WebP vaše strani.webp različice

In to je to! Zdaj bi morali imeti na vašem spletnem mestu WordPress datoteke WebP.

JPG za spletno primerjavo

Izvedli smo primerjavo JPG v WebP da pokažete razlike, ki jih lahko dosežete.

IME DATOTEKEORIGINAL JPGNAPISANI JPGOBRAZEC WEBPRAZLIKA VELIKOSTI%
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%

Rezultat storitve WebP je bil 85,87% zmanjšanje povprečne velikosti slike.

Primerjava PNG s spletnim protokolom

Spet smo opravili tudi primerjavo PNG v WebP da pokažete razlike, ki jih lahko dosežete.

Ime datotekeIzvirni PNGStisnjen PNGFormat WebPRazlika v velikosti%
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%

Rezultat storitve WebP je bil 42,8% zmanjšanje povprečne velikosti slike.

Povzetek

Kot lahko vidite, je WebP zelo enostavno implementirati na svojem mestu WordPress in dosežete lahko drastično manjše velikosti slikovnih datotek! Tam ni stiskanja slike, ki bi se lahko primerjalo s prihranki WebP. Oh, in ali smo že omenili, da ima WebP zmožnost uporabe stiskanja brez izgub? To pomeni, da ne boste opazili izgube kakovosti. Če iščete boljši način za pospešitev WordPressa, je lahko WebP odlična rešitev.

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