A WebP-fájlok használata a WordPress-ben és az oldalbetöltési idő csökkentése

webp fájlok wordpress

Legtöbben tudjuk, hogy a kép optimalizálása nagyon fontos, mivel óriási szerepet játszik a WordPress webhelyének teljes betöltési idején. Ma szeretnénk megosztani veled egy egyszerű alternatívát a Google WebP fájljainak a WordPress webhelybe történő integrálásának módjáról. Néhány felhasználó a képfájl méretének több mint 70% -os csökkenését látta!


Mi a WebP?

Ha nem ismered WebP, ez egy képfájl-formátum, amelyet a webes teljesítménycsapat hozott létre a Google-on azzal a céllal, hogy kisebb és gyorsabb képeket készítsen. Először 2010-ben jelentették be, és veszteséges és veszteségmentes tömörítési módszereket is tartalmaz. A képeket a webböngészőhöz továbbítják egy webkiszolgálón, az általuk használt MIME típus alapján image / webp.

A WebP veszteségmentes képek 26% -kal kisebb méretűek a PNG-khez képest és a WebP veszteséges képek 25-34% -kal kisebb mint JPEG.

Az olyan cégek, mint a YouTube és az eBay, már használják a WebP-t, hogy csendben táplálják nagy részüket webhelyükről. Az alábbiakban bemutatunk egy példát az eBay-ről, ahol a saját honlapjukon átlagosan mintegy 30 WebP fájl található.

webp használat ebay

Miért olyan fontos a WebP? Alapján httparchive, 2016. augusztus óta, a képek az átlagos weboldal súlyának több mint 64% -át teszik ki. Általában több, mint a CSS, a JS és a HTML együttes. Tehát egy robusztus képoptimalizálási módszer és a képformátum, például a WebP kiválasztása kritikus fontosságú, hogy az oldal tömegét a lehető legnagyobb mértékben csökkentsük. Általában minél kisebb az oldal, annál gyorsabban töltődik be. És ez nemcsak a látogatókra, hanem a Google-ra is tetszik az oldalsebesség egy rangsorolási tényező.

WebP támogatás

Most, hogy a WebP nagyon izgalmas, fontos megemlíteni a böngésző támogatását is. Jelenleg nem minden modern böngésző támogatja a WebP-t. Alapján használhatom, A WebP jelenleg támogatott a Chrome 23+, az Opera 39+, az Opera mini összes verziója, az Android böngésző 4.3 és újabb, valamint a Chrome Androidra.

webböngésző támogatás

De várj! Ne légy túl csalódott, mert az alábbiakban bemutatjuk az oktatóprogramban van egy módszer tartalékként továbbítsa a WebP fájlokat a támogatott böngészőkhöz és JPG / PNG fájlokhoz. Ez azt jelenti, hogy a nem támogatott böngészők nem látnak törött képet, csak látják, amit korábban láttak. Gondolj a WebP-re mint a WordPress-webhely kiegészítésére, nem pedig az áttelepítésre.

Alapján W3Schools, A Chrome monopóliuma a böngésző piaci részesedésében valamivel több mint 70%. De ne csak vállalja a piaci részesedést szilárd bizonyítékként, nézd meg saját látogatói adatait, és nézd meg, milyen böngészőket használnak, mivel az eltérhet az Ön niche-jétől. Lehet, hogy meglepte, hogy milyen ferde a statisztika. A Google Analyticsben a „Közönség” alatt rákattinthat a „Böngésző és operációs rendszer” elemre, és megnézheti, milyen böngészőket használnak az emberek, amikor elérik az Ön webhelyét. Elkészítettünk egy véletlenszerű weboldalt, és amint az alább látható, a látogatók 67% -a Chrome-ból, további 1% -a Opera-ból származik. Így Ezen emberek 68% -a láthatja és élvezheti a WebP-t képfájl formátum!

böngészők chrome webp

A WebP fájlok használata a WordPress programban

A mai példában két különféle WordPress-bővítmény kombinációját fogjuk használni a WebP létrehozásához és futtatásához a WordPress-ben. Ezeket a KeyCDN, a globális tartalomszolgáltató hálózat (CDN) csoportja hozta létre és fejlesztette ki..

  1. [prémium] Optimus Image Optimizer: A WordPress veszteségmentes tömörítési pluginje konvertálja a képeket WebP-re
  2. [ingyenes] WordPress gyorsítótár-engedélyezõ: A gyorsítótárazó plugin lehetővé teszi a WebP kiszolgálását a támogatott böngészőkhöz

Optimus Image Optimizer

Az Optimus Image Optimizer letölthető a WordPress lerakat, tól től optimus.io, vagy a bővítmény irányítópultján. Megjegyzés: Ha a képeket WebP-re kívánja konvertálni, akkor prémium licencre van szükség. A telepítés után engedélyezheti a „WebP fájlok létrehozása” lehetőséget a beépülő modul beállításain.

webp fájlok létrehozása

Miután a WebP engedélyezve van, ez lényegében kiegészítő képet hoz létre mindazról, ami átalakult. Tehát, ha PNG fájlt vagy JPG fájlt tölt fel, akkor most is van egy kép .webp verziója. Ne feledje, hogy a PNG / JPG fájl továbbra is szükséges, mivel ezeket továbbra is nem támogatott böngészők számára szolgálják. Az Optimus veszteségmentes tömörítést végez, így a PNG és a JPG fájlok is tömörítve vannak.

webp és png fájlok

Van egy tömeges optimalizáló lehetőség, ha már tömörítette a képeket, és még mindig konvertálnia kell azokat WebP-re.

tömeges kép optimalizáló

WordPress gyorsítótár-engedélyezõ

Tehát most, hogy megvannak a WebP képei, szüksége van egy módra, amellyel megmondhatja a WordPressnek, hogy a WebP képeket kiszolgálja a támogatott böngészőkhöz, és a PNG / JPG fájlokat a többi böngészőhöz. Ez elérhető a WordPress Cache Enabler ingyenes pluginjával. A plugin letölthető a WordPress lerakat vagy telepítse a bővítmény irányítópultján. A telepítés után engedélyezheti a „További WebP gyorsítótárazott verzió létrehozása” lehetőséget a plugin-beállításokban.

gyorsítótár engedélyezõ beállításai

Miután engedélyezte ezt az opciót, létrejön az oldal további gyorsítótárazott WebP verziója.webp verziók

És ennyi! Most már rendelkeznie kell WebP fájlokkal a WordPress webhelyén.

JPG és WebP összehasonlítás

Összehasonlítottuk a következőket: JPG a WebP-hez hogy megmutassa a különbségeket, amelyeket elérhet.

FÁJL NÉVEREDETI JPGTÖMÖRÍTETT JPGWEBP FORMÁTUMMÉRET-különbség%
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%

A WebP eredményeként a Az átlagos képméret 85,87% -kal csökkent.

PNG és a WebP összehasonlítása

Megint összehasonlítottuk a következőket: PNG a WebP-hez hogy megmutassa a különbségeket, amelyeket elérhet.

Fájl névEredeti PNGsűrített PNGWebP formátumMéretkülönbség%
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%

A WebP eredményeként a Az átlagos képméret 42,8% -kal csökkent.

összefoglalás

Mint láthatja, a WebP nagyon egyszerűen telepíthető a WordPress webhelyén, és drasztikusan kisebb képfájlokat érhet el! Nincs olyan tömörítés, amely összehasonlítható a WebP megtakarításaival. Ja, és megemlítettük, hogy a WebP képes veszteségmentes tömörítést alkalmazni? Ez azt jelenti, hogy nem fog észrevehető minőségcsökkenést észlelni. Ha jobb megoldást keres a WordPress felgyorsítására, a WebP kiváló megoldás lehet.

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