SEO-оптимізація зображень — alt, WebP, lazy load

Оптимізація зображень для швидкості й пошуку

Зображення — найважча частина типової сторінки магазину. Саме вони найчастіше псують показник завантаження головного вмісту, за яким пошукова система оцінює швидкість.

Що входить

• стиснення без помітної втрати якості;
• переведення в сучасні формати зі збереженням запасних варіантів для старих браузерів;
• правильні розміри: зображення 3000 пікселів, стиснуте стилями до 300 — найпоширеніша й найдорожча помилка;
• відкладене завантаження для того, що поза екраном;
• пріоритет завантаження для головного зображення сторінки;
• явні розміри в коді — щоб верстка не стрибала;
• атрибути alt для пошуку по зображеннях.

Що дає найбільший ефект

Не стиснення, як зазвичай думають, а правильні розміри. Магазин, який віддає оригінали з фотоапарата і зменшує їх стилями, вантажить у десятки разів більше даних, ніж потрібно. Жодне стиснення цього не компенсує.

Друге за ефектом — пріоритет для головного зображення. Якщо браузер вантажить його останнім, показник завантаження буде поганим навіть при легких файлах.

Для магазинів окремо

Мініатюри мають генеруватись один раз і зберігатись, а не створюватись при кожному запиті. Інакше прихід пошукового робота кладе сервер: він запитує сотні сторінок, і кожна змушує генерувати зображення заново.

Суміжне: Core Web Vitals, мобільна оптимізація, оптимізація PageSpeed.