Jak používat soubory WebP ve WordPress a snižovat časy načítání stránky

webp soubory wordpress

Většina z nás již ví, že optimalizace obrazu je velmi důležitá, protože hraje obrovskou roli v celkové době načítání vašeho webu WordPress. Dnes se s vámi chceme podělit o snadnou alternativu, jak integrovat soubory WebP Google do vašeho webu WordPress. Někteří uživatelé viděli zmenšení velikosti obrazových souborů o více než 70%!


Co je to WebP?

Pokud nejste obeznámeni WebP, je to formát obrazového souboru vytvořený týmem pro webový výkon v Googlu s cílem vytvářet obrázky, které jsou menší a rychlejší. Bylo poprvé oznámeno v roce 2010 a zahrnuje jak ztrátové, tak bezeztrátové metody komprese. Obrázky jsou dodávány do webového prohlížeče z webového serveru na základě typu MIME, který používá image / webp.

Bezeztrátové obrázky WebP jsou O 26% menší ve srovnání s PNG a ztrátovými obrázky WebP O 25-34% menší než JPEG.

Společnosti jako YouTube a eBay již používají WebP k tichému napájení mnoha svých webů. Níže je uveden příklad z eBay, kde na své domovské stránce průměruje asi 30 souborů WebP.

využití webové stránky ebay

Proč je WebP tak důležitý? Podle httparchive, od srpna 2016, obrázky představují více než 64% průměrné hmotnosti webové stránky. Obvykle je to více než kombinace CSS, JS a HTML. Výběr robustní metody optimalizace obrazu a formátu obrázku, jako je WebP, je proto zásadní, abyste mohli co nejvíce snížit hmotnost své stránky. Obecně platí, že čím menší je vaše stránka, tím rychleji se načte. A to potěší nejen vaše návštěvníky, ale také Google, as rychlost stránky je faktorem hodnocení.

Podpora WebP

Nyní, když je WebP velmi vzrušující, je také důležité zmínit podporu prohlížeče. V současnosti ne všechny moderní prohlížeče podporují WebP. Podle mohu použít, WebP je aktuálně podporován v prohlížečích Chrome 23+, Opera 39+, ve všech verzích Opera mini, v prohlížeči Android 4.3+ a Chrome pro Android.

podpora webového prohlížeče

Ale počkej! Nebuďte příliš zklamaní, protože v tutoriálu vám ukážeme níže, existuje metoda dodávat soubory WebP do podporovaných prohlížečů a JPG / PNG jako záložku. To znamená, že nepodporované prohlížeče neuvidí poškozený obrázek, uvidí pouze to, co viděli dříve. Představte si WebP jako doplněk k vašemu webu WordPress, nikoli k migraci.

Podle W3Schools, Chrome má monopol na trhu s prohlížeči přes něco přes 70%. Ale neberte si pouze tržní podíl jako spolehlivý důkaz, podívejte se na data svých vlastních návštěvníků a podívejte se, jaké prohlížeče používají, protože se může lišit v závislosti na vašem výklenku. Možná vás však překvapí, jak zkreslené statistiky jsou. V Google Analytics v části Publikum můžete kliknout na položku Prohlížeč a operační systém a zjistit, jaké prohlížeče lidé používají, když narazili na váš web. Vytáhli jsme náhodný web a jak vidíte níže, 67% návštěvníků pochází z Chromu a dalších 1% z Opery. Tak 68% těchto lidí může prohlížet a využívat výhody WebP formát souboru obrázku!

prohlížeče chrom webp

Jak používat soubory WebP ve WordPress

V dnešním příkladu budeme používat kombinaci dvou různých pluginů WordPress, abychom WebP rozběhli a spustili ve WordPressu. Ty jsou vytvářeny a vyvíjeny týmem v KeyCDN, což je globální síť pro doručování obsahu (CDN).

  1. [pojistné] Optimus Image Optimizer: Plugin pro bezeztrátovou kompresi obrázků pro WordPress, převádí obrázky na WebP
  2. [volný, uvolnit] WordPress Cache Enabler: Caching plugin který vám umožní obsluhovat WebP do podporovaných prohlížečů

Optimus Image Optimizer

Optimus Image Optimizer si můžete stáhnout z internetu Úložiště WordPress, z optimus.io, nebo z ovládacího panelu pluginu. Poznámka: Chcete-li převést své obrázky na WebP, vyžaduje prémiovou licenci. Po instalaci můžete povolit „Vytvoření souborů WebP“ v nastavení pluginu.

tvorba webových souborů

Po povolení WebP to v podstatě vytvoří další obrázek pro vše, co je převedeno. Pokud tedy nahrajete soubor PNG nebo JPG, je nyní k dispozici také verze vašeho obrázku ve formátu .webp. Nezapomeňte, že PNG / JPG je stále potřebný, protože se stále používá pro obsluhu nepodporovaných prohlížečů. Optimus provádí bezeztrátovou kompresi, takže jsou také komprimovány vaše PNG a JPG.

soubory webp a png

K dispozici je také možnost hromadného optimalizátoru pro případ, že jste již obrázky komprimovali dříve a stále je potřebujete převést na webový server.

hromadný optimalizátor obrázků

WordPress Cache Enabler

Takže nyní, když máte obrázky WebP, potřebujete způsob, jak říct WordPress, aby zobrazoval obrázky WebP podporovaným prohlížečům a PNG / JPG ostatním prohlížečům. Toho lze dosáhnout pomocí bezplatného pluginu WordPress Cache Enabler. Plugin si můžete stáhnout z Úložiště WordPress nebo jej nainstalujte z ovládacího panelu pluginu. Po instalaci můžete v nastavení pluginu povolit „Vytvořit další verzi mezipaměti WebP“.

nastavení aktivátoru mezipaměti

Jakmile tuto možnost povolíte, vytvoří se další webová verze stránky uložená v mezipaměti.webové verze

A to je vše! Nyní byste měli mít na svém webu WordPress spuštěny soubory WebP.

Porovnání JPG a WebP

Provedli jsme srovnání JPG na WebP ukázat rozdíly, kterých můžete dosáhnout.

NÁZEV SOUBORUORIGINÁLNÍ JPGCOMPRESSED JPGFORMÁT WEBPROZMĚR VELIKOSTI%
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ýsledkem WebP bylo a Průměrná velikost obrázku se snížila o 85,87%.

Porovnání PNG a WebP

Opět jsme také provedli srovnání PNG na WebP ukázat rozdíly, kterých můžete dosáhnout.

Název souboruOriginální PNGStlačený PNGWebP FormatRozdíl velikosti%
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ýsledkem WebP bylo a 42,8% snížení průměrné velikosti obrázku.

souhrn

Jak vidíte, WebP se na vašem webu WordPress velmi snadno implementuje a můžete dosáhnout výrazně menších velikostí obrazových souborů! Neexistuje žádná komprese obrázků, která by se dala srovnávat s úsporami WebP. Jo, a zmínili jsme se, že WebP má schopnost používat bezeztrátovou kompresi? To znamená, že neuvidíte žádné znatelné ztráty kvality. Pokud hledáte lepší způsob, jak urychlit WordPress, WebP může být skvělým řeš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