Kuinka käyttää WebP-tiedostoja WordPressissä ja lyhentää sivujen latausaikoja

webp-tiedostot WordPress

Suurin osa meistä tietää jo nyt, että kuvan optimointi on erittäin tärkeää, koska sillä on valtava osa WordPress-verkkosivustosi kokonaislatausaikoissa. Tänään haluamme jakaa kanssanne helpon vaihtoehdon kuinka integroida Googlen WebP-tiedostot WordPress-sivustoosi. Jotkut käyttäjät ovat nähneet kuvatiedostojen koon pienentyneen yli 70%!


Mikä on WebP?

Jos et tunne WebP, se on kuvatiedostomuoto, jonka web-suorituskykytiimi on luonut Googlessa tarkoituksenaan luoda pienempiä ja nopeampia kuvia. Se julkistettiin ensimmäisen kerran vuonna 2010, ja siinä on sekä häviöttömiä että häviöttömiä pakkausmenetelmiä. Kuvat toimitetaan selaimeen verkkopalvelimelta sen käyttämän MIME-tyypin perusteella, joka on image / WebP.

WebP-häviöttömät kuvat ovat 26% pienempi kooltaan PNG-tiedostoihin verrattuna ja WebP-tappiolliset kuvat ovat 25-34% pienempi kuin JPEG.

Yritykset, kuten YouTube ja eBay, käyttävät jo WebP: tä hiljaisen virran tuottamiseksi monille sivustoilleen. Alla on esimerkki eBaysta, jossa kotisivullaan he keskimäärin noin 30 WebP-tiedostoa.

webp käyttö ebay

Miksi WebP on niin tärkeä? Mukaan httparchive, elokuusta 2016 alkaen, kuvien osuus on yli 64% verkkosivun keskimääräisestä painosta. Tyypillisesti se on enemmän kuin CSS, JS ja HTML yhdessä. Joten vakaan kuvanoptimointimenetelmän ja kuvamuodon, kuten WebP, valitseminen on ratkaisevan tärkeää, jotta voit pienentää sivusi painoa mahdollisimman paljon. Yleensä, mitä pienempi sivu on, sitä nopeammin se latautuu. Ja se miellyttää vierailijoidesi lisäksi myös Googlea sivun nopeus on sijoituskerroin.

WebP-tuki

Nyt kun WebP on erittäin jännittävä, on tärkeää mainita myös selaimen tuki. Kaikki nykyaikaiset selaimet eivät tue WebP: tä tällä hetkellä. Mukaan Voinko käyttää, WebP: tä tuetaan tällä hetkellä Chrome 23+: ssä, Opera 39+: ssä, kaikissa Opera mini -versioissa, Android-selaimessa 4.3+ ja Chrome Androidille.

webp-selaimen tuki

Mutta odota! Älä ole liian pettynyt, koska alla olevassa opetusohjelmassa on menetelmä, jolla toimittaa WebP-tiedostoja tuetuille selaimille ja JPG / PNG-tiedostoille varana. Tämä tarkoittaa, että tukemattomat selaimet eivät näe rikki kuvaa, ne vain näkevät sen, mitä he olivat nähneet aiemmin. Ajattele WebP: tä WordPress-sivustosi lisäyksenä siirron sijaan.

Mukaan W3Schools, Chromen monopoli selaimen markkinaosuudella on hiukan yli 70%. Mutta älä ota vain markkinaosuutta vankkana todisteena, katso omien kävijöidesi tietoja ja katso mitä selaimia he käyttävät, koska ne saattavat vaihdella kapeallasi. Saatat olla yllättynyt siitä, kuinka vinoina ovat tilastot. Google Analyticsissa ”Yleisö” -kohdassa voit napsauttaa ”Selain ja käyttöjärjestelmä” ja nähdä, mitä selaimia ihmiset käyttävät, kun he ostavat sivustoosi. Vedimme satunnaisen verkkosivuston ja kuten alla näet, 67% kävijöistä on Chromesta ja 1% Opera. Niin 68% näistä ihmisistä voi tarkastella WebP: tä ja hyötyä siitä kuvatiedostomuoto!

selaimet chrome webp

Kuinka käyttää WebP-tiedostoja WordPressissä

Nykyisessä esimerkissä aiomme käyttää kahden eri WordPress-laajennuksen yhdistelmää saadaksesi WebP käyttöön ja ajamaan WordPressissä. Ne on luonut ja kehittänyt KeyCDN-ryhmä, joka on maailmanlaajuinen sisällönjakeluverkko (CDN)..

  1. [Palkkio] Optimus Image Optimizer: Häviötön WordPress-kuvien pakkaamislaajennus muuntaa kuvat WebP: ksi
  2. [vapaa] WordPress-välimuistin käyttöönotto: Välimuistilaajennus joka antaa sinun palvella WebP: tä tuetuille selaimille

Optimus Image Optimizer

Voit ladata Optimus Image Optimizer -sovelluksen WordPress-arkisto, alkaen optimus.io, tai laajennuksen hallintapaneelista. Huomaa: Se vaatii premium-lisenssin, jos haluat muuntaa kuvat WebP: ksi. Asennuksen jälkeen voit ottaa käyttöön ”WebP-tiedostojen luonti” laajennuksen asetuksissa.

webp-tiedostojen luominen

Kun WebP on otettu käyttöön, tämä luo olennaisesti lisäkuvan kaikelle muunnetulle. Joten jos lataat PNG-tiedoston tai JPG-tiedoston, kuvastasi on nyt myös .webp-versio. Muista, että PNG / JPG-tiedostoja tarvitaan edelleen, koska niitä käytetään edelleen tukemaan selaimia, joita ei tueta. Optimus tekee häviötöntä pakkausta, joten myös PNG- ja JPG-pakkauksesi ovat pakattuja.

webp- ja png-tiedostot

On olemassa myös joukko-optimointivaihtoehto, jos olet jo pakattu kuvat aiemmin ja joudut vielä muuntamaan ne WebP: ksi.

joukkokuvan optimoija

WordPress-välimuistin käyttöönotto

Joten nyt, kun sinulla on WebP-kuvia, tarvitset tavan, jolla WordPress kerrotaan tarjoamaan WebP-kuvia tuetuille selaimille ja PNG / JPG muille selaimille. Tämä voidaan suorittaa ilmaisella WordPress Cache Enabler -laajennuksella. Voit ladata laajennuksen WordPress-arkisto tai asenna se laajennuksen hallintapaneeliin. Asennuksen jälkeen voit ottaa käyttöön ”Luo ​​uusi WebP-välimuistiversio” plugin-asetuksissa.

välimuistin asetusasetukset

Kun olet ottanut tämän vaihtoehdon käyttöön, sivullesi luodaan välimuistissa oleva uusi WebP-versio.webp-versiot

Ja siinä se on! Nyt WebP-tiedostojen pitäisi olla käynnissä WordPress-verkkosivustollasi.

JPG WebP -vertailu

Me vertasimme JPG WebP: lle näyttää eroja, jotka voit saavuttaa.

TIEDOSTON NIMIORIGINAL JPGPURISTETTU JPGWEBP-MUOTOKOKONAISUUS%
jpg-to-WebP-1.jpg758 KB685 kt109 kt86%
jpg-to-WebP-2.jpg599 kt529 kt58,8 KB90%
jpg-to-WebP-3.jpg960 kt881 kt200 kt79%
jpg-to-WebP-4.jpg862 kt791 kt146 kt83%
jpg-to-WebP-5.jpg960 kt877 kt71,7 KB93%

WebP johti a Keskimääräisen kuvan koon pienentyminen 85,87%.

PNG: n WebP-vertailu

Jälleen suoritimme vertailun PNG WebP: lle näyttää eroja, jotka voit saavuttaa.

Tiedoston nimiAlkuperäinen PNGPakattu PNGWebP-muotoKokoero%
png-to-WebP-1.png44 kt34 KB30 KB32%
png-to-WebP-2.png46 kt35 KB33 KB28%
png-to-WebP-3.png43 KB31 KB25 KB42%
png-to-WebP-4.png30 kt24 KB18 KB40%
png-to-WebP-5.png15 KB11 KB8 KB47%
png-to-WebP-6.png34 KB24 KB18 KB47%
png-to-WebP-7.png15 KB13 KB8 KB47%
png-to-WebP-8.png63 KB47 KB44 kt30%
png-to-WebP-9.png48 KB36 kt33 KB31%
png-to-WebP-10.png17 KB14 KB11 KB35%
png-to-WebP-11.png18 kt13 KB9 KB50%
png-to-WebP-12.png61 KB45 kt39 KB36%
png-to-WebP-13.png32 kt25 KB21 KB35%
png-to-WebP-14.png26 KB21 KB17 KB35%
png-to-WebP-15.png14 KB12 KB9 KB36%
png-to-WebP-16.png36 KB27 kt24 KB33%
png-to-WebP-17.png14 KB12 KB8 KB43%
png-to-WebP-18.png21 KB18 KB13 KB38%
png-to-WebP-19.png42 KB30 KB27 KB36%
png-to-WebP-20.png23 KB20 KB18 KB22%

WebP johti a Kuvan keskikoko pieneni 42,8%.

Yhteenveto

Kuten näette, WebP on erittäin helppo ottaa käyttöön WordPress-sivustossasi ja voit saavuttaa huomattavasti pienemmät kuvatiedostot! Siellä ei ole kuvan pakkaamista, jota voitaisiin verrata WebP: n säästöihin. Voi, ja mainitsimmeko, että WebP pystyy käyttämään häviötöntä pakkausta? Tämä tarkoittaa, että et näe mitään huomattavaa laadun heikkenemistä. Jos etsit parempaa tapaa nopeuttaa WordPressiä, WebP voi olla hyvä ratkaisu.

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