Рекомендації Google PageSpeed включають різні аспекти оптимізації, в тому числі і щодо використання стиснення зображень для зменшення розмірів цих файлів, що прискорює їх завантаження. У цій статті розглянемо плагін Smush, в якому представлено все необхідне для оптимізації картинок, а також зручний набір інструментів, що враховує PageSpeed Insights рекомендації, пов'язані із зображеннями. Це простий спосіб прискорити роботу сайту, не жертвуючи якістю картинок.
Основні функції Smush, що дозволяють покращити рекомендації Google PageSpeed:
- Стискати зображення масово та одним клацанням миші.
- Автоматично змінювати розмір та масштаб зображення.
- Вмикати відкладене завантаження, щоб сервер міг сконцентруватися на відображенні контенту у верхній частині екрана.
- Конвертувати файли зображень у формати, які значно менші та швидше відображаються.
Що стосується роботи із зображеннями, існує чотири основні рекомендації, і цей плагін може впоратися з усіма ними:
- Відкласти закадрові зображення.
- Ефективне кодування.
- Подавати зображення у форматах нового покоління.
- Правильно вибирати розмір.
У цьому посібнику розглянемо всі вищезгадані пункти, і як Smush допоможе покращити рекомендації PageSpeed Insights для зображень на сайтах WordPress.
Відкласти закадрові зображення
Ви ж не хочете витрачати ресурси сервера та жертвувати швидкістю сторінки заради завантаження зображень, які знаходяться нижче на сторінці, тому відкладення завантаження за межами екрана має сенс для багатьох сайтів.
Після встановлення плагіна одним із перших слід перевірити функцію Lazy Load. Просте включення цієї функції може виправити рекомендацію PageSpeed «відкладати закадрові зображення».
Функція Lazy Load – це більше, ніж просто кнопка увімкнення та вимкнення.
Можна вибрати, які формати потрібно включити.
Можливо, ви хочете, щоб у режимі Lazy Load завантажувалися JPEG, а PNG – ні?
А також усі типи сторінок та записів, які необхідно виключити:
Також є можливість додати URL-адресу будь-якої конкретної сторінки.
Відкладене завантаження можна легко скасувати, тому перевірте свій новий показник PageSpeed Insights і, найголовніше, перевірте, який вплив вона впливає на сайт.
Дивіться також:
Яка роль швидкості завантаження сторінки в адаптивних темах WordPress.
Ефективне стиснення зображень
Стиснення запобігає засміченню сервера зайвими мегабайтами, які там не потрібні. Можна використовувати різні способи стиснення, при цьому якість практично не зміниться.
Під час завантаження
Автоматичне стиснення увімкнено за умовчанням і використовується для ефективного кодування зображень. Це ефективна функція із низьким рівнем ризику, яку слід використовувати на більшості сайтів.
Можна вибрати, чи застосовувати її до всіх картинок або виключити певні розміри.
Якщо ви не хочете, щоб плагін автоматично стискав фотографії, є кілька інших способів зробити це:
Масовий смуш
Функція Bulk Smush дозволяє сканувати сайт на наявність фотографій, що потребують уваги, і стискає їх одночасно.
Натисніть кнопку і дозвольте плагін зробити всю роботу за вас.
Пройдіться медіатекою
Зайдіть до медіатеки, щоб перевірити, чи є зображення, доступні для оптимізації.
У медіатеці можна оптимізувати картинки індивідуально або вибрати ті, які ігноруватимуться автостисненням.
Використовувати інші каталоги
Ви не обмежуєтеся лише завантаженням медіафайлів - можна оптимізувати зображення, що не належать до WordPress, за межами каталогу завантажень.
Тут можна легко переміщатися папками у пошуках картинок, для яких потрібно застосувати Smush.
Super та Ultra Smush
Super та Ultra Smush – ваш наступний вибір, якщо плануєте ще більше зменшити розмір файлів.
Він пропонує 2-кратну (Super Smush) або 5-кратну (Ultra Smush) силу стиснення в порівнянні зі стандартним методом, що зручно, якщо на сайті багато картинок, які забирають цінні ресурси.
Виберіть рівень стиснення для масового стиснення, який найкраще відповідає потребам.
Навіть якщо перевірка правильності кодування зображень не входила до можливостей аудиту PageSpeed Insights, все одно має сенс позбутися зайвої роздутості, якщо немає помітної різниці між відображенням.
Використовуйте CDN
Плагін також пропонує блискавичну CDN (content delivery network) на 121 точку, яка дозволяє передавати зображення у форматах нового покоління, а також забезпечує їх доставку до браузера з шаленою швидкістю. Ця функція доступна лише у Pro-версії.
Показуйте зображення у форматах нового покоління
Формати нового покоління, такі як WebP та JPEG 2000/XR, значно зменшують розмір файлу.
Відображення картинок в одному з цих форматів заощаджує ресурси сервера, а також відповідає вимогам PageSpeed Insights.
Увімкнувши CDN Smush, можна надати свої зображення у форматі WebP.
Оскільки не всі браузери використовують WebP, плагін виконує надшвидку перевірку браузера, і якщо зображення WebP використовуються, то чудово саме це і відображає відвідувачам сайту. Якщо ні, він вибирає формат PNG або JPEG.
Зображення правильного розміру
Примус браузера до вимірювання розміру зображення до того, як він зможе налаштуватися на користувача, уповільнює роботу сайту і занижує оцінку PageSpeed Insight. Частина рекомендацій полягає в тому, щоб звертати увагу на показ зображень, розмір яких містить певну версію. Саме ця версія без затримок відображатиметься на екрані відвідувача.
CDN Smush - це одне з найпростіших рішень для покращення рекомендацій PageSpeed Insight.
У той час як багато користувачів намагаються покращити оптимізацію свого веб-сайту, плагін дозволяє підвищити швидкість завантаження сторінок, прискорюючи завантаження зображень… і все це робиться всього за кілька кліків!
Виконуйте наведені вище рекомендації і змусіть Smush працювати на веб-сайті вже сьогодні.
Джерело: wpmudev.com
Коментарі до запису: 0