Как display: none для изображений влияет на скорость загрузки страницы

нужно ли скрывать картинки с помощью display: none для уменьшения времени загрузки страницы

2020-02-26 dr.Brain

время чтения 3 мин.

Мы постоянно пытаемся улучшить процесс вывода изображений при загрузке страниц сайта. Для фронтенд-разработчиков это цель, миссия и, даже, часть культуры.

Работая с ресурсами наших клиентов мы стали замечать, что время загрузки изображений в три раза превысило средние значения, определяемые для сходных сайтов. Анализ кода показал, что большое количество изображений скрывалось с помощью медиа-запросов и CSS-свойства display: none.

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

Следует помнить, что свойство display: none, установленное для изображений или для контейнера, содержащего изображения, не блокирует загрузку этих изображений браузером.

Как это работает?

Как Вы заметили, свойство display: none влияет на изображения так же, как и на другие элементы: изображение не отображается, но остается на своем месте в объектной модели документа (DOM), хотя и не расходует ресурсы браузера.

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

Посмотрим на пример:

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>Header</h1>
    <div style="display: none;">
        <img src="/images/img1.jpg" alt="image 1">
        <img src="/images/img2.jpg" alt="image 2">
        <img src="/images/img3.jpg" alt="image 3">
    </div>  
</body>
</html>

В коде, приведенном выше, мы установили свойство display: none для блока, который оборачивает три изображения, скрывая их.

Однако, если мы посмотрим, какие сетевые ресурсы будут загружаться при обращении к этой HTML-странице, мы увидим, что браузер обращается и к скрытым изображениям. Такой же результат получится и в том случае, когда свойство display: none будет установлено для каждого элемента img.

Если Вы собираетесь в дальнейшем визуализировать скрытые изображения, такое поведение браузера не является проблемой. Наличие уже загруженных изображений будет только плюсом.

Но если Вы не собираетесь показывать скрытые при загрузке изображения, или вероятность этого крайне мала, такое поведение браузера становится реальной проблемой.

Решение

Вместо использования display: none Вы можете исключить изображения из состава HTML-документа, а значит и из DOM, и добавить их при необходимости. Сделать это очень легко, как в случае, когда Вы используете в своем проекте различные JS-фреймворки или библиотеки (например: Angular или React), так и в случае, когда можно воспользоваться только Vanilla JS. Во всех этих случаях вывод изображений можно заблокировать с помощью известного всем условного оператора if.
Изображения, которые нужно скрыть, можно использовать как background-image, так как фоновые изображения для скрытых элементов не загружаются.

Заключение

Если Вы используете для изображений CSS-свойство display: none, они все равно будут загружены.

Существуют как минимум два способа (перечисленных выше) для решения этой проблемы. Если Вы не собираетесь вносить изменения в объектную модель документа (DOM), необходимо использовать вариант с фоновыми изображениями (2).

Спасибо за внимание.

Перевод статьи Santiago García da Rosa “How CSS display:none Affects Images on Page Load”.