Sådan bruges WebP-filer i WordPress og formindsk sideindlæsningstider

webp-filer wordpress

De fleste af os ved nu, at billedoptimering er meget vigtig, da det spiller en enorm rolle i den samlede belastningstid på dit WordPress-websted. I dag vil vi dele med dig et let alternativ til, hvordan du integrerer Googles WebP-filer på dit WordPress-sted. Nogle brugere har set billedstørrelsesreduktioner på over 70%!


Hvad er WebP?

Hvis du ikke er bekendt med WebP, det er et billedfilformat oprettet af webpræstationsholdet hos Google med det formål at oprette billeder, der er mindre og hurtigere. Det blev første gang annonceret i 2010 og indeholder både tabse- og tabsfri komprimeringsmetoder. Billederne leveres til webbrowseren fra en webserver baseret på den MIME-type, den bruger, som er image / WebP.

WebP-tabsfrie billeder er 26% mindre i størrelse sammenlignet med PNG’er og WebP-tabte billeder er 25-34% mindre end JPEG’er.

Virksomheder som YouTube og eBay bruger allerede WebP til lydløst at drive en masse af deres websteder. Nedenfor er et eksempel fra eBay, hvor de på deres hjemmeside i gennemsnit ca. 30 WebP-filer.

webp-brug ebay

Hvorfor er WebP så vigtig? Ifølge httparchive, fra august 2016, billeder tegner sig for over 64% af en gennemsnitlig websides vægt. Det er typisk mere end din CSS, JS og HTML kombineret. Så det er vigtigt at vælge en robust billedoptimeringsmetode og billedformat som WebP, så du kan reducere din sidevægt så meget som muligt. Generelt er, at jo mindre din side er, jo hurtigere indlæses den. Og det glæder ikke kun dine besøgende, men også Google, som sidehastighed er en rangeringsfaktor.

WebP-support

Selvom WebP er meget spændende, er det også vigtigt at nævne browserstøtte. Ikke alle moderne browsere understøtter WebP i øjeblikket. Ifølge kan jeg bruge, WebP understøttes i øjeblikket i Chrome 23+, Opera 39+, alle versioner af Opera mini, Android browser 4.3+ og Chrome til Android.

webp browser support

Men vent! Bliv ikke for skuffet, for i den tutorial, vi viser dig nedenfor, er der en metode til leverer WebP-filer til understøttede browsere og JPG / PNGs som et tilbagefald. Det betyder, at browsere, der ikke understøttes, ikke kan se et ødelagt billede, de vil bare se, hvad de så før. Tænk på WebP som en tilføjelse til dit WordPress-sted i stedet for en migrering.

Ifølge W3Schools, Chrome har monopolet på browsermarkedsandelen på lidt over 70%. Men tag ikke bare markedsandele som et solidt bevis, se på dataene fra dine egne besøgende og se, hvilke browsere de bruger, da det kan variere baseret på din niche. Du kan dog blive overrasket over hvor skæv statistikken er. I Google Analytics under “Målgruppe” kan du klikke på “Browser & OS” og se, hvilke browsere folk bruger, når de rammer dit websted. Vi trak et tilfældigt websted, og som du kan se nedenfor, er 67% af besøgende fra Chrome og yderligere 1% fra Opera. Så 68% af disse mennesker kan se og drage fordel af WebP billedfilformat!

browsere chrome webp

Sådan bruges WebP-filer i WordPress

I dagens eksempel vil vi bruge en kombination af to forskellige WordPress-plugins til at få WebP i gang i WordPress. Disse oprettes og udvikles af teamet over på KeyCDN, som er et globalt indholdsleveringsnetværk (CDN).

  1. [præmie] Optimus Image Optimizer: Tab uden plug-in til komprimering til WordPress, konverterer billeder til WebP
  2. [gratis] WordPress Cache Enabler: Cache-plugin, som giver dig mulighed for at tjene WebP til understøttede browsere

Optimus Image Optimizer

Du kan downloade Optimus Image Optimizer fra WordPress-arkiv, fra optimus.io, eller fra dit plugin-dashboard. Bemærk: Det kræver en premium-licens, hvis du vil konvertere dine billeder til WebP. Når det er installeret, kan du aktivere “Oprettelse af WebP-filer” i plugin-indstillingerne.

oprettelse af webp-filer

Når WebP er aktiveret, opretter dette i det væsentlige et ekstra billede til alt, hvad der konverteres. Så hvis du uploader en PNG-fil eller JPG, er der nu også en .webp-version af dit billede. Husk, at PNG / JPG stadig er nødvendig, fordi disse stadig bruges til at tjene til ikke-understøttede browsere. Optimus udfører tabsfri komprimering, så dine PNG og JPG’er komprimeres også.

webp og png filer

Der er også en bulkoptimeringsindstilling, hvis du allerede har komprimeret dine billeder før og stadig har brug for at konvertere dem til WebP.

bulk image optimizer

WordPress Cache Enabler

Så nu, hvor du har WebP-billeder, har du brug for en måde til at fortælle WordPress at servere WebP-billeder til understøttede browsere og PNG / JPG til de andre browsere. Dette kan udføres med det gratis WordPress Cache Enabler-plugin. Du kan downloade plugin fra WordPress-arkiv eller installer det fra dit plugin-dashboard. Når det er installeret, kan du aktivere “Opret en ekstra WebP cache-version” i plugin-indstillingerne.

cache-aktiveringsindstillinger

Når du har aktiveret denne mulighed, oprettes en ekstra cache-webP-version af din side.webp versioner

Og det er det! Nu skal du have WebP-filer, der kører på dit WordPress-websted.

JPG til WebP-sammenligning

Vi foretog en sammenligning af JPG til WebP for at vise de forskelle, du kan opnå.

FILNAVNORIGINAL JPGKOMPRIMERET JPGWEBP FORMATSTØRRINGSFERSKIL%
jpg-til-WebP-1.jpg758 KB685 KB109 KB86%
jpg-til-WebP-2.jpg599 KB529 KB58,8 KB90%
jpg-til-WebP-3.jpg960 KB881 KB200 KB79%
jpg-til-WebP-4.jpg862 KB791 KB146 KB83%
jpg-til-WebP-5.jpg960 KB877 KB71,7 KB93%

WebP resulterede i en 85,87% fald i gennemsnitlig billedstørrelse.

PNG til WebP-sammenligning

Igen kørte vi også en sammenligning af PNG til WebP for at vise de forskelle, du kan opnå.

FilnavnOriginal PNGkomprimeret PNGWebP-formatStørrelsesforskel%
png-til-WebP-1.png44 KB34 KB30 KB32%
png-til-WebP-2.png46 KB35 KB33 KB28%
png-til-WebP-3.png43 KB31 KB25 KB42%
png-til-WebP-4.png30 KB24 KB18 KB40%
png-til-WebP-5.png15 KB11 KB8 KB47%
png-til-WebP-6.png34 KB24 KB18 KB47%
png-til-WebP-7.png15 KB13 KB8 KB47%
png-til-WebP-8.png63 KB47 KB44 KB30%
png-til-WebP-9.png48 KB36 KB33 KB31%
png-til-WebP-10.png17 KB14 KB11 KB35%
png-til-WebP-11.png18 KB13 KB9 KB50%
png-til-WebP-12.png61 KB45 KB39 KB36%
png-til-WebP-13.png32 KB25 KB21 KB35%
png-til-WebP-14.png26 KB21 KB17 KB35%
png-til-WebP-15.png14 KB12 KB9 KB36%
png-til-WebP-16.png36 KB27 KB24 KB33%
png-til-WebP-17.png14 KB12 KB8 KB43%
png-til-WebP-18.png21 KB18 KB13 KB38%
png-til-WebP-19.png42 KB30 KB27 KB36%
png-til-WebP-20.png23 KB20 KB18 KB22%

WebP resulterede i en 42,8% fald i gennemsnitlig billedstørrelse.

Resumé

Som du kan se, er WebP meget let at implementere på dit WordPress-sted, og du kan opnå drastisk mindre billedfilstørrelser! Der er ingen billedkomprimering derude, der kan sammenligne med besparelserne ved WebP. Åh, og nævnte vi, at WebP har evnen til at bruge tabsfri komprimering? Det betyder, at du ikke vil se noget mærkbart kvalitetstab. Hvis du leder efter en bedre måde at fremskynde WordPress på, kan WebP være en god løsning.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector