Чому зображення - важлива причина повільного завантаження?

Зображення - одна з головних причин повільного завантаження сайту, тому що вони:

---

#1. Найважчі ресурси

Вони займають 60-80% загальної ваги сторінки. Один нестиснутий банер у 500 KB може важити більше, ніж весь інший HTML, CSS і JS разом узяті.

---

#2. Завантажуються до рендера

Якщо зображення розташовані у верхній частині сторінки, браузер намагається завантажити їх до відображення контенту. Це блокує рендеринг, збільшує LCP і FCP.

---

#3. Можуть спричиняти layout shift

Якщо для зображення не задана ширина/висота, воно завантажується пізніше і зсуває контент: це підвищує CLS (Cumulative Layout Shift), погіршуючи сприйняття і SEO.

---

#4. Витрачають трафік і енергію

Особливо критично для мобільних користувачів. Великі зображення означають повільне завантаження, витрату батареї і перевитрату мобільного трафіку.

---

#5. Не оптимізовані за форматом

Використання старих форматів (JPEG, PNG) замість сучасних (WebP, AVIF) - ще одна причина надмірної ваги. Той самий візуально ідентичний файл може важити втричі більше.

---

Висновок: Зображення - це красиво, але без оптимізації вони перетворюються на баласт. Мінімізуй їхній розмір, відкладай завантаження (lazy), використовуй сучасні формати і вказуй розміри, тоді вони перестануть гальмувати сайт.