Когда вижу задачу по оптимизации первой загрузки веб-страницы, первым делом ищу на странице куски, которые можно не грузить в принципе, пока пользователь не окажется рядом с ними. Картинки за пределами первого экрана — идеальные кандидаты.
Стоян Стефанов провёл эксперимент с разными способами прятанья картинок:
1. Внутри
<div style="visibility: hidden">.2. Внутри
<div style="display: none">.3. Внутри закрытого
<details>.4. Пункты 1–3, но с
loading=lazy.5. Пункты 1–4, но внизу длинной страницы.
Результаты эксперимента:
- Если картинка без
loading=lazy — она загрузится в любом случае. Во всех браузерах.-
<details> и display: none вместе с loading=lazy не загружают картинку, а вот visibility: hidden вместе с loading=lazy — загружает.- Хотите что-то не загружать — либо
loading=lazy, либо JS-решение.В статье есть ссылка на демку, где можете сами посмотреть, как работают разные комбинации. И интересная старая техника с комментариями в HTML.
https://www.phpied.com/image-requests-in-hidden-content/
