Ako používať súbory WebP vo WordPress a znížiť čas načítania stránky

webp súbory wordpress

Väčšina z nás už vie, že optimalizácia obrázkov je veľmi dôležitá, pretože hrá obrovskú úlohu v celkovom zaťažení vašej webovej stránky WordPress. Dnes sa s vami chceme podeliť o jednoduchú alternatívu, ako integrovať súbory WebP spoločnosti Google do vášho webu WordPress. Niektorí používatelia zaznamenali zníženie veľkosti obrazových súborov o viac ako 70%!


Čo je to WebP?

Ak nie ste oboznámení WebP, je to formát obrazového súboru, ktorý vytvoril tím pre webový výkon v spoločnosti Google s cieľom vytvárať obrázky, ktoré sú menšie a rýchlejšie. Bola prvýkrát oznámená v roku 2010 a vyznačuje sa stratovou aj bezstratovou kompresiou. Obrázky sú dodávané do webového prehľadávača z webového servera na základe typu MIME, ktorý používa image / WebP.

Bezstratové obrázky WebP sú O 26% menšie v porovnaní s PNG a stratovými obrázkami WebP O 25-34% menšie ako JPEG.

Spoločnosti ako YouTube a eBay už používajú WebP na tiché napájanie mnohých svojich stránok. Nižšie je uvedený príklad z eBay, kde na svojej domovskej stránke v priemere predstavuje okolo 30 súborov WebP.

používanie webových stránok

Prečo je WebP taký dôležitý? Podľa httparchive, od augusta 2016, obrázky predstavujú viac ako 64% priemernej hmotnosti webovej stránky. Zvyčajne je to viac ako kombinácia CSS, JS a HTML. Výber robustnej metódy optimalizácie obrázkov a formátu obrázkov, ako je WebP, je preto rozhodujúci, aby ste mohli čo najviac znížiť hmotnosť svojej stránky. Všeobecne platí, že čím menšia je vaša stránka, tým rýchlejšie sa načíta. A to poteší nielen vašich návštevníkov, ale aj spoločnosť Google, as rýchlosť stránky je hodnotiacim faktorom.

Podpora WebP

Teraz, keď je WebP veľmi vzrušujúci, je tiež dôležité spomenúť podporu prehliadača. Momentálne nie všetky moderné prehliadače podporujú WebP. Podľa môžem použiť, WebP je v súčasnosti podporovaný v prehliadačoch Chrome 23+, Opera 39+, vo všetkých verziách Opera mini, v prehliadači Android 4.3 a novších a Chrome pre Android.

podpora webového prehliadača

Ale počkaj! Nebuď príliš sklamaný, pretože v tutoriále, ktoré ti ukážeme nižšie, existuje metóda dodávať súbory WebP do podporovaných prehliadačov a JPG / PNG ako rezervu. To znamená, že nepodporované prehliadače neuvidia poškodený obrázok, len uvidia to, čo videli predtým. WebPat považujte skôr za dodatok k vášmu webu WordPress ako k migrácii.

Podľa W3Schools, Chrome má na trhu s prehliadačom monopol na niečo vyše 70%. Nezdieľajte však iba trhový podiel ako solídny dôkaz, pozrite sa na údaje svojich vlastných návštevníkov a pozrite sa, aké prehliadače používajú, pretože sa môže líšiť v závislosti od vášho výklenku. Možno vás však prekvapí, aké sú štatistiky skreslené. V službe Google Analytics v časti Publikum môžete kliknúť na položku Prehliadač a operačný systém a zistiť, ktoré prehliadače používajú ľudia, keď navštívia vaše stránky. Vytiahli sme náhodný web a ako vidíte nižšie, 67% návštevníkov je z prehliadača Chrome a ďalších 1% z opery. tak 68% týchto ľudí môže prehliadať web a využívať ho formát súboru obrázka!

prehliadače Chrome webp

Ako používať súbory WebP vo WordPress

V dnešnom príklade budeme používať kombináciu dvoch rôznych doplnkov WordPress, aby sme WebP spustili a spustili vo WordPress. Tieto sú vytvorené a vyvíjané tímom v KeyCDN, čo je globálna sieť na doručovanie obsahu (CDN)..

  1. [Premium] Optimus Image Optimizer: Plugin pre bezstratovú kompresiu obrázkov pre WordPress, prevádza obrázky do WebP
  2. [zadarmo] WordPress Cache Enabler: Doplnok vyrovnávacej pamäte, ktorý vám umožňuje slúžiť WebP do podporovaných prehliadačov

Optimus Image Optimizer

Optimus Image Optimizer si môžete stiahnuť z internetu Úložisko WordPress, z optimus.io, alebo z hlavného panela doplnkov. Poznámka: Vyžaduje prémiovú licenciu, ak chcete konvertovať svoje obrázky na WebP. Po inštalácii môžete povoliť „Vytváranie súborov WebP“ v nastaveniach doplnku.

tvorba webových súborov

Po povolení WebP to v podstate vytvorí ďalší obrázok pre všetko, čo sa prevádza. Ak teda odovzdáte súbor PNG alebo JPG, bude teraz k dispozícii aj vaša verzia .webp. Nezabúdajte, že PNG / JPG je stále potrebný, pretože sa stále používajú na podporu nepodporovaných prehliadačov. Optimus robí bezstratovú kompresiu, takže vaše súbory PNG a JPG sú tiež komprimované.

súbory webp a png

K dispozícii je tiež možnosť hromadného optimalizátora v prípade, že ste už obrázky predtým komprimovali a stále ich potrebujete previesť na WebP.

hromadný optimalizátor obrázkov

WordPress Cache Enabler

Takže teraz, keď máte obrázky WebP, potrebujete spôsob, ako povedať WordPress, aby zobrazoval obrázky WebP podporovaným prehliadačom a PNG / JPG ostatným prehliadačom. To je možné dosiahnuť pomocou bezplatného doplnku WordPress Cache Enabler. Doplnok si môžete stiahnuť z Úložisko WordPress alebo ho nainštalujte z hlavného panela doplnkov. Po inštalácii môžete v nastaveniach doplnku povoliť „Vytvoriť ďalšiu verziu cache uloženú na webe“.

nastavenie aktivátora vyrovnávacej pamäte

Po povolení tejto možnosti sa vytvorí ďalšia verzia webovej stránky vo vyrovnávacej pamäti.verzie webových stránok

A to je všetko! Teraz by ste mali mať na svojom webe WordPress spustené súbory WebP.

Porovnanie JPG a WebP

Urobili sme porovnanie JPG na WebP aby ste ukázali rozdiely, ktoré môžete dosiahnuť.

NÁZOV SÚBORUORIGINAL JPGstlačený JPGFORMÁT WEBPROZMER VEĽKOSTI%
jpg-to-WebP-1.jpg758 KB685 KB109 KB86%
jpg-to-WebP-2.jpg599 KB529 KB58,8 KB90%
jpg-to-WebP-3.jpg960 KB881 KB200 KB79%
jpg-to-WebP-4.jpg862 KB791 KB146 KB83%
jpg-to-WebP-5.jpg960 KB877 KB71,7 KB93%

Výsledkom WebP bolo a 85,87% zníženie priemernej veľkosti obrázka.

Porovnanie PNG a WebP

Opäť sme tiež vykonali porovnanie PNG na WebP aby ste ukázali rozdiely, ktoré môžete dosiahnuť.

Názov súboruPôvodný PNGCompressed PNGWebP FormatRozdiel v%
png-to-WebP-1.png44 KB34 KB30 KB32%
png-to-WebP-2.png46 KB35 KB33 KB28%
png-to-WebP-3.png43 KB31 KB25 KB42%
png-to-WebP-4.png30 KB24 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 KB30%
png-to-WebP-9.png48 KB36 KB33 KB31%
png-to-WebP-10.png17 KB14 KB11 KB35%
png-to-WebP-11.png18 KB13 KB9 KB50%
png-to-WebP-12.png61 KB45 KB39 KB36%
png-to-WebP-13.png32 KB25 KB21 KB35%
png-to-WebP-14.png26 KB21 KB17 KB35%
png-to-WebP-15.png14 KB12 KB9 KB36%
png-to-WebP-16.png36 KB27 KB24 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%

Výsledkom WebP bolo a 42,8% zníženie priemernej veľkosti obrázka.

zhrnutie

Ako vidíte, WebP sa na vašom webe WordPress veľmi ľahko implementuje a môžete dosiahnuť výrazne menšie veľkosti obrazových súborov! Neexistuje žiadna kompresia obrázkov, ktorá by sa dala porovnávať s úsporami WebP. Jo, a spomenuli sme, že WebP má schopnosť používať bezstratovú kompresiu? To znamená, že neuvidíte žiadne výrazné straty kvality. Ak hľadáte lepší spôsob, ako urýchliť WordPress, WebP môže byť skvelým riešením.

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