Як оптимізувати зображення для швидкості сайту
Зображення зазвичай найважча частина сторінки, тому неоптимізовані фото найчастіше й гальмують сайт. Оптимізація картинок зменшує вагу сторінки найсильніше за найменших зусиль. Почніть з неї, якщо перевірка швидкості показує великий загальний розмір сторінки, у якому переважають зображення.
Перевірте свій сайт
-
Зменшіть розмір фото під реальний контейнер
Не заливайте фото шириною 3000-4000 px, якщо на сторінці воно показується у блоці 800 px. Перед завантаженням зменшіть ширину в будь-якому редакторі до розміру, у якому картинка реально відображається (з запасом приблизно ×2 для екранів Retina).
-
Стисніть зображення
Для фото використовуйте JPEG на якості 75-85, а PNG лишайте тільки для графіки з прозорістю. Стиснути можна плагіном (ShortPixel, Imagify) або вручну через сервіс на кшталт Squoosh перед завантаженням. Візуально різниці не видно, а вага файлу падає в рази.
-
Перейдіть на WebP або AVIF
WebP і AVIF важать на 25-50% менше за JPEG тієї ж якості. У WordPress формат генерує плагін оптимізації; на LiteSpeed-хостингу LiteSpeed Cache вміє віддавати WebP автоматично, підмінюючи його замість JPEG для браузерів, що підтримують формат.
-
Задайте width, height і srcset
Пропишіть у тегу img атрибути width і height - тоді браузер зарезервує місце й сторінка не стрибатиме під час завантаження. Атрибут srcset віддає меншу картинку на мобільних; WordPress додає його автоматично, якщо в медіатеці є кілька розмірів зображення.
-
Увімкніть відкладене завантаження (lazy load)
Картинки нижче першого екрана варто вантажити лише тоді, коли відвідувач до них домотає. Сучасний WordPress додає loading="lazy" сам; перевірте, що тема чи плагін це не вимкнули. Так браузер не витрачає час на фото, яких ще не видно.
-
Почистіть кеш і перевірте кілька сторінок
Після оптимізації скиньте кеш сайту (LiteSpeed Cache) і CDN, потім перезавантажте сторінку через Ctrl+F5. Пройдіться по головній, статті й картці товару - саме там найчастіше лишаються важкі старі зображення.
Як перевірити результат
Прогоніть головну й пару внутрішніх сторінок через перевірку швидкості TechGuard до і після змін: розмір сторінки та час завантаження мають помітно впасти. Порівняйте вагу сторінки в кілобайтах - саме зображення дають найбільший приріст.
Порада: Не вмикайте lazy load на головне зображення першого екрана (банер чи лого): відкладене завантаження LCP-картинки навпаки уповільнює появу сторінки і псує показник Core Web Vitals.