Kaip naudoti WebP failus naudojant WordPress ir sutrumpinti puslapio įkėlimo laiką

WebP failus

Daugelis iš mūsų iki šiol žino, kad vaizdo optimizavimas yra labai svarbus, nes jis vaidina didžiulį vaidmenį per visą jūsų „WordPress“ svetainės įkėlimo laiką. Šiandien norime pasidalinti su jumis paprasta alternatyva, kaip integruoti „Google WebP“ failus į savo „WordPress“ svetainę. Kai kurie vartotojai matė, kad vaizdo failo dydis sumažėja daugiau nei 70%!


Kas yra WebP?

Jei nesate susipažinę su WebP, tai vaizdo failo formatas, kurį sukūrė žiniatinklio našumo komanda „Google“, norėdama sukurti mažesnius ir greitesnius vaizdus. Pirmą kartą ji buvo paskelbta 2010 m., Joje naudojami ir nuostolingi, ir nuostolingi glaudinimo metodai. Vaizdai į interneto naršyklę pristatomi iš žiniatinklio serverio, atsižvelgiant į MIME tipą, kurį jis naudoja vaizdas / žiniatinklis.

„WebP“ nuostolingi vaizdai yra 26% mažesnis dydžio, palyginti su PNG ir „WebP“ nuostolingais vaizdais 25-34% mažesni nei JPEG.

Tokios kompanijos kaip „YouTube“ ir „eBay“ jau naudoja „WebP“, norėdamos tyliai valdyti daugelį savo svetainių. Žemiau pateiktas „eBay“ pavyzdys, kai pagrindiniame puslapyje jie vidutiniškai pateikia apie 30 WebP failų.

webp naudojimas ebay

Kodėl „WebP“ yra toks svarbus? Pagal httparchive, nuo 2016 m. rugpjūčio mėn, vaizdai sudaro daugiau nei 64% vidutinio tinklalapio svorio. Paprastai tai yra daugiau nei jūsų CSS, JS ir HTML. Taigi, norint kuo labiau sumažinti puslapio svorį, labai svarbu pasirinkti patikimą vaizdo optimizavimo metodą ir vaizdo formatą, pvz., „WebP“. Paprastai kuo mažesnis puslapis, tuo greičiau jis bus įkeltas. Ir tai patiks ne tik jūsų lankytojams, bet ir „Google“ puslapio greitis yra reitingo faktorius.

„WebP“ palaikymas

Nors „WebP“ labai jaudina, svarbu paminėti ir naršyklės palaikymą. Šiuo metu ne visos šiuolaikinės naršyklės palaiko „WebP“. Pagal ar galiu naudoti, Šiuo metu „WebP“ palaikoma „Chrome 23“ ar naujesnėse versijose, „Opera 39+“, visose „Opera mini“ versijose, „4.3“ ir naujesnės versijos „Android“ ir „Chrome“, skirtoje „Android“.

žiniatinklio naršyklės palaikymas

Bet palauk! Nebijokite per daug nusivilti, nes vadove, kurį parodysime jums žemiau, yra metodas, kaip tai padaryti pristatyti „WebP“ failus į palaikomas naršykles ir JPG / PNG. Tai reiškia, kad nepalaikomos naršyklės nematys sugadinto vaizdo, jos tiesiog matys tai, ką matė anksčiau. Galvok apie „WebP“ kaip savo „WordPress“ svetainės papildymą, o ne perkėlimą.

Pagal „W3Schools“, „Chrome“ užima šiek tiek daugiau nei 70% naršyklės rinkos monopolijos. Negalima tik laikyti rinkos dalimi kaip tvirtu įrodymu, pažiūrėkite į savo lankytojų duomenis ir sužinokite, kokias naršykles jie naudoja, nes tai gali skirtis atsižvelgiant į jūsų nišą. Galbūt nustebsite, kiek iškreipta statistika. „Google Analytics“ skiltyje „Auditorija“ galite spustelėti „Naršyklė ir OS“ ir pamatyti, kokias naršykles žmonės naudoja, kai pasiekia jūsų svetainę. Mes įtraukėme atsitiktinę svetainę ir, kaip matote toliau, 67% lankytojų yra iš „Chrome“, dar 1% – iš „Opera“. Taigi 68% šių žmonių gali peržiūrėti WebP ir juo naudotis vaizdo failo formatas!

naršyklės „chrome webp“

Kaip naudoti WebP failus “WordPress”

Šiandienos pavyzdyje naudosime dviejų skirtingų „WordPress“ papildinių derinį, kad „WebP“ būtų sukurtas ir paleistas naudojant „WordPress“. Juos kuria ir plėtoja KeyCDN, pasauliniame turinio pateikimo tinkle (CDN), komanda..

  1. [premija] „Optimus“ vaizdo optimizavimo priemonė: „WordPress“ netekęs vaizdų glaudinimo papildinys konvertuoja vaizdus į „WebP“
  2. [Laisvas] „WordPress“ talpyklos įgalintuvas: Talpyklos papildinys, kuris leidžia jums aptarnauti WebP palaikomose naršyklėse

„Optimus“ vaizdo optimizavimo priemonė

„Optimus Image Optimizer“ galite atsisiųsti iš „WordPress“ saugykla, iš optimus.io, arba iš papildinio prietaisų skydelio. Pastaba: norint konvertuoti vaizdus į WebP, reikalinga aukščiausios klasės licencija. Įdiegę papildinio nustatymuose galite įjungti „WebP failų kūrimas“.

Webp failų kūrimas

Įjungus „WebP“, iš esmės sukuriamas papildomas vaizdas viskam, kas yra konvertuojama. Taigi, jei įkelsite PNG failą arba JPG, dabar yra ir jūsų vaizdo .webp versija. Atminkite, kad PNG / JPG vis dar reikalingi, nes jie vis dar naudojami nepalaikomoms naršyklėms. „Optimus“ daro be nuostolių glaudinimą, todėl jūsų PNG ir JPG taip pat yra suglaudinti.

„webp“ ir „png“ failai

Taip pat yra masinio optimizavimo priemonės parinktis tuo atveju, jei jau suspaudėte savo vaizdus ir vis tiek turite juos konvertuoti į WebP.

masinio vaizdo optimizavimo priemonė

„WordPress“ talpyklos įgalintuvas

Taigi, kai turite „WebP“ atvaizdų, jums reikia būdo, kaip „WordPress“ nurodyti, kad „WebP“ atvaizdai būtų palaikomi palaikomose naršyklėse, o PNG / JPG – kitoms naršyklėms. Tai galima padaryti naudojant nemokamą „WordPress Cache Enabler“ papildinį. Papildinį galite atsisiųsti iš „WordPress“ saugykla arba įdiekite jį iš savo papildinio prietaisų skydelio. Įdiegę papildinio nustatymuose galite įjungti „Sukurti papildomą WebP talpyklos versiją“.

talpyklos įgalintuvo nustatymai

Kai įgalinsite šią parinktį, bus sukurta papildoma talpykloje išsaugota jūsų puslapio „WebP“ versija.webp versijos

Ir štai! Dabar jūs turėtumėte turėti „WebP“ failus, veikiančius „WordPress“ svetainėje.

JPG palyginimas su „WebP“

Mes palyginome JPG į „WebP“ parodyti skirtumus, kuriuos galite pasiekti.

FAILO PAVADINIMASORIGINAL JPGSUSPAUDINTAS JPGWEBP FORMATASDYDŽIO SKIRTUMAS%
„jpg-to-webp-1.jpg“758 KB685 KB109 KB86 proc.
„jpg-to-webp-2.jpg“599 KB529 KB58,8 KB90 proc.
„jpg-to-webp-3.jpg“960 KB881 KB200 KB79 proc.
„jpg-to-webp-4.jpg“862 KB791 KB146 KB83 proc.
„jpg-to-webp-5.jpg“960 KB877 KB71,7 KB93 proc.

WebP rezultatas: Vidutinis vaizdo dydis sumažėja 85,87%.

PNG palyginimas su „WebP“

Vėlgi, mes taip pat palyginome PNG į „WebP“ parodyti skirtumus, kuriuos galite pasiekti.

Failo pavadinimasOriginalus PNGSuspaustas PNG„WebP“ formatasDydžio skirtumas%
„png-to-webp-1.png“44 KB34 KB30 KB32 proc.
png-į-webp-2.png46 KB35 KB33 KB28 proc.
„png-to-webp-3.png“43 KB31 KB25 KB42 proc.
„png-to-webp-4.png“30 KB24 KB18 KB40 proc.
„png-to-webp-5.png“15 KB11 KB8 KB47 proc.
„png-to-webp-6.png“34 KB24 KB18 KB47 proc.
„png-to-webp-7.png“15 KB13 KB8 KB47 proc.
„png-to-webp-8.png“63 KB47 KB44 KB30 proc.
„png-to-webp-9.png“48 KB36 KB33 KB31 proc.
„png-to-webp-10.png“17 KB14 KB11 KB35 proc.
„png-to-webp-11.png“18 KB13 KB9 KB50 proc.
png-į-webp-12.png61 KB45 KB39 KB36 proc.
png-į-webp-13.png32 KB25 KB21 KB35 proc.
png-į-webp-14.png26 KB21 KB17 KB35 proc.
png-į-webp-15.png14 KB12 KB9 KB36 proc.
png-į-webp-16.png36 KB27 KB24 KB33 proc.
png-į-webp-17.png14 KB12 KB8 KB43 proc.
png-į-webp-18.png21 KB18 KB13 KB38 proc.
png-į-webp-19.png42 KB30 KB27 KB36 proc.
png-į-webp-20.png23 KB20 KB18 KB22 proc.

WebP rezultatas: Vidutinis vaizdo dydis sumažėjo 42,8%.

Santrauka

Kaip matote, „WebP“ labai lengva įdiegti savo „WordPress“ svetainėje ir galite pasiekti drastiškai mažesnius vaizdo failų dydžius! Nėra vaizdo suglaudinimo, kurį būtų galima palyginti su sutaupytomis „WebP“. O, ar mes paminėjome, kad „WebP“ gali naudoti nuostolingą glaudinimą? Tai reiškia, kad nepamatysite pastebimo kokybės praradimo. Jei ieškote geresnio „WordPress“ pagreitinimo būdo, „WebP“ gali būti puikus sprendimas.

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