Hur man använder WebP-filer i WordPress och minskar sidbelastningstider

webp-filer wordpress

De flesta av oss vet nu att bildoptimering är mycket viktig eftersom den spelar en enorm roll i de totala belastningstiderna på din WordPress-webbplats. Idag vill vi dela med dig ett enkelt alternativ till hur du integrerar Googles WebP-filer på din WordPress-webbplats. Vissa användare har sett minskningar av bildstorleken på över 70%!


Vad är WebP?

Om du inte är bekant med WebP, det är ett bildfilformat som skapas av webbprestandateamet hos Google med avsikt att skapa bilder som är mindre och snabbare. Det tillkännagavs första gången 2010 och har både förlustfria och förlustfria komprimeringsmetoder. Bilderna levereras till webbläsaren från en webbserver baserad på den MIME-typ den använder som är bild / webp.

WebP-förlustfria bilder är 26% mindre i storlek jämfört med PNG: er och WebP förlorade bilder är 25-34% mindre än JPEG.

Företag som YouTube och eBay använder redan WebP för att tyst driva många av sina webbplatser. Nedan följer ett exempel från eBay, där de på deras hemsida i genomsnitt har cirka 30 WebP-filer.

webbanvändning ebay

Varför är WebP så viktigt? Enligt httparchive, från augusti 2016, bilder står för över 64% av en genomsnittlig webbs vikt. Vanligtvis är det mer än dina CSS, JS och HTML kombinerade. Så att välja en robust bildoptimeringsmetod och bildformat som WebP är avgörande så att du kan minska sidvikten så mycket som möjligt. Generellt är att ju mindre din sida är desto snabbare laddas den. Och det kommer inte bara dina besökare utan också Google att glädja sig sidhastighet är en rankningsfaktor.

WebP-support

Medan WebP är mycket spännande är det också viktigt att nämna webbläsarsupport. Inte alla moderna webbläsare stöder WebP just nu. Enligt kan jag använda, WebP stöds för närvarande i Chrome 23+, Opera 39+, alla versioner av Opera mini, Android-webbläsare 4.3+ och Chrome för Android.

webp webbläsarsupport

Men vänta! Bli inte alltför besviken, för det finns en metod i den handledning vi ska visa dig nedan leverera WebP-filer till webbläsare som stöds och JPG / PNG: er som en fallback. Detta innebär att webbläsare som inte stöds inte ser en trasig bild, de kommer bara att se vad de såg tidigare. Tänk på WebP som ett tillägg till din WordPress-webbplats, snarare som en migrering.

Enligt W3Schools, Chrome har monopolet på webbläsarens marknadsandel på drygt 70%. Men ta inte bara marknadsandelar som ett fast bevis, titta på dina egna besökares data och se vilka webbläsare de använder, eftersom det kan skilja sig utifrån din nisch. Du kanske blir förvånad över hur sned statistiken är. I Google Analytics under “Audience” kan du klicka på “Browser & OS” och se vilka webbläsare folk använder när de träffar din webbplats. Vi tog en slumpmässig webbplats och som ni kan se nedan är 67% av besökarna från Chrome och ytterligare 1% från Opera. Så 68% av dessa människor kan se och dra nytta av WebP bildfilformat!

webbläsare kromwebp

Hur man använder WebP-filer i WordPress

I dagens exempel kommer vi att använda en kombination av två olika WordPress-plugins för att få WebP igång i WordPress. Dessa skapas och utvecklas av teamet vid KeyCDN, som är ett globalt nätverk för leverans av innehåll (CDN).

  1. [premie] Optimus Image Optimizer: Förlustfri bildkomprimeringsplugin för WordPress, konverterar bilder till WebP
  2. [fri] WordPress Cache Enabler: Caching-plugin som låter dig tjäna WebP till webbläsare som stöds

Optimus Image Optimizer

Du kan ladda ner Optimus Image Optimizer från WordPress-arkivet, från optimus.io, eller från din plugin-instrumentbräda. Obs: Det krävs en premiumlicens om du vill konvertera dina bilder till WebP. När installationen är installerad kan du aktivera “Skapa WebP-filer” i insticksinställningarna.

skapande av webp-filer

När WebP är aktiverat skapar detta i huvudsak en extra bild för allt som konverteras. Så om du laddar upp en PNG-fil eller JPG finns det nu också en .webp-version av din bild. Kom ihåg att PNG / JPG fortfarande behövs eftersom dessa används fortfarande för att tjäna till webbläsare som inte stöds. Optimus gör förlustfri komprimering, så dina PNG och JPG är också komprimerade.

webp- och png-filer

Det finns också ett alternativ för bulkoptimering om du redan har komprimerat dina bilder tidigare och fortfarande behöver konvertera dem till WebP.

bulkbildoptimerare

WordPress Cache Enabler

Så nu när du har WebP-bilder behöver du ett sätt att säga WordPress att servera WebP-bilder till webbläsare som stöds och PNG / JPG till andra webbläsare. Detta kan åstadkommas med den kostnadsfria WordPress Cache Enabler-plugin. Du kan ladda ner plugin från WordPress-arkivet eller installera det från din plugin-instrumentbräda. När installationen är installerad kan du aktivera “Skapa en ytterligare cache-version av WebP” i inställningarna för plugin.

cache-aktiveringsinställningar

När du aktiverar det alternativet skapas en extra cachelagrad WebP-version av din sida.webbp-versioner

Och det är det! Nu bör du ha WebP-filer som körs på din WordPress-webbplats.

JPG till WebP-jämförelse

Vi gjorde en jämförelse av JPG till WebP för att visa de skillnader du kan uppnå.

FILNAMNORIGINAL JPGKOMPRIMERAD JPGWEBPFORMATSTORLEKSFÖRSLAG%
jpg-till-webp-1.jpg758 KB685 kB109 kB86%
jpg-till-webp-2.jpg599 kB529 kB58,8 KB90%
jpg-till-webp-3.jpg960 KB881 kB200 kB79%
jpg-till-webp-4.jpg862 kB791 kB146 kB83%
jpg-till-webp-5.jpg960 KB877 KB71,7 kB93%

WebP resulterade i en 85,87% minskning i genomsnittlig bildstorlek.

PNG till WebP-jämförelse

Återigen har vi också jämfört PNG till WebP för att visa de skillnader du kan uppnå.

FilnamnOriginal PNGkomprimerad PNGWebP-formatStorleksskillnad%
png-till-webp-1.png44 kB34 KB30 KB32%
png-till-webp-2.png46 kB35 KB33 KB28%
png-till-webp-3.png43 KB31 KB25 KB42%
png-till-webp-4.png30 kB24 KB18 KB40%
png-till-webp-5.png15 KB11 KB8 KB47%
png-till-webp-6.png34 KB24 KB18 KB47%
png-till-webp-7.png15 KB13 KB8 KB47%
png-till-webp-8.png63 KB47 KB44 kB30%
png-till-webp-9.png48 KB36 KB33 KB31%
png-till-webp-10.png17 KB14 KB11 KB35%
png-till-webp-11.png18 kB13 KB9 KB50%
png-till-webp-12.png61 KB45 kB39 KB36%
png-till-webp-13.png32 KB25 KB21 KB35%
png-till-webp-14.png26 KB21 KB17 KB35%
png-till-webp-15.png14 KB12 KB9 KB36%
png-till-webp-16.png36 KB27 kB24 KB33%
png-till-webp-17.png14 KB12 KB8 KB43%
png-till-webp-18.png21 KB18 KB13 KB38%
png-till-webp-19.png42 KB30 KB27 KB36%
png-till-webp-20.png23 KB20 KB18 KB22%

WebP resulterade i en 42,8% minskning i genomsnittlig bildstorlek.

Sammanfattning

Som ni ser är WebP väldigt enkelt att implementera på din WordPress-webbplats och du kan uppnå drastiskt mindre bildfilstorlekar! Det finns ingen bildkomprimering där ute som kan jämföra besparingarna med WebP. Åh, och nämnde vi att WebP har förmågan att använda förlustfri komprimering? Det betyder att du inte ser någon märkbar kvalitetsförlust. Om du letar efter ett bättre sätt att påskynda WordPress kan WebP vara en bra lösning.

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