Com utilitzar els fitxers WebP a WordPress i disminuir els temps de càrrega de la pàgina

fitxers web wordpress

La majoria de nosaltres ja sabem que l’optimització d’imatges és molt important, ja que té un paper important en el temps de càrrega total del vostre lloc web de WordPress. Avui volem compartir una alternativa senzilla sobre com integrar els fitxers WebP de Google al vostre lloc de WordPress. Alguns usuaris han vist reduccions de mida del fitxer d’imatges de més del 70%!


Què és WebP?

Si no coneixeu WebP, és un format d’arxiu d’imatges creat per l’equip de rendiment web a Google amb la intenció de crear imatges més petites i més ràpides. Es va anunciar per primera vegada el 2010 i inclou mètodes de compressió tant pèrdues com sense pèrdues. Les imatges s’entreguen al navegador web des d’un servidor web en funció del tipus MIME que utilitza imatge / webp.

Són imatges sense pèrdues de WebP Un 26% més petit de mida en comparació amb PNGs i amb imatges amb pèrdues WebP Un 25-34% més petit que JPEGs.

Empreses com YouTube i eBay ja utilitzen WebP per alimentar silenciosament molts dels seus llocs. A continuació, es mostra un exemple d’eBay, on a la pàgina principal porten una mitjana d’uns 30 fitxers WebP.

ús webp ebay

Per què és tan important la webP? Segons httparchive, a l’agost de 2016, les imatges representen més del 64% del pes mitjà d’una pàgina web. Normalment és més que el CSS, JS i HTML combinat. Per tant, és fonamental triar un mètode robust d’optimització d’imatges i un format d’imatge, com ara WebP, de manera que pugueu disminuir el màxim pes de la vostra pàgina. Generalment, com més petita sigui la vostra pàgina, més ràpid es carregarà. I això agradarà no només als vostres visitants, sinó també a Google la velocitat de la pàgina és un factor de rànquing.

Suport WebP

Ara bé, mentre que el WebP és molt emocionant, també és important esmentar l’assistència del navegador. No tots els navegadors moderns admeten el WebP actualment. Segons caniuse, Actualment, WebP és compatible amb Chrome 23+, Opera 39+, totes les versions d’Opera mini, navegador Android 4.3+ i Chrome per a Android.

assistència del navegador webp

Però espera! No us decebeu massa, perquè al tutorial us mostrem a continuació, hi ha un mètode per fer-ho lliurar fitxers WebP a navegadors i JPG / PNG compatibles com a reserva. Això vol dir que els navegadors no compatibles no veuran una imatge trencada, només veuran el que veien abans. Penseu en WebP com a una addició al vostre lloc de WordPress en lloc d’una migració.

Segons W3Schools, Chrome té el monopoly sobre la quota de mercat del navegador a poc més del 70%. Però no tingueu només la quota de mercat com a prova sòlida, mireu les dades dels vostres visitants i vegeu quins navegadors utilitzen, ja que poden diferir segons el vostre nínxol. Potser us sorprengueu de la magnitud de les estadístiques. A Google Analytics, a “Públic”, podeu fer clic a “Navegador i sistema operatiu” i veure quins navegadors fan servir els usuaris quan arriben al vostre lloc. Vam treure un lloc web aleatori i, com podeu veure a continuació, el 67% dels visitants són de Chrome i un altre 1% d’ Operapera. Tan El 68% d’aquestes persones poden veure i beneficiar-se del lloc web format d’arxiu d’imatges!

navegadors Chrome webp

Com utilitzar els fitxers WebP a WordPress

A l’exemple d’avui, farem servir una combinació de dos complements diferents de WordPress per posar en funcionament el WebP a WordPress. Aquests han estat creats i desenvolupats per l’equip de KeyCDN, que és una xarxa de lliurament de contingut global (CDN)..

  1. [premium] Optimizador d’imatges Optimus: El complement de compressió d’imatges sense pèrdues per a WordPress, converteix les imatges a WebP
  2. [gratuït] Activador de caché de WordPress: Complement de cau que li permet servir WebP als navegadors compatibles

Optimizador d’imatges Optimus

Podeu descarregar Optimus Image Optimizer des de Dipòsit de WordPress, des de optimus.io, o des del tauler de control del vostre complement. Nota: necessita una llicència premium si voleu convertir les imatges a WebP. Un cop instal·lat, podeu habilitar la “Creació de fitxers WebP” a la configuració del complement.

creació d’arxius webp

Després d’haver activat el WebP, fonamentalment es crea una imatge addicional per a tot el que es converteixi. Així que si pengeu un fitxer PNG o JPG, ara també hi ha una versió .webp de la vostra imatge. Recordeu que el PNG / JPG encara és necessari perquè es fan servir encara per servir per a navegadors no compatibles. L’Optimus fa compressió sense pèrdues, de manera que també es comprimeixen els PNG i JPG.

arxius webp i png

També hi ha una opció d’optimitzador de massa en cas que ja hagueu comprimit les imatges abans i encara hagueu de convertir-les en WebP.

optimitzador d'imatges a granel

Activador de caché de WordPress

Així que ara que teniu imatges WebP, necessiteu una manera d’indicar a WordPress que serveixi les imatges WebP als navegadors compatibles i PNG / JPG als altres navegadors. Això es pot dur a terme amb el complement gratuït Cache Enabler de WordPress. Podeu descarregar el complement des del directori Dipòsit de WordPress o instal·leu-lo des del tauler de control del vostre complement. Un cop instal·lat, podeu activar la opció “Creeu una versió addicional de la memòria cau WebP” a la configuració del complement.

Configuració de l'aptitud de caché

Un cop hàgiu activat aquesta opció, es crearà una versió WebP en memòria cau addicional de la pàgina.versions webp

I ja ho és! Ara hauríeu de tenir fitxers WebP en funcionament al lloc web de WordPress.

Comparació de JPG a WebP

Hem fet una comparació de JPG a WebP per mostrar les diferències que podeu aconseguir.

NOM DE L’ARXIUJPG ORIGINALJPG COMPRESSATFORMAT WEBDIFERÈNCIA DE TALL%
jpg-a-webp-1.jpg758 KB685 KB109 KB86%
jpg-a-webp-2.jpg599 KB529 KB58,8 KB90%
jpg-a-webp-3.jpg960 KB881 KB200 KB79%
jpg-a-webp-4.jpg862 KB791 KB146 KB83%
jpg-a-webp-5.jpg960 KB877 KB71,7 KB93%

El lloc web va donar lloc a Disminució del 85,87% de la mida mitjana de la imatge.

Comparació PNG amb WebP

De nou, també es va fer una comparació de PNG a WebP per mostrar les diferències que podeu aconseguir.

Nom de l’arxiuPNG originalPNG comprimitFormat WebPDiferència de mida%
png-a-webp-1.png44 KB34 KB30 KB32%
png-a-webp-2.png46 KB35 KB33 KB28%
png-a-webp-3.png43 KB31 KB25 KB42%
png-a-webp-4.png30 KB24 KB18 KB40%
png-a-webp-5.png15 KB11 KB8 KB47%
png-a-webp-6.png34 KB24 KB18 KB47%
png-a-webp-7.png15 KB13 KB8 KB47%
png-a-webp-8.png63 KB47 KB44 KB30%
png-a-webp-9.png48 KB36 KB33 KB31%
png-a-webp-10.png17 KB14 KB11 KB35%
png-a-webp-11.png18 KB13 KB9 KB50%
png-a-webp-12.png61 KB45 KB39 KB36%
png-a-webp-13.png32 KB25 KB21 KB35%
png-a-webp-14.png26 KB21 KB17 KB35%
png-a-webp-15.png14 KB12 KB9 KB36%
png-a-webp-16.png36 KB27 KB24 KB33%
png-a-webp-17.png14 KB12 KB8 KB43%
png-a-webp-18.png21 KB18 KB13 KB38%
png-a-webp-19.png42 KB30 KB27 KB36%
png-a-webp-20.png23 KB20 KB18 KB22%

El lloc web va donar lloc a Disminució del 42,8% de la mida mitjana de la imatge.

Resum

Com podeu veure, WebP és molt fàcil d’implementar al vostre lloc de WordPress i podeu aconseguir mides de fitxers d’imatges dràsticament més petites. No hi ha cap compressió d’imatges que es pugui comparar amb l’estalvi del WebP. Ah, i esmentem que WebP té la capacitat d’utilitzar compressió sense pèrdues? Això vol dir que no veureu cap pèrdua de qualitat notable. Si busqueu una manera millor d’accelerar WordPress, WebP pot ser una solució excel·lent.

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