Как "скрытый блок" влияет на скорость загрузки сайта?
Делая модификации клиентам, я часто захожу в существующие проекты и вижу следующую картину: страница состоит из видимых блоков и 10-20 скрытых блоков.
Да и чего греха таить, я и сам нет-нет да и спрячу блок и забываю про него на пол года - год...
Решил разобраться в этом вопросе: а как вообще скрытый блок влияет на скрость загрузки сайта вцелом?
Кратко: скрытый через функционал Tilda блок продолжает загружаться и попадать в DOM, то есть HTML-разметка и все ресурсы блока (изображения, скрипты, стили) скачиваются браузером, но сам блок получает CSS-класс с display: none, из-за чего не участвует в визуальном рендеринге страницы. Иначе говоря, скрытый блок загружается, но не отрисовывается.
Да и чего греха таить, я и сам нет-нет да и спрячу блок и забываю про него на пол года - год...
Решил разобраться в этом вопросе: а как вообще скрытый блок влияет на скрость загрузки сайта вцелом?
Кратко: скрытый через функционал Tilda блок продолжает загружаться и попадать в DOM, то есть HTML-разметка и все ресурсы блока (изображения, скрипты, стили) скачиваются браузером, но сам блок получает CSS-класс с display: none, из-за чего не участвует в визуальном рендеринге страницы. Иначе говоря, скрытый блок загружается, но не отрисовывается.
Как работает «Скрыть блок» в Tilda
Когда вы включаете настройку «Скрыть блок» в Tilda, платформа добавляет к блоку CSS-класс
.t-hide {
display: none !important;
}Из-за этого блок остаётся в структуре DOM, он не отображается на экране и занимает нулевую геометрию (нет ширины и высоты).
Влияние скрытого блока на скорость загрузки
Всё, что есть в скрытом блоке: тексты, атрибуты, ссылки на изображения и скрипты, загружается на стороне пользователя. И по умолчанию изображения, виджеты, тексты, на которые ссылается блок скачиваются. А рендер-движок пропускает отрисовку заблокированного узла.
Если на скрытый блок навешаны обработчики событий или внутри загружаются скрипты, они всё равно выполются, что может незначительно увеличить время выполнения JavaScript.
Если на скрытый блок навешаны обработчики событий или внутри загружаются скрипты, они всё равно выполются, что может незначительно увеличить время выполнения JavaScript.
То есть, если на сайте 10+ скрытых блоков, то сайт загружается медленнее?
При наличии на странице 10 скрытых блоков происходит следующее:
Браузер скачивает всё содержимое скрытого блока в момент загрузки страницы. При 10 таких блоков загрузка увеличивается.
Каждый скрытый блок добавляет узлы в DOM-дерево. Чем больше узлов, тем больше времени требуется браузеру, чтобы разбить HTML на дерево элементов и подготовить его к рендерингу. Хотя 10 блоков — не критично для современных движков, при сложных структурах это заметно увеличивает время парсинга.
Правило display: none быстро применяется, но браузеру всё равно нужно пройти по всем скрытым элементам, чтобы определить их стили. С 10 блоками объём работы растёт линейно.
Если внутри скрытых блоков подключены скрипты или навешаны слушатели событий, они загружаются и выполняются, увеличивая время выполнения JavaScript.
Как итог мы имеем: при большом количестве скрытых блоках страница загружается медленнее по сравнению с отсутствием этих блоков, поскольку увеличивается объём загружаемых ресурсов, время парсинга HTML и возможная нагрузка JavaScript.
Браузер скачивает всё содержимое скрытого блока в момент загрузки страницы. При 10 таких блоков загрузка увеличивается.
Каждый скрытый блок добавляет узлы в DOM-дерево. Чем больше узлов, тем больше времени требуется браузеру, чтобы разбить HTML на дерево элементов и подготовить его к рендерингу. Хотя 10 блоков — не критично для современных движков, при сложных структурах это заметно увеличивает время парсинга.
Правило display: none быстро применяется, но браузеру всё равно нужно пройти по всем скрытым элементам, чтобы определить их стили. С 10 блоками объём работы растёт линейно.
Если внутри скрытых блоков подключены скрипты или навешаны слушатели событий, они загружаются и выполняются, увеличивая время выполнения JavaScript.
Как итог мы имеем: при большом количестве скрытых блоках страница загружается медленнее по сравнению с отсутствием этих блоков, поскольку увеличивается объём загружаемых ресурсов, время парсинга HTML и возможная нагрузка JavaScript.
Как быть? Что делать?
Настройка "Спрятать блок" увеличивает объем DOM-дерева, но влияние на парсинг HTML незначительно, пока таких блоков незначительное количество. Так что, если у вас 2-3 скрытых блока и в целом страница небольшая - все Ок.
Если скрытые блоки вам не нужны - удалите их.
Если же вы Плюшкин или в скрытом блоке у вас нереальный дизайн, который вы когда то примените, то перенесите их в техническую страницу (создайте новую страницу, в Настройках страницы зайдите в SEO и нажмите галочку "Запретить поисковикам индексировать эту страницу"). Перенесите все скрытые блоки в нее. А там можно и включить их, чтобы любоваться ими и в случае чего перенести на рабочую страницу.
Если скрытые блоки вам не нужны - удалите их.
Если же вы Плюшкин или в скрытом блоке у вас нереальный дизайн, который вы когда то примените, то перенесите их в техническую страницу (создайте новую страницу, в Настройках страницы зайдите в SEO и нажмите галочку "Запретить поисковикам индексировать эту страницу"). Перенесите все скрытые блоки в нее. А там можно и включить их, чтобы любоваться ими и в случае чего перенести на рабочую страницу.