Стоян Стефанов провел эксперимент и проверил, скачивают ли...

Стоян Стефанов провел эксперимент и проверил, скачивают ли браузеры скрытые изображения

Загрузка лишних изображений гарантированно замедлит загрузку ваших страниц, этот эксперимент поможет понять, как этого избежать.

Что тестировалось:

1. изображение в div скрытое через visibility:hidden.

Теория заключается в том, что этот вариант с большей вероятностью будет загружен, поскольку невидимость все еще занимает часть страницы, браузеру необходимо рассчитать геометрию содержимого, поэтому изображение (особенно, без ширины/высоты) должно загрузиться.

2. изображение в div, скрытое через display:none.

3. изображение в неразвернутом HTML-элементе <details>.

4. те же три сценария, но с loading="lazy" для содержащихся изображений.

5. все сценарии, но под сгибом.

Тесты проводились в браузерах Firefox, Safari и Chrome, и все они ведут себя одинаково.

Выводы:

1. Все неленивые изображения загружаются:

— независимо от того, находятся ли они выше или ниже сгиба (первый экран)

— независимо от того, каким образом скрыты их контейнеры.

2. Ленивое изображение (с лейзилоудом) над сгибом внутри контейнера visibility:hidden загружается тоже.

3. Ленивые изображения внутри display:none или <details> не загружаются.

4. При прокрутке вниз загружается еще одно изображение, ленивое, внутри visibility:hidden.

5. Разворачивание всех контейнеров (пока они находятся над сгибом) загружает ленивые изображения над сгибом.

6. Наконец, при разворачивании всех контейнеров (и прокрутке вниз) загружаются ленивые изображения под сгибом.

Что же все это значит?

— visibility:hidden, как и ожидалось, является худшим вариантом - избегайте.

— display:none и <details> (оба ведут себя одинаково) немного лучше, если вы используете loading=lazy для изображений - предпочтительнее.

— Для изображений в скрытом содержимом всегда используйте loading=lazy.

— Для надежного предотвращения загрузки используйте старую-добрую технику откомментированного HTML.

Страница теста: https://www.phpied.com/files/display/test.html

Подробнее: https://www.phpied.com/image-requests-in-hidden-content/

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/2805...