Hogyan lehet WebP fájlokat használni a WordPress programban és hogyan lehet csökkenteni az oldal betöltési idejét?
Legtöbbünk már tudja, hogy a képoptimalizálás nagyon fontos, mert óriási szerepet játszik a WordPress webhely teljes betöltési idejében. Ma szeretnénk megosztani veletek egy egyszerű alternatívát arról, hogyan lehet integrálni a Google WebP fájlokat a WordPress webhelyébe. Néhány felhasználó észrevette, hogy a képfájl mérete 70% -kal meghaladja!
Mi a WebP?
Ha nem ismeri a WebP-t, ez egy képfájl-formátum, amelyet a Google webes teljesítménycsapata kisebb, gyorsabb képek létrehozása céljából hozott létre. Először 2010-ben jelentették be, és veszteségmentes és veszteségmentes tömörítési módszereket tartalmaz. A képeket a webkiszolgálóról juttatja el a webböngészőbe a kép/WebP által használt MIME-típus alapján .
A WebP veszteség nélküli képek mérete 26% -kal kisebb a PNG-khez képest, és a WebP veszteséggel rendelkező képek 25-34% -kal kisebbek, mint a JPEG-ek.
Az olyan vállalatok, mint a YouTube és az eBay, már használják a WebP-t számos webhelyük csendes betáplálásához. Az alábbiakban bemutatunk egy példát az eBay-ről, ahol átlagosan körülbelül 30 WebP fájl található a honlapjukon.
Miért olyan fontos a WebP? A httparchive szerint 2016 augusztusa óta, a képek a weboldal átlagos tömegének több mint 64% -át teszik ki. Általában több, mint CSS, JS és HTML együttvéve. Tehát elengedhetetlen egy robusztus kép- és képformátum-optimalizálási módszer kiválasztása, például a WebP, hogy az oldal súlyát a lehető legnagyobb mértékben csökkentse. Általában minél kisebb az oldal, annál gyorsabban töltődik be. Ez nemcsak a látogatóinak, hanem a Google-nak is tetszeni fog, mivel az ilyen oldalsebesség rangsoroló tényező.
WebP támogatás
Bár a WebP nagyon érdekes, fontos megemlíteni a böngésző támogatását. Jelenleg nem minden modern böngésző támogatja a WebP-t. Ahogy tudom használni, a WebP jelenleg támogatott a Chrome 23+, az Opera 39+, az Opera mini, az Android 4.3+ böngésző és a Chrome for Android összes verziójában.
De várj! Ne csalódjon nagyon, mert az oktatóanyagban, amelyet alább mutatunk be, van rá mód. szállítson WebP fájlokat böngészőkbe és JPG/PNG fájlokat bontásként. Ez azt jelenti, hogy a nem támogatott böngészők nem látnak törött képet, csak azt látják, amit korábban. Gondoljon arra, hogy a WebP a WordPress webhelyének pluszaként jelenik meg, és nem migráció.
A W3Schools szerint a Chrome alig több mint 70% monopóliummal rendelkezik a böngésző piaci részesedésében. De ne csak a piaci részesedést vegye szilárd bizonyítéknak, nézze meg saját látogatói adatait, és nézze meg, hogy milyen böngészőket használnak, mert azok eltérhetnek a réstől függően. Lehet, hogy meglepődik azon, hogy mennyire nem megfelelő a statisztika. A Google Analytics „Közönség” szakaszában rákattinthat a „Böngésző és operációs rendszer” elemre, és megtekintheti, hogy az emberek milyen böngészőket használnak, amikor ellátogatnak a webhelyére. Összeállítottunk egy véletlenszerű weboldalt, és amint az alább látható, a látogatók 67% -a Chrome-ból származik, további 1% pedig az Operából. Így Ezen emberek 68% -a láthatja és élvezheti a WebP előnyeit képfájl formátum!
A WebP fájlok használata a WordPress alkalmazásban
A mai példában két különböző WordPress bővítmény kombinációját használjuk a WebP futtatásához a WordPressben. Ezeket a KeyCDN csapata készíti és fejleszti, amely egy globális tartalomszolgáltató hálózat (CDN).
- [Premium] Optimus Image Optimizer: Veszteségmentes képtömörítő plugin a WordPress számára, a képeket WebP-vé alakítja
- [ingyenes] WordPress Cache Enabler: Cache plugin, amely lehetővé teszi a WebP kiszolgálását a támogatott böngészőkben
Optimus Image Optimizer
Letöltheti az Optimus Image Optimizer alkalmazást a WordPress Store-ból, az optimus.io webhelyről vagy a beépülő modul irányítópultjáról. Megjegyzés: Prémium licenc szükséges, ha képeket szeretne WebP-be konvertálni. A telepítés után engedélyezheti a "WebP File Creation" alkalmazást a beépülő modul beállításaiban.
A WebP aktiválása után lényegében egy további képet készít minden átalakított számára. Tehát, ha PNG vagy JPG fájlt tölt fel, akkor a képnek van egy .webp verziója. Ne feledje, hogy a PNG/JPG továbbra is szükséges, mert ezeket továbbra is a nem támogatott böngészők kiszolgálására használják. Az Optimus veszteségmentes tömörítést végez, így a PNG-k és a JPG-k is tömörülnek.
Van egy kötetoptimalizálási lehetőség is, ha már korábban tömörítette a képeket, és még mindig át kell alakítania őket WebP-be.
WordPress gyorsítótár-engedélyező
Tehát most, hogy WebP-képei vannak, szüksége van egy módra arra, hogy elmondja a WordPressnek, hogy a támogatott böngészőkhöz és a PNG/JPG-hez más böngészőkhöz szolgáltassa a WebP-képeket. Ez a WordPress Cache Enabler program ingyenes pluginjával történhet. A plugint letöltheti a WordPress Store-ból, vagy telepítheti a plugin irányítópultjáról. A telepítés után engedélyezheti a "Web gyorsítótár további verziójának létrehozása" lehetőséget a beépülő modul beállításaiban.
Miután engedélyezte ezt az opciót, az oldal további gyorsítótárazott WebP verziója jön létre.
És ez az! Most WebP fájlokat kell futtatnia a WordPress webhelyén.
JPG összehasonlítás a WebP-vel
Összehasonlítottuk a JPG-t a WebP-vel, hogy megmutassuk az elérhető különbségeket.
| jpg-to-WebP-1.jpg | 758 KB | 685 KB | 109 KB | 86% |
| jpg-to-WebP-2.jpg | 599 KB | 529 KB | 58,8 KB | 90% |
| jpg-to-WebP-3.jpg | 960 KB | 881 KB | 200 KB | 79% |
| jpg-to-WebP-4.jpg | 862 KB | 791 KB | 146 KB | 83% |
| jpg-to-WebP-5.jpg | 960 KB | 877 KB | 71,7 KB | 93% |
A WebP azt eredményezte 85,87% -kal csökken az átlagos képméret.
PNG összehasonlítás a WebP-vel
Ismét összehasonlítást végeztem a PNG és a WebP között, hogy megmutassam az elérhető különbségeket.
| png-to-WebP-1.png | 44 KB | 34 KB | 30 KB | 32% |
| png-to-WebP-2.png | 46 KB | 35 KB | 33 KB | 28% |
| png-to-WebP-3.png | 43 KB | 31 KB | 25 KB | 42% |
| png-to-WebP-4.png | 30 KB | 24 KB | 18 KB | 40% |
| png-to-WebP-5.png | 15 KB | 11 KB | 8 KB | 47% |
| png-to-WebP-6.png | 34 KB | 24 KB | 18 KB | 47% |
| png-to-WebP-7.png | 15 KB | 13 KB | 8 KB | 47% |
| png-to-WebP-8.png | 63 KB | 47 KB | 44 KB | 30% |
| png-to-WebP-9.png | 48 KB | 36 KB | 33 KB | 31% |
| png-to-WebP-10.png | 17 KB | 14 KB | 11 KB | 35% |
| png-to-WebP-11.png | 18 KB | 13 KB | 9 KB | 50% |
| png-to-WebP-12.png | 61 KB | 45 KB | 39 KB | 36% |
| png-to-WebP-13.png | 32 KB | 25 KB | 21 KB | 35% |
| png-to-WebP-14.png | 26 KB | 21 KB | 17 KB | 35% |
| png-to-WebP-15.png | 14 KB | 12 KB | 9 KB | 36% |
| png-to-WebP-16.png | 36 KB | 27 KB | 24 KB | 33% |
| png-to-WebP-17.png | 14 KB | 12 KB | 8 KB | 43% |
| png-to-WebP-18.png | 21 KB | 18 KB | 13 KB | 38% |
| png-to-WebP-19.png | 42 KB | 30 KB | 27 KB | 36% |
| png-to-WebP-20.png | 23 KB | 20 KB | 18 KB | 22% |
A WebP azt eredményezte 42,8% -kal csökken az átlagos képméret.
összefoglaló
Mint láthatja, a WebP nagyon könnyen megvalósítható a WordPress webhelyén, és drasztikusan kisebb képfájl-méreteket érhet el! Nincs olyan képtömörítés, amely összehasonlítható lenne a WebP megtakarításával. Ja, és megemlítettem, hogy a WebP képes veszteségmentes tömörítést használni? Ez azt jelenti, hogy nem tapasztal észrevehető minőségromlást. Ha a WordPress gyorsításának jobb módját keresi, a WebP remek megoldás lehet.