Сокращение размера структуры DOM

Но, прежде чем приступить к улучшению скорости, необходимо выявить проблемы страницы, влияющие на её загрузку. Сделать это любой владелец сайта может самостоятельно, воспользовавшись сервисами в сети интернет. Одним из наиболее подробных и удобных является PageSpeed Insights. Он не только проводит аудит и выставляет оценки, в соответствии с которыми Google проводит ранжирование, но и выдаёт рекомендации по улучшению. Они довольно обширны и требуют специальных знаний и навыков.

Одной из рекомендаций, которую веб-разработчик или владелец сервиса может получить в результате проведения тестирования звучит так: «Сокращение размера структуры DOM». В данном материале мы разберёмся, что это значит, почему влияет на скорость загрузки сайта и как это исправить.

Что такое DOM

Чтобы исправлять недостатки структуры DOM, важно понимать, что это вообще такое. DOM — это объектная модель документа, которая не зависит от языка и платформы. Является программным интерфейсом и открывает доступ к HTML-документам, их структуре, содержимому и оформлению. DOM позволяет вносить в них необходимые изменения. Другими словами — это интерфейс, который позволяет веб-разработчикам работать с контентом сайта, чтобы пользователь получил нужную ему информацию, в том виде и последовательности которая требуется владельцу.

DOM создаётся из исходного HTML-кода но таковым не является. Также он не является кодом страницы или деревом рендера. Это интерфейс страницы и её первая отрисовка в процессе загрузки.

При детальном разборе сайтов зачастую выясняется, что структура дерева DOM слишком сложная и объёмная. Естественно, это приводит к тому, что страница сильно тормозит, ведь браузеру нужно выполнить просто бесконечное количество запросов, прежде чем юзер сможет увидеть хоть что-нибудь. И как результат, ждать ему попросту надоест. По рекомендациям разработчиков, страница должна содержать не более 1500 элементов DOM. При этом, оптимальной глубиной дерева считается менее 32 элементов, а родительских и дочерних вместе — не более 60.

Каким образом обширный DOM снижает производительность страницы

Мы уже разобрались, что DOM напрямую влияет на загрузку контента, который пользователь хочет увидеть максимально быстро. Если его дерево «большое и ветвистое», то производительность всегда снижается. Происходит это по нескольким причинам:

• Эффективность сети и производительность нагрузки. Большое дерево DOM часто состоит из множества узлов, которые при первой загрузке страницы пользователю не видны. При этом, они непосредственно влияют на скорость загрузки и количество использованного трафика.
• Производительность во время выполнения. Поскольку пользователи и сценарии взаимодействуют со страницей, браузеру необходимо постоянно пересчитывать положение и стиль узлов. Чем больше дерево DOM и чем сложнее правила стилей, тем дольше браузер будет рендерить страницу.
• Производительность памяти. Если JavaScript сайта использует общие селекторы запросов, например «document.querySelectorAll(‘li’)», то скорее всего, вы храните ссылки на огромное количество узлов и сами об этом не подозреваете. А это приводит к некорректному использованию памяти на устройствах пользователей.

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

Как провести оптимизацию размера DOM

Чтобы сократить размер DOM и как следствие, повысить оперативность страницы, необходимо провести его «чистку». Существует целый ряд рекомендаций, что необходимо осуществить для достижения поставленной цели. Первая и главная — узлы DOM требуется создавать исключительно по необходимости и как только в них отпала потребность — удалять. Таким образом, дерево не будет засоряться и обрастать ветвями.

Если на сайте слишком большое дерево DOM, которое браузеру необходимо полностью обработать, он будет не очень оперативным. Избавиться от лишнего можно загрузив страницу и вручную указав, какие узлы отображаются. Таким образом, станет отчётливо понятно, что используется, а что нет. И возможно, получится удалить неотображаемые узлы из первоначальной загрузки, переместив их в контент, отображаемый позже. Браузер будет подгружать их только по мере потребности пользователя. К примеру, прокрутка страницы вниз или клика по запросу.

Если вы создаёте узлы DOM в процессе выполнения задачи, используйте функцию остановки изменения при изменении поддерева. Таким образом, можно проанализировать и точно определить когда именно создаются узлы. Соответственно, выявить их функциональную нагрузку и потребность в данном элементе.

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

Что такое вычисление стилей

Абсолютно любое изменение в DOM приводит к тому, что браузеру необходимо полностью пересчитать стили элементов, макет отдельной части страницы или страницы в целом. Этот процесс и называется вычислением стилей.

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

Вторым немаловажным аспектом является сокращение элементов, для которых это самое вычисление стилей необходимо производить. Если для выполнения первого пункта потребуется подобрать набор правильных селекторов, то во втором — получить все правила стилей из этих самых селекторов и правильно определить их. При вычислении стиля, браузер система затрачивает примерно 50% времени просто для того, чтобы все селекторы сопоставить. Поэтому, их число необходимо сократить, а сложность — снизить.