Cum să utilizați fișiere WebP în WordPress și să reduceți timpii de încărcare a paginii

fișiere webp wordpress

Cei mai mulți dintre noi știm până acum că optimizarea imaginii este foarte importantă, deoarece joacă un rol imens în timpul total de încărcare a site-ului dvs. WordPress. Astăzi vrem să vă împărtășim o alternativă ușoară cu privire la modul de integrare a fișierelor WebP Google în site-ul dvs. WordPress. Unii utilizatori au observat reduceri ale dimensiunii fișierelor de imagine cu peste 70%!


Ce este WebP?

Dacă nu vă familiarizați WebP, este un format de fișier imagine creat de echipa de performanță web la Google cu intenția de a crea imagini mai mici și mai rapide. A fost anunțat pentru prima dată în 2010 și include metode de compresie fără pierderi și fără pierderi. Imaginile sunt livrate browser-ului web de pe un server web bazat pe tipul MIME pe care îl folosește image / WebP.

Imaginile fără pierderi WebP sunt 26% mai mic în mărime în comparație cu PNG-urile și imaginile cu pierderi WebP Cu 25-34% mai mici decât JPEG-urile.

Companii precum YouTube și eBay folosesc deja WebP pentru a-și alimenta în mod silențios multe site-uri. Mai jos este un exemplu de pe eBay, unde pe pagina lor de pornire sunt în medie aproximativ 30 de fișiere WebP.

utilizare webp ebay

De ce este atât de important WebP? Conform httparchive, din august 2016, imaginile reprezintă peste 64% din greutatea medie a unei pagini web. De obicei, este mai mult decât CSS, JS și HTML combinate. Așadar, alegerea unei metode robuste de optimizare a imaginii și a formatului de imagine, cum ar fi WebP, este esențială astfel încât să puteți reduce greutatea paginii dvs. cât mai mult posibil. În general, cu cât pagina dvs. este mai mică, cu atât se va încărca mai repede. Și asta va mulțumi nu numai vizitatorii dvs., ci și Google, ca atare viteza paginii este un factor de clasare.

Asistență WebP

În timp ce WebP este foarte interesant, este important să menționăm și suportul pentru browser. Nu toate browserele moderne acceptă WebP în acest moment. Conform pot folosi, În prezent, WebP este acceptat în Chrome 23+, Opera 39+, toate versiunile Opera mini, browserul Android 4.3+ și Chrome pentru Android.

suport pentru browser webp

Dar asteapta! Nu vă dezamăgi prea mult, deoarece în tutorialul pe care îl vom arăta mai jos, există o metodă de a face acest lucru livrați fișiere WebP către browsere și JPG / PNG-uri acceptate ca o defalcare. Acest lucru înseamnă că browserele neacceptate nu văd o imagine spartă, ei vor vedea doar ce vedeau înainte. Gândiți-vă la WebP ca la un plus la site-ul dvs. WordPress, și nu la o migrare.

Conform W3Schools, Chrome are monopolul pe cota de piață a browserului cu puțin peste 70%. Dar nu luați doar cota de piață ca dovadă solidă, uitați-vă la datele propriilor dvs. vizitatori și vedeți ce browsere folosesc, deoarece ar putea diferi în funcție de nișa dvs. S-ar putea să fii surprins de cât de stricate sunt statisticile. În Google Analytics, în secțiunea „Audiență”, puteți da clic pe „Browser și sistem de operare” și puteți vedea ce browsere utilizează oamenii când vă accesează site-ul. Am scos un site aleatoriu și după cum puteți vedea mai jos, 67% dintre vizitatori sunt din Chrome și încă 1% din Opera. Asa de 68% dintre aceste persoane pot vedea și beneficia de WebP format de fișier imagine!

browsere Chrome webp

Cum să utilizați fișiere WebP în WordPress

În exemplul de astăzi, vom folosi o combinație de două plugin-uri WordPress diferite pentru a pune în funcțiune WebP-ul în WordPress. Acestea sunt create și dezvoltate de echipa de la KeyCDN, care este o rețea globală de livrare de conținut (CDN).

  1. [Premium] Optimus Image Optimizer: Plugin-ul de comprimare a imaginilor fără pierderi pentru WordPress, transformă imaginile în WebP
  2. [liber] WordPress Cache Enabler: Cache plugin care vă permite să serviți WebP la browserele acceptate

Optimus Image Optimizer

Puteți descărca Optimus Image Optimizer din Depozitul WordPress, din optimus.io, sau din interiorul tabloului de bord al pluginului. Notă: necesită o licență premium dacă doriți să convertiți imaginile în WebP. Odată instalat, puteți activa „Crearea fișierelor WebP” în setările pluginului.

crearea de fișiere webp

După activarea WebP, aceasta creează în esență o imagine suplimentară pentru tot ceea ce este convertit. Deci, dacă încărcați un fișier PNG sau JPG, există acum și o versiune .webp a imaginii dvs. Amintiți-vă, PNG / JPG este încă necesar, deoarece acestea sunt încă utilizate pentru a servi browserelor neacceptate. Optimus face compresie fără pierderi, astfel încât PNG-urile și JPG-urile sunt de asemenea comprimate.

fișiere webp și png

Există, de asemenea, o opțiune de optimizare a volumului, în cazul în care ați deja comprimat imaginile înainte și mai trebuie să le convertiți în WebP.

optimizator de imagine în vrac

WordPress Cache Enabler

Deci, acum că aveți imagini WebP, aveți nevoie de o modalitate de a spune WordPress să servească imagini WebP pentru browserele acceptate și PNG / JPG către celelalte browsere. Acest lucru poate fi realizat cu ajutorul pluginului gratuit pentru programul WordPress Cache Enabler. Puteți descărca pluginul din Depozitul WordPress sau instalați-l din tabloul de bord al pluginului. Odată instalat, puteți activa „Creați o versiune suplimentară Web cache” în setările pluginului.

setări pentru setarea cache-ului

După ce activați această opțiune, se creează o versiune WebP suplimentară în cache a paginii dvs..versiuni webp

Și asta este! Acum ar trebui să aveți fișiere WebP care rulează pe site-ul dvs. WordPress.

Comparație JPG cu WebP

Am efectuat o comparație între JPG către WebP pentru a arăta diferențele pe care le poți atinge.

NUME DE FIȘIERORIGINAL JPGCOMPRIMAT JPGFORMATUL WEBPDIFERENȚA MĂRZIRII%
jpg-la-WebP-1.jpg758 KB685 KB109 KB86%
jpg-la-WebP-2.jpg599 KB529 KB58,8 KB90%
jpg-la-WebP-3.jpg960 KB881 KB200 KB79%
jpg-la-WebP-4.jpg862 KB791 KB146 KB83%
jpg-la-WebP-5.jpg960 KB877 KB71,7 KB93%

WebP a rezultat în Scădere cu 85,87% în dimensiunea medie a imaginii.

Comparație PNG cu WebP

Din nou, am efectuat și o comparație cu PNG către WebP pentru a arăta diferențele pe care le poți atinge.

Nume de fișierPNG originalcomprimat PNGFormat WebPDiferența de mărime%
png-la-WebP-1.png44 KB34 KB30 KB32%
png-la-WebP-2.png46 KB35 KB33 KB28%
png-la-WebP-3.png43 KB31 KB25 KB42%
png-la-WebP-4.png30 KB24 KB18 KB40%
png-la-WebP-5.png15 KB11 KB8 KB47%
png-la-WebP-6.png34 KB24 KB18 KB47%
png-la-WebP-7.png15 KB13 KB8 KB47%
png-la-WebP-8.png63 KB47 KB44 KB30%
png-la-WebP-9.png48 KB36 KB33 KB31%
png-la-WebP-10.png17 KB14 KB11 KB35%
png-la-WebP-11.png18 KB13 KB9 KB50%
png-la-WebP-12.png61 KB45 KB39 KB36%
png-la-WebP-13.png32 KB25 KB21 KB35%
png-la-WebP-14.png26 KB21 KB17 KB35%
png-la-WebP-15.png14 KB12 KB9 KB36%
png-la-WebP-16.png36 KB27 KB24 KB33%
png-la-WebP-17.png14 KB12 KB8 KB43%
png-la-WebP-18.png21 KB18 KB13 KB38%
png-la-WebP-19.png42 KB30 KB27 KB36%
png-la-WebP-20.png23 KB20 KB18 KB22%

WebP a rezultat în Reducerea cu 42,8% a dimensiunii medii a imaginii.

rezumat

După cum vedeți, WebP este foarte ușor de implementat pe site-ul dvs. WordPress și puteți realiza dimensiuni de fișiere de imagine drastic mai mici! Nu există o compresie de imagini acolo care să poată compara cu economiile de WebP. Oh, și am menționat că WebP are capacitatea de a utiliza compresia fără pierderi? Asta înseamnă că nu veți vedea nicio pierdere notabilă de calitate. Dacă sunteți în căutarea unei modalități mai bune de a grăbi WordPress, WebP poate fi o soluție excelentă.

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