Lazy loading зображень

Lazy loading означає, що зображення поза видимою областю не завантажуються одразу, а лише коли користувач до них доскролить. Достатньо атрибута loading="lazy".

Без lazy loading браузер завантажує й зображення в самому низу сторінки, які користувач, можливо, ніколи не побачить — це затримує перший рендеринг і марнує дані. Lazy loading прискорює старт і заощаджує передачу.

1. 1Додайте loading="lazy" зображенням та iframe під видимою областю.
2. 2НЕ використовуйте lazy на головне зображення над згином (LCP-зображення) — його навпаки хочете якомога раніше (можна preload).
3. 3Завжди вказуйте width та height, щоб макет не стрибав (CLS).