Как да използваме 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).
- [Premium] Optimus Image Optimizer: Приставка за компресиране на изображения без загуби за WordPress, превръща изображенията в WebP
- [безплатно] WordPress Cache Enabler: Приставка за кеш, която ви позволява да обслужвате WebP на поддържани браузъри
Optimus Image Optimizer
Можете да изтеглите Optimus Image Optimizer от WordPress Store, от optimus.io или от таблото за управление на приставката. Забележка: Изисква премиум лиценз, ако искате да конвертирате изображения в WebP. Веднъж инсталиран, можете да активирате "WebP File Creation" в настройките на приставката.
След активиране на WebP, той по същество създава допълнително изображение за всичко, което се преобразува. Така че, ако качвате PNG или JPG файл, вече има .webp версия на вашето изображение. Не забравяйте, че PNG/JPG все още е необходима, тъй като те все още се използват за обслужване на неподдържани браузъри. Optimus прави компресия без загуби, така че PNG и JPG също се компресират.
Има и опция за оптимизиране на силата на звука, ако вече сте компресирали изображенията и все още трябва да ги конвертирате в WebP.
Разрешител за кеш на WordPress
Така че сега, когато имате WebP изображения, имате нужда от начин да кажете на WordPress да обслужва WebP изображения за поддържани браузъри и PNG/JPG за други браузъри. Това може да стане с безплатния плъгин за програмата WordPress Cache Enabler. Можете да изтеглите приставката от WordPress Store или да я инсталирате от таблото за управление на приставката. След като сте инсталирали, можете да активирате „Създаване на допълнителна версия на уеб кеша“ в настройките на приставката.
След като активирате тази опция, се създава допълнителна кеширана WebP версия на вашата страница.
И това е! Вече трябва да имате WebP файлове, работещи на вашия WordPress сайт.
JPG сравнение с WebP
Направихме сравнение между JPG и WebP, за да покажем разликите, които можете да постигнете.
| jpg-към-WebP-1.jpg | 758 KB | 685 KB | 109 KB | 86% |
| jpg-към-WebP-2.jpg | 599 KB | 529 KB | 58,8 KB | 90% |
| jpg-към-WebP-3.jpg | 960 KB | 881 KB | 200 KB | 79% |
| jpg-to-WebP-4.jpg | 862 KB | 791 KB | 146 KB | 83% |
| jpg-към-WebP-5.jpg | 960 KB | 877 KB | 71,7 KB | 93% |
WebP доведе до 85,87% намаление на средния размер на изображението.
PNG сравнение с WebP
Отново направих сравнение с PNG към WebP, за да покажа разликите, които можете да постигнете.
| 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-към-WebP-3.png | 43 KB | 31 KB | 25 KB | 42% |
| png-to-WebP-4.png | 30 KB | 24 KB | 18 KB | 40% |
| png-към-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-към-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% |
WebP доведе до 42,8% намаление на средния размер на изображението.
обобщение
Както можете да видите, WebP е много лесен за внедряване на вашия сайт на WordPress и можете да постигнете драстично по-малки размери на графичните файлове! Няма компресия на изображения там, която да се сравнява с спестяванията в WebP. О, и споменах ли, че WebP има способността да използва компресия без загуби? Това означава, че няма да видите забележима загуба на качество. Ако търсите по-добър начин да ускорите WordPress, WebP може да бъде чудесно решение.