Ako používať súbory WebP vo WordPress a znížiť časy načítania stránky
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 čase načítania vášho webu WordPress. Dnes sa s vami chceme podeliť o ľahkú alternatívu, ako integrovať súbory Google WebP do vášho webu WordPress. Niektorí používatelia si všimli zníženie veľkosti obrazového súboru o viac ako 70%!
Čo je to WebP?
Ak vám WebP nie je známy, jedná sa o formát obrazového súboru vytvorený tímom pre výkon webu na webe Google so zámerom vytvárať menšie a rýchlejšie obrázky. Prvýkrát bol oznámený v roku 2010 a obsahuje bezstratové a bezstratové kompresné metódy. Obrázky sa do webového prehliadača dodávajú z webového servera na základe typu MIME, ktorý obrázok/WebP používa .
Obrázky bez straty WebP sú o 26% menšie v porovnaní s PNG a obrázky so stratou 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 je na ich domovskej stránke v priemere asi 30 súborov WebP.
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. Je to zvyčajne viac ako CSS, JS a HTML dokopy. Preto je nevyhnutný výber robustnej metódy optimalizácie vášho obrázka a formátu obrázka, napríklad WebP, aby ste čo najviac znížili váhu svojej stránky. Všeobecne platí, že čím je vaša stránka menšia, tým rýchlejšie sa načíta. A to poteší nielen vašich návštevníkov, ale aj Google, pretože takáto rýchlosť stránky je faktorom hodnotenia.
Podpora WebP
Aj keď je WebP veľmi zaujímavý, je potrebné spomenúť podporu prehľadávačov. Nie všetky moderné prehliadače v súčasnosti WebP podporujú. Ako môžem použiť, v súčasnosti je WebP podporovaný v prehliadačoch Chrome 23+, Opera 39+, všetkých verziách Opera mini, prehliadači Android 4.3 a novších a Chrome pre Android.
Ale počkaj! Nebuďte príliš sklamaní, pretože v tutoriále, ktorý si ukážeme nižšie, existuje spôsob, ako to urobiť. doručovať súbory WebP do prehľadávačov a súbory JPG/PNG podporované ako rozdelenie. To znamená, že nepodporované prehliadače nevidia poškodený obrázok, uvidia iba to, čo videli predtým. WebP považujte za plus pre svoju stránku WordPress, nie za migráciu.
Podľa W3Schools má Chrome monopol na trhový podiel prehliadača iba niečo cez 70%. Ale neberte len podiel na trhu ako solídny dôkaz, pozrite sa na údaje svojich vlastných návštevníkov a zistite, aké prehľadávače používajú, pretože sa môžu líšiť v závislosti na vašom výklenku. Možno vás prekvapí, aké sú štatistiky zlomené. V službe Google Analytics môžete v sekcii Publikum kliknúť na položku Prehliadač a operačný systém a zistiť, aké prehliadače používajú ľudia pri návšteve vášho webu. Vydali sme náhodné stránky a ako vidíte nižšie, 67% návštevníkov je z prehliadača Chrome a ďalšie 1% z prehliadača Opera. Takže 68% z týchto ľudí môže vidieť a využívať WebP formát obrazového súboru!
Ako používať súbory WebP vo WordPress
V dnešnom príklade použijeme na spustenie WebP v programe WordPress kombináciu dvoch rôznych doplnkov WordPress. Sú vytvorené a vyvinuté tímom v KeyCDN, čo je globálna sieť na doručovanie obsahu (CDN).
- [Premium] Optimus Image Optimizer: doplnok WordPress bezstratovej kompresie obrázkov premení obrázky na WebP
- [zadarmo] WordPress Cache Enabler: Doplnok do medzipamäte, ktorý vám umožní zobrazovať WebP na podporovaných prehliadačoch
Optimus Image Optimizer
Optimus Image Optimizer si môžete stiahnuť z obchodu WordPress, z optimus.io alebo z informačného panela doplnku. Poznámka: Ak chcete prevádzať obrázky do formátu WebP, vyžaduje sa prémiová licencia. Po nainštalovaní môžete v nastaveniach doplnku povoliť „Vytváranie súborov WebP“.
Po aktivácii WebP v podstate vytvorí ďalší obrázok pre všetko, čo sa prevedie. Ak teda nahrávate súbor PNG alebo JPG, váš obrázok má teraz verziu .webp. Pamätajte, že súbory PNG/JPG sú stále potrebné, pretože sa stále používajú na poskytovanie nepodporovaných prehľadávačov. Optimus robí bezstratovú kompresiu, takže sú komprimované aj súbory PNG a JPG.
K dispozícii je tiež možnosť optimalizácie hlasitosti, ak ste obrázky už predtým komprimovali a stále ich potrebujete previesť na WebP.
WordPress Cache Enabler
Takže teraz, keď máte obrázky WebP, potrebujete spôsob, ako povedať WordPressu, aby poskytoval obrázky WebP pre podporované prehliadače a PNG/JPG iným prehliadačom. To je možné dosiahnuť pomocou bezplatného pluginu pre program WordPress Cache Enabler. Môžete si stiahnuť doplnok z obchodu WordPress alebo ho nainštalovať z hlavného panela doplnku. Po inštalácii môžete v nastaveniach doplnku povoliť možnosť „Vytvoriť ďalšiu verziu webovej medzipamäte“.
Keď povolíte túto možnosť, vytvorí sa ďalšia webová verzia vašej stránky WebP.
A je to! Na vašom webe WordPress by teraz mali byť spustené súbory WebP.
Porovnanie JPG s WebP
Urobili sme porovnanie medzi JPG a WebP, aby sme ukázali rozdiely, ktoré môžete dosiahnuť.
| jpg-na-WebP-1.jpg | 758 KB | 685 KB | 109 kB | 86% |
| jpg-na-WebP-2.jpg | 599 kB | 529 KB | 58,8 KB | 90% |
| jpg-na-WebP-3.jpg | 960 kB | 881 KB | 200 kB | 79% |
| jpg-na-WebP-4.jpg | 862 KB | 791 kB | 146 KB | 83% |
| jpg-na-WebP-5.jpg | 960 kB | 877 KB | 71,7 KB | 93% |
Výsledkom bolo WebP Zníženie priemernej veľkosti obrázka o 85,87%.
Porovnanie PNG s WebP
Opäť som vykonal porovnanie s PNG a WebP, aby som ukázal rozdiely, ktoré môžete dosiahnuť.
| 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% |
Výsledkom bolo WebP Zníženie priemernej veľkosti obrázka o 42,8%.
zhrnutie
Ako vidíte, implementácia WebP je na vašom webe WordPress veľmi jednoduchá a môžete dosiahnuť drasticky menšie veľkosti obrazových súborov! Neexistuje kompresia obrázkov, ktorá by sa dala porovnať s úsporami WebP. Och, a spomenul som, že WebP má schopnosť používať bezstratovú kompresiu? To znamená, že neuvidíte znateľnú stratu kvality. Ak hľadáte lepší spôsob, ako zrýchliť WordPress, môže byť WebP skvelým riešením.