Як використовувати файли 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 Image Optimizer: Плагін стиснення зображень без втрат для WordPress, перетворює зображення на WebP
- [безкоштовно] WordPress Cache Enabler: плагін кешу, який дозволяє обслуговувати WebP для підтримуваних браузерів
Оптимізатор зображень Optimus
Ви можете завантажити Optimus Image Optimizer із магазину WordPress, з optimus.io або з інформаційної панелі плагіна. Примітка. Потрібна преміальна ліцензія, якщо ви хочете перетворити зображення на WebP. Після встановлення ви можете ввімкнути «Створення файлу WebP» у налаштуваннях плагіна.
Після активації WebP він по суті створює додатковий образ для всього, що перетворюється. Отже, якщо ви завантажуєте файл PNG або JPG, тепер існує версія .webp вашого зображення. Пам'ятайте, PNG/JPG все ще потрібні, оскільки вони все ще використовуються для обслуговування непідтримуваних браузерів. Optimus виконує стиснення без втрат, тому PNG та JPG також стискаються.
Існує також варіант оптимізації гучності, якщо ви вже стискали зображення раніше, і вам все ще потрібно перетворити їх на WebP.
Вмикач кешу WordPress
Отже, тепер, коли у вас є зображення WebP, вам потрібен спосіб сказати WordPress обслуговувати зображення WebP для підтримуваних браузерів та PNG/JPG для інших браузерів. Це можна зробити за допомогою безкоштовного плагіна WordPress Cache Enabler. Ви можете завантажити плагін із магазину WordPress або встановити його з інформаційної панелі плагіна. Після встановлення ви можете ввімкнути «Створення додаткової версії веб-кешу» в налаштуваннях плагіна.
Після ввімкнення цієї опції створюється додаткова кешована версія WebP вашої сторінки.
І це все! Тепер на вашому веб-сайті WordPress повинні працювати файли WebP.
JPG порівняння з WebP
Ми зробили порівняння між JPG та WebP, щоб продемонструвати відмінності, яких ви можете досягти.
| jpg-to-WebP-1.jpg | 758 КБ | 685 КБ | 109 КБ | 86% |
| jpg-to-WebP-2.jpg | 599 КБ | 529 КБ | 58,8 КБ | 90% |
| jpg-to-WebP-3.jpg | 960 КБ | 881 КБ | 200 КБ | 79% |
| jpg-to-WebP-4.jpg | 862 КБ | 791 КБ | 146 КБ | 83% |
| jpg-to-WebP-5.jpg | 960 КБ | 877 КБ | 71,7 КБ | 93% |
Результатом WebP стало Зменшення середнього розміру зображення на 85,87%.
Порівняння PNG із WebP
Знову ж таки, я зробив порівняння з PNG до WebP, щоб показати відмінності, яких ви можете досягти.
| png-to-WebP-1.png | 44 КБ | 34 КБ | 30 КБ | 32% |
| png-to-WebP-2.png | 46 КБ | 35 КБ | 33 КБ | 28% |
| png-to-WebP-3.png | 43 КБ | 31 КБ | 25 КБ | 42% |
| png-to-WebP-4.png | 30 КБ | 24 КБ | 18 КБ | 40% |
| png-to-WebP-5.png | 15 КБ | 11 КБ | 8 КБ | 47% |
| png-to-WebP-6.png | 34 КБ | 24 КБ | 18 КБ | 47% |
| png-to-WebP-7.png | 15 КБ | 13 КБ | 8 КБ | 47% |
| png-to-WebP-8.png | 63 КБ | 47 КБ | 44 КБ | 30% |
| png-to-WebP-9.png | 48 КБ | 36 КБ | 33 КБ | 31% |
| png-to-WebP-10.png | 17 КБ | 14 КБ | 11 КБ | 35% |
| png-to-WebP-11.png | 18 КБ | 13 КБ | 9 КБ | 50% |
| png-to-WebP-12.png | 61 КБ | 45 КБ | 39 КБ | 36% |
| png-to-WebP-13.png | 32 КБ | 25 КБ | 21 КБ | 35% |
| png-to-WebP-14.png | 26 КБ | 21 КБ | 17 КБ | 35% |
| png-to-WebP-15.png | 14 КБ | 12 КБ | 9 КБ | 36% |
| png-to-WebP-16.png | 36 КБ | 27 КБ | 24 КБ | 33% |
| png-to-WebP-17.png | 14 КБ | 12 КБ | 8 КБ | 43% |
| png-to-WebP-18.png | 21 КБ | 18 КБ | 13 КБ | 38% |
| png-to-WebP-19.png | 42 КБ | 30 КБ | 27 КБ | 36% |
| png-to-WebP-20.png | 23 КБ | 20 КБ | 18 КБ | 22% |
Результатом WebP стало Зменшення середнього розміру зображення на 42,8%.
резюме
Як бачите, WebP дуже легко впровадити на вашому сайті WordPress, і ви можете досягти значно менших розмірів файлів зображень! Немає стиснення зображень, яке можна порівняти із економією WebP. О, і я вже згадував, що WebP має можливість використовувати стиснення без втрат? Це означає, що ви не побачите помітної втрати якості. Якщо ви шукаєте кращий спосіб прискорити WordPress, WebP може стати чудовим рішенням.