Ключи для уменьшения размера DOM веб-сайта

Опубликовано: 2020-11-17

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

Вот почему мы собираемся объяснить, почему DOM можно считать чрезмерно большим и как его уменьшить.

Давай начнем!

Оглавление

Что такое ДОМ?

Проще говоря, когда мы говорим о DOM, мы имеем в виду структуру объектов, которые браузер генерирует каждый раз, когда загружает страницу . Он обязан своим названием аббревиатуре Document Object Model.

Объектная модель документа
Источник изображения: Википедия

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

Другими словами, когда браузер подготавливает страницу для показа нам, он строит дерево объектов, состоящее из всех элементов страницы на основе ее HTML-структуры.

Каждый раз, когда браузер получает HTML-документ, он должен преобразовать его в эту древовидную структуру, которую мы называем DOM или деревом DOM. Код JavaScript может получить доступ к этому DOM и изменить его.

Как размер DOM влияет на вашу веб-производительность?

Веб-производительность

Правда в том, что размер DOM влияет на производительность страницы. Чрезмерно большой DOM может замедлить скорость веб-сайта , так как имеет следующие последствия:

  • Эффективность сети и производительность нагрузки. Если модель DOM слишком велика, она часто включает элементы HTML, которые не видны при первой загрузке страницы пользователем, что приводит к ненужному увеличению потребления данных и замедлению загрузки сайта.
  • Производительность во время выполнения. Когда пользователи и скрипты взаимодействуют со страницей, браузер должен постоянно пересчитывать положение и стиль тегов HTML.
  • Производительность памяти . Если дерево DOM слишком велико, браузеру может потребоваться больше памяти для его обработки.

Как технически уменьшить размер DOM?

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

Вместо использования этого кода;

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

Было бы лучше использовать этот другой;

 <ul id = ”navigation-main”>   etc .. </ul>

Что касается древовидной структуры, нам необходимо знать следующие термины:

  • Узлы : все HTML-элементы модели DOM. Они также известны как «листья» дерева.
  • Вторичные узлы : те узлы, у которых больше нет ветвей.

Тем не менее, лучше всего то, что глубина дерева формируется :

  • Менее 32 узлов.
  • Менее 60 вторичных узлов на каждый узел.

Google рекомендует, чтобы при разработке веб-сайтов страницы содержали менее 1500 узлов DOM , а это означает, что дизайн не должен быть слишком сложным.

Как уменьшить размер DOM в WordPress

Есть несколько способов уменьшить размер DOM в WordPress:

Разделите большие страницы на несколько страниц

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

В этом случае лучше классифицировать все эти элементы на разных страницах и связать их через панель навигации.

Активируйте плагин отложенной загрузки и разбейте все возможные элементы на страницы.

Вы можете включить модуль ленивой загрузки во всех элементах, которые это позволяют. Вы можете сделать это с видео с YouTube, используя Youtube Lite или Lazy Load из WordPress WP-Rocket.

Также важно ограничить количество сообщений на странице блога . Разумным максимальным количеством сообщений будет 10 на странице. Эта практика также относится к количеству продуктов, которые должны отображаться на каждой странице.

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

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

Удалите ненужные элементы, включенные в стандартную тему WP.

В некоторых случаях может потребоваться удалить определенные элементы, которые поставляются с вашей темой WordPress по умолчанию , такие как кнопка «Добавить в корзину» на страницах продукта, дата публикации, информация об авторе и т. д.

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

Используйте хорошо закодированные темы или конструкторы страниц

Качество темы WordPress напрямую влияет на размер DOM. Поэтому желательно использовать хорошо закодированные темы, такие как Astra или GeneratePress.

Конструкторы страниц также часто вставляют слишком много тегов div, поэтому важно использовать такие решения, как Oxygen Builders, которые не вставляют нежелательные элементы и обеспечивают больший контроль над структурой HTML.

Такие инструменты, как HotJar, позволяют вам видеть, что пользователи используют, а что не работает для них. Проведение тщательного анализа имеет основополагающее значение для получения правильного размера DOM.

Последние мысли

Чрезмерный размер домена снижает производительность вашего веб-сайта, замедляя время загрузки страницы. Сохраняйте структуру HTML простой, без лишних элементов . Проверьте свое дерево DOM и избавьтесь от тех узлов, которые не добавляют ценности вашему сайту. Вы не только ускорите свой веб-сайт, но и предложите лучший UX.

Google, несомненно, рассмотрит размер DOM в обновлении Page Experience , которое выйдет в ближайшие месяцы. Убедитесь, что у вас есть адекватный, чтобы он не влиял на вашу работу в Интернете.