Мы постоянно ищем способы улучшить процесс загрузки изображений на страницах сайта. Для фронтенд-разработчиков это не только цель, но и часть культуры.
Проблема с display: none
Работая с ресурсами клиентов, мы заметили, что время загрузки изображений часто значительно превышает средние значения. Анализ кода показал, что большое количество изображений скрывалось с помощью медиа-запросов и свойства 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 для контейнера с изображениями, скрывая их. Однако браузер все равно загружает эти изображения.
Решение
1. Исключение изображений из DOM
Вместо использования display: none, исключите изображения из HTML-документа и добавьте их при необходимости. Это можно сделать с помощью различных JS-фреймворков или Vanilla JS.
Пример на Vanilla JS:
if (someCondition) {
const img = document.createElement('img');
img.src = '/images/img1.jpg';
img.alt = 'image 1';
document.body.appendChild(img);
}2. Использование фоновых изображений
Используйте изображения как background-image, так как фоновые изображения для скрытых элементов не загружаются.
.hidden-background {
display: none;
background-image: url('/images/img1.jpg');
}
.visible-background {
display: block;
background-image: url('/images/img1.jpg');
}Заключение
Если вы используете для изображений свойство display: none, они все равно будут загружены. Для решения этой проблемы можно исключить изображения из DOM или использовать фоновые изображения. Эти методы помогут улучшить производительность вашего сайта, избегая ненужной загрузки ресурсов.
