Как да използвате WebP файлове в WordPress & Намаляване на време за зареждане на страницата

уеб файлове

Повечето от нас досега знаят, че оптимизацията на изображения е много важна, тъй като играе огромна роля в общото време за зареждане на вашия уебсайт WordPress. Днес искаме да споделим с вас лесна алтернатива за това как да интегрирате WebP файловете на Google във вашия WordPress сайт. Някои потребители са виждали намаляване на размера на файла с над 70%!


Какво е WebP?

Ако не сте запознати с WebP, това е формат на файлове с изображения, създаден от екипа за уеб производителност в Google с намерението да се създадат по-малки и по-бързи изображения. За първи път беше обявена през 2010 г. и разполага както с методите на компресиране, така и без загуба. Изображенията се доставят на уеб браузъра от уеб сървър въз основа на типа MIME, който използва, който е изображение / WebP.

Изображенията без загуба на WebP са 26% по-малък по размер в сравнение с PNG и WebP загубени изображения 25-34% по-малък отколкото JPEG.

Компании като YouTube и eBay вече използват WebP за безшумно захранване на голяма част от своите сайтове. По-долу е даден пример от eBay, където на началната си страница те са средно около 30 WebP файла.

използване на уебсайта ebay

Защо WebP е толкова важен? Според httparchive, към август 2016 г., изображенията представляват над 64% от средното тегло на уеб страницата. Обикновено това е повече от вашите CSS, JS и HTML комбинирани. Така че изборът на надежден метод за оптимизация на изображението и формат на изображението като WebP е от решаващо значение, така че да можете да намалите теглото на страницата си колкото е възможно повече. Като цяло, колкото по-малка е вашата страница, толкова по-бързо ще се зареди. И това ще зарадва не само вашите посетители, но и Google като скоростта на страницата е фактор за класиране.

WebP поддръжка

Сега, докато WebP е много вълнуващо, важно е да споменем и поддръжката на браузъра. Не всички съвременни браузъри поддържат WebP в момента. Според caniuse, В момента 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 формат на изображението!

браузъри chrome webp

Как да използвате WebP файлове в WordPress

В днешния пример ще използваме комбинация от два различни WordPress плъгини, за да стартираме и работим в WebP в WordPress. Те са създадени и разработени от екипа в KeyCDN, която е глобална мрежа за доставяне на съдържание (CDN).

  1. [Премия] Optimus Image Optimizer: Плъгин за компресия на загуба на изображение за WordPress, преобразува изображения в WebP
  2. [Безплатно] WordPress Cache Enabler: Приставка за кеширане, която ви позволява да обслужвате WebP до поддържаните браузъри

Optimus Image Optimizer

Можете да изтеглите Optimus Image Optimizer от WordPress хранилище, от optimus.io, или от таблото за управление на вашия плъгин. Забележка: Необходим е лиценз за премиум, ако искате да конвертирате вашите изображения в WebP. След като го инсталирате, можете да активирате „Създаването на WebP файлове“ в настройките на приставката.

създаване на webp файлове

След като WebP е активиран, това по същество създава допълнително изображение за всичко, което е преобразувано. Така че ако качите PNG файл или JPG, сега има и .webp версия на вашето изображение. Не забравяйте, че PNG / JPG все още е необходим, защото те все още се използват, за да служат на неподдържани браузъри. Optimus прави компресия без загуби, така че вашите PNG и JPG също са компресирани.

webp и png файлове

Има и опция за групово оптимизиране, в случай че вече сте компресирали изображенията си и все още трябва да ги преобразувате в WebP.

оптимизатор за групово изображение

WordPress Cache Enabler

Така че сега, когато имате WebP изображения, се нуждаете от начин да кажете на WordPress да обслужва WebP изображения на поддържани браузъри и PNG / JPG на другите браузъри. Това може да се постигне с безплатния плъгин за WordPress Cache Enabler. Можете да изтеглите приставката от WordPress хранилище или да го инсталирате от таблото за управление на приставките си. След инсталирането можете да активирате „Създаване на допълнителна кеширана версия на WebP“ в настройките на приставката.

настройки за активиране на кеша

След като активирате тази опция, се създава допълнителна кеширана версия на WebP на вашата страница.webp версии

И това е! Сега трябва да имате WebP файлове, работещи на вашия уебсайт WordPress.

JPG към WebP сравнение

Проведохме сравнение на JPG към WebP за да покажете разликите, които можете да постигнете.

ИМЕ НА ФАЙЛORIGINAL JPGсгъстен JPGWEBP ФОРМАТРАЗЛИЧНА РАЗМЕРА%
JPG до WebP-1.jpg758 KB685 KB109 KB86%
JPG до WebP-2.jpg599 KB529 KB58,8 KB90%
JPG до WebP-3.jpg960 KB881 KB200 KB79%
JPG до WebP-4.jpg862 KB791 KB146 KB83%
JPG до WebP-5.jpg960 KB877 KB71,7 KB93%

WebP доведе до a 85.87% намаление на средния размер на изображението.

PNG към WebP сравнение

Отново проведохме и сравнение на PNG към WebP за да покажете разликите, които можете да постигнете.

Име на файлОригинален PNGсгъстен PNGWebP форматРазлика в размера%
PNG-към-WebP-1.png44 KB34 KB30 KB32%
PNG-към-WebP-2.png46 KB35 KB33 KB28%
PNG-към-WebP-3.png43 KB31 KB25 KB42%
PNG-към-WebP-4.png30 KB24 KB18 KB40%
PNG-към-WebP-5.png15 KB11 KB8 KB47%
PNG-към-WebP-6.png34 KB24 KB18 KB47%
PNG-към-WebP-7.png15 KB13 KB8 KB47%
PNG-към-WebP-8.png63 KB47 KB44 KB30%
PNG-към-WebP-9.png48 KB36 KB33 KB31%
PNG-към-WebP-10.png17 KB14 KB11 KB35%
PNG-към-WebP-11.png18 KB13 KB9 KB50%
PNG-към-WebP-12.png61 KB45 KB39 KB36%
PNG-към-WebP-13.png32 KB25 KB21 KB35%
PNG-към-WebP-14.png26 KB21 KB17 KB35%
PNG-към-WebP-15.png14 KB12 KB9 KB36%
PNG-към-WebP-16.png36 KB27 KB24 KB33%
PNG-към-WebP-17.png14 KB12 KB8 KB43%
PNG-към-WebP-18.png21 KB18 KB13 KB38%
PNG-към-WebP-19.png42 KB30 KB27 KB36%
PNG-към-WebP-20.png23 KB20 KB18 KB22%

WebP доведе до a 42.8% намаление на средния размер на изображението.

резюме

Както можете да видите, WebP е много лесен за изпълнение на вашия WordPress сайт и можете да постигнете драстично по-малки размери на файлове с изображения! Няма компресия на изображението, което може да се сравни с спестяването на WebP. О, и споменахме ли, че WebP има способността да използва компресия без загуби? Това означава, че няма да видите забележима загуба на качество. Ако търсите по-добър начин да ускорите WordPress, WebP може да бъде чудесно решение.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map