Како да користите WebP-датотеки во WordPress и да го намалите времето на вчитување страница
Повеќето од нас до сега знаат дека оптимизацијата на сликата е многу важна затоа што игра огромна улога во вкупното време на вчитување на вашата веб-страница WordPress. Денес сакаме да споделиме со вас лесна алтернатива за тоа како да ги интегрирате датотеките на Google WebP во вашата веб-страница WordPress. Некои корисници забележаа намалување на големината на датотеката со слика за над 70%!
Што е WebP?
Ако не сте запознаени со WebP, тој е формат на датотека со слика создаден од тимот за веб-изведба на Google со намера да создаде помали, побрзи слики. Првпат беше објавено во 2010 година и вклучува методи на компресија без загуби и загуби. Сликите се доставуваат до веб-прелистувачот од веб-сервер заснован на типот MIME што го користи сликата/WebP .
Сликите без загуба на WebP се 26% помали по големина во споредба со PNG и сликите со загуби на WebP 25-34% помали од JPEG.
Компаниите како YouTube и eBay веќе користат WebP за немо да нахранат многу свои страници. Подолу е даден пример од eBay, каде што во просек има околу 30 WebP-датотеки на нивната почетна страница.
Зошто е WebP толку важен? Според httparchive, од август 2016 година, сликите претставуваат над 64% од просечната тежина на една веб-страница. Обично е повеќе од CSS, JS и HTML заедно. Значи, изборот на робустен метод за оптимизација на формат на слика и слика, како што е WebP, е неопходен за да можете да ја намалите тежината на вашата страница што е можно повеќе. Општо, колку е помала вашата страница, толку побрзо ќе се вчита. И ова ќе ги задоволи не само вашите посетители, туку и Google, бидејќи таквата брзина на страницата е фактор за рангирање.
WebP поддршка
Додека WebP е многу интересен, важно е да се спомене поддршката за прелистувачот. Не сите модерни прелистувачи поддржуваат WebP во овој момент. Како што можам да користам, WebP е моментално поддржан во Chrome 23+, Opera 39+, сите верзии на Opera mini, прелистувачот Android 4.3+ и Chrome за Android.
Но, почекајте! Немојте да бидете премногу разочарани, бидејќи во упатството што ќе го покажеме подолу, постои начин да го направите ова. доставувајте датотеки WebP до прелистувачи и JPG/PNG поддржани како дефект. Ова значи дека неподдржаните прелистувачи не гледаат скршена слика, тие ќе го видат само она што го виделе претходно. Помислете на WebP како плус за вашата веб-страница WordPress, а не како миграција.
Според W3Schools, Chrome има монопол на пазарот на прелистувачот од нешто повеќе од 70%. Но, не земајте го уделот на пазарот како цврст доказ, погледнете ги податоците на сопствените посетители и видете кои прелистувачи ги користат, бидејќи може да се разликуваат во зависност од вашата лажат. Можеби ќе бидете изненадени од тоа колку статистиката е скршена. Во Google Analytics, во делот „Публика“, можете да кликнете на „Прелистувач и оперативен систем“ и да видите што прелистувачите користат луѓето кога ја посетуваат вашата страница. Составивме случајна страница и, како што можете да видите подолу, 67% од посетителите се од Chrome и уште 1% од Opera. Значи 68% од овие луѓе можат да видат и да имаат корист од WebP формат на датотека со слика!
Како да користите датотеки WebP во WordPress
Во денешниот пример, ќе користиме комбинација од два различни додатоци на WordPress за да ја извршуваме WebP во WordPress. Тие се создадени и развиени од тимот на KeyCDN, што е глобална мрежа за испорака на содржини (CDN).
- [Премиум] Оптимизатор на слика Optimus: додаток за компресија на слика без загуби за WordPress, ги претвора сликите во WebP
- [бесплатно] Овозможувач на кеш на WordPress: Приклучок за кеш што ви овозможува да им служите на WebP на поддржани прелистувачи
Оптимизатор на слика Optimus
Можете да преземете Optimus Image Optimizer од WordPress Store, од optimus.io или од таблата со додатоци. Белешка: Потребна е премиум лиценца ако сакате да конвертирате слики во WebP. Откако ќе се инсталира, можете да овозможите „Креирање датотека WebP“ во поставките за приклучок.
По активирањето на WebP, во суштина создава дополнителна слика за сè што е претворено. Значи, ако поставувате датотека PNG или JPG, сега постои .webp верзија на вашата слика. Запомнете, PNG/JPG сè уште е потребен затоа што тие сè уште се користат за да служат неподдржани прелистувачи. Optimus прави компресија без загуби, така што PNG и JPG исто така се компресирани.
Постои и опција за оптимизација на јачината на звукот, ако претходно сте ги компресирале сликите и сепак треба да ги конвертирате во WebP.
Овозможувач на кеш на WordPress
Значи, сега кога имате WebP слики, потребен ви е начин да му кажете на WordPress да им служи на WebP слики за поддржани прелистувачи и PNG/JPG на други прелистувачи. Ова може да се направи со бесплатниот приклучок за програмата WordPress Cache Enabler. Можете да го преземете додатокот од WordPress Store или да го инсталирате од контролната табла за приклучок. Откако ќе се инсталира, можете да овозможите „Креирај дополнителна верзија на веб-меморија“ во поставките за приклучокот.
Откако ќе ја овозможите оваа опција, се создава дополнителна кеширана WebP верзија на вашата страница.
И тоа е тоа! Сега треба да имате веб-датотеки што работат на вашата веб-страница на WordPress.
Споредба на JPG со WebP
Направивме споредба помеѓу JPG и WebP за да ги покажеме разликите што може да ги постигнете.
| 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% |
WebP резултираше со 85,87% намалување на просечната големина на сликата.
Споредба на PNG со WebP
Повторно, направив споредба со PNG со WebP за да ги покажам разликите што можете да ги постигнете.
| png-до-WebP-1.png | 44 KB | 34 KB | 30 KB | 32% |
| png-до-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-до-WebP-6.png | 34 KB | 24 KB | 18 KB | 47% |
| png-до-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-до-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-до-WebP-14.png | 26 KB | 21 KB | 17 KB | 35% |
| png-до-WebP-15.png | 14 KB | 12 KB | 9 KB | 36% |
| png-до-WebP-16.png | 36 KB | 27 KB | 24 KB | 33% |
| png-до-WebP-17.png | 14 KB | 12 KB | 8 KB | 43% |
| png-до-WebP-18.png | 21 KB | 18 KB | 13 KB | 38% |
| png-до-WebP-19.png | 42 KB | 30 KB | 27 KB | 36% |
| png-to-WebP-20.png | 23 KB | 20 KB | 18 KB | 22% |
WebP резултираше со 42,8% намалување на просечната големина на сликата.
резиме
Како што можете да видите, WebP е многу лесен за спроведување на вашата веб-страница WordPress и може да постигнете драстично помали големини на датотеки со слики! Нема компресија на слика што може да се спореди со заштеда на WebP. О, и дали спомнав дека WebP има можност да користи компресија без загуби? Ова значи дека нема да забележите забележително губење на квалитетот. Ако барате подобар начин за забрзување на WordPress, WebP може да биде одлично решение.