Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чому зображення - важлива причина повільного завантаження?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

---

### 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`), використовуй сучасні формати і вказуй розміри, тоді вони перестануть гальмувати сайт.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати181 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.