7 проверенных стратегий для исправления предупреждения «Избегайте чрезмерного размера DOM»

Опубликовано: 2022-11-23
TL;DR: исправление предупреждения «Избегайте чрезмерного размера DOM» не улучшит ваши оценки Lighthouse, но напрямую повлияет на реальную производительность вашего сайта. Большой размер DOM замедляет работу вашего сайта, увеличивает время рендеринга и затраты данных для ваших пользователей, а также перегружает память их устройств. Существует множество решений проблемы чрезмерного размера DOM, например, отказ от плохо написанных тем и плагинов, разделение одностраничного веб-сайта на несколько страниц и осторожное использование компоновщиков страниц.

Большинство предложений по улучшению Google PageSpeed ​​Insights довольно просты.

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

Однако, когда вы прокручиваете немного глубже, вы внезапно получаете предупреждение «Избегайте чрезмерного размера DOM»:

Первая реакция:

Что такое размер DOM, и как мне это исправить?!

Вы находитесь в правильном месте.

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

  • Что такое DOM (объектная модель документа)?
  • Как размер DOM влияет на производительность страницы?
  • Почему вы видите предупреждение «Избегайте чрезмерного размера DOM»
  • Как исправить предупреждение «Избегайте чрезмерного размера DOM»

Получите показатель 90+ PSI одним нажатием кнопки. Смотрите свой сайт с NitroPack!

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

Ваш веб-сайт включает такие ресурсы, как HTML-документ, файлы CSS и JavaScript.

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

Синтаксический анализ — это шаг, который браузер выполняет для преобразования данных (разметки HTML) в дерево DOM.

DOM — это модель документа, представляющая HTML в виде дерева ветвей и узлов.

Каждая ветвь дерева заканчивается узлом, и каждый узел содержит объекты. Узел представляет собой часть документа, например элемент, текстовую строку или комментарий.

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

Основные условия:

  • Узлы. Каждый элемент или тег в DOM называется узлом или листом.
  • Глубина. Количество элементов в ветке DOM.
  • Дочерний элемент. Последний узел, который больше не разветвляется.

Как размер DOM влияет на производительность страницы?

Чем больше ветвей и узлов имеет ваш DOM, тем больше будет его размер.

Соответственно, чем больше размер DOM, тем больше проблем с производительностью может возникнуть.

Вот некоторые из проблем, которые связаны с большим размером DOM:

1. Повышенная стоимость данных и более медленное время загрузки

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

2. Переполняет ресурсы памяти устройства вашего пользователя

Постоянное взаимодействие с запросами JavaScript приводит к снижению производительности и медленному рендерингу. Это приводит к отрицательному опыту страницы для пользователей вашего сайта.

3. Увеличено время рендеринга

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

4. Увеличено время до первого байта (TTFB)

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

Почему вы видите предупреждение «Избегайте чрезмерного размера DOM» в PageSpeed ​​Insights

PSI использует Lighthouse для анализа URL-адресов в контролируемой среде (т. е. с использованием лабораторных данных), чтобы продемонстрировать показатели производительности, доступности, передового опыта и SEO.

Чтобы Lighthouse помечал вашу страницу и, соответственно, отображал предупреждение «Избегайте чрезмерного размера DOM» в вашем отчете PSI, для его дерева DOM должна быть истинна одна из следующих ошибок:

  • Всего у него более 1500 узлов DOM .
  • Максимальная глубина узлов превышает 32 узла .
  • Родительский узел имеет более 60 дочерних узлов .

Полезно знать: размер DOM напрямую не влияет на ваши оценки Lighthouse (например, производительность, доступность, лучшие практики и SEO). Однако чрезмерный размер DOM негативно повлияет на реальную производительность вашего сайта, что приведет к медленной загрузке и плохому взаимодействию с вашими пользователями.

Присоединяйтесь к 31% лучших веб-сайтов, которые прошли тест Core Web Vitals! Смотрите свой сайт с NitroPack

 

Как исправить Избегайте чрезмерного размера DOM

Хорошее эмпирическое правило от Google:

 «В общем, ищите способы создавать узлы DOM только тогда, когда это необходимо, и уничтожайте узлы, когда они больше не нужны».

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

Затем мы предлагаем применить некоторые из следующих исправлений:

1. Избегайте плохо написанных плагинов и тем

Они в основном раздувают код вашего сайта, увеличивают размер DOM и снижают скорость и общую производительность вашего сайта.

Как определить, что тема/плагин плохо написаны?

Отличный вопрос. И ответ таков:

  • Читайте отзывы. Если есть проблемы, вероятно, кто-то уже столкнулся с ними и прокомментировал.
  • Не стесняйтесь потратить немного денег. Как и все остальное, вы получаете то, за что платите. Экономия денег за счет бесплатной темы/плагина может звучать здорово, но долгосрочные эффекты обойдутся вам намного дороже.
  • Проверьте, когда он последний раз обновлялся. Вы определенно хотите избежать устаревших тем и плагинов.

Если вы являетесь пользователем WooCommerce или планируете открыть магазин, вам обязательно следует ознакомиться с нашим углубленным исследованием самых эффективных тем Woo в 2022 году.

Вот контрольный список вещей, на которые следует обращать внимание/избегать при выборе темы:

  1. Многоцелевые темы. Они поставляются с множеством опций, которые вы никогда не будете использовать, и в то же время раздуют ваш код.
  2. Бесплатные версии. Опять же, они отлично подходят для тест-драйва, но часто они неэффективны и могут доставить вам массу неприятностей.
  3. Обнуленные темы. Никогда не используйте взломанную версию платной темы, так как она может содержать вредоносные скрипты, которые могут нанести вред вашему сайту.

 

2. Минимизируйте узлы DOM на основе JavaScript

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

Для начала вы можете исправить это, выделив JS-файлы, вызывающие проблемы, и удалив их. Если это сторонний виджет (например, виджет чата), вам следует поискать оптимизированную альтернативу.

3. Конструкторы страниц, которые генерируют раздутый HTML

Простота использования конструкторов страниц сделала их неотъемлемой частью процесса создания веб-сайтов для многих пользователей.

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

Чтобы справиться с этим, вы можете получить доступ к своему HTML и исправить его вручную.

Хорошей новостью является то, что некоторые конструкторы страниц предпринимают шаги для решения этих хорошо известных проблем. Например, Elementor объявил, что Elementor 3.0 содержит значительные улучшения DOM для повышения скорости и производительности новых веб-сайтов.

4. Не копируйте/вставляйте текст в WYSIWYG-редактор.

Большинство редакторов WYSIWYG (What You See Is What You Get) не справляются с очисткой вставленного кода. Особенно при вставке из другого источника форматированного текста, такого как Microsoft Word. Проблема в том, что он будет копировать не только текст, но и его стили. И они являются главным виновником, поскольку могут встраивать множество узлов DOM.

У вас есть несколько вариантов, как с этим справиться:

  • Избегайте вставки текста в редакторе
  • Используйте параметр «Вставить как обычный текст».
  • (Если ваш редактор позволяет) Используйте расширенные функции для очистки кода после его вставки.

И последнее, но не менее важное: вернитесь к своим старым страницам и очистите их.

5. Разбейте свой одностраничный сайт на несколько страниц

Одностраничный веб-сайт — отличная идея, когда его единственная цель — представить ваш бизнес.

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

Разделение больших страниц на несколько может уменьшить количество узлов DOM.

6. Не скрывайте ненужные элементы с помощью display:none

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

7. Избегайте использования сложных объявлений CSS и JavaScript

Сложные объявления CSS и JavaScript могут дополнительно увеличить использование памяти и замедлить работу вашего сайта. Их лучше пропустить, если вы имеете дело с чрезмерным количеством DOM-узлов.

Устраняйте проблемы с CSS и JavaScript автоматически! Смотрите свой сайт с NitroPack

В заключение

Это правда, что исправление проблем с DOM не приведет к улучшению результатов PageSpeed ​​Insights.

Тем не менее, скрытые преимущества приложения усилий для работы с предупреждением «избегайте чрезмерного размера DOM» намного больше:

  • Увеличьте время загрузки вашего сайта
  • Улучшите воспринимаемую эффективность вашей страницы
  • Предоставьте посетителям лучший пользовательский опыт

Самое главное, что эти три вещи вознаграждаются Google ! Кроме того, это верный способ снизить показатель отказов, увеличить среднее время, затрачиваемое на просмотр, и, что не менее важно, повысить конверсию.

Если вы ищете способы исправить любые другие предложения PSI, обязательно ознакомьтесь с другими нашими статьями:

  • С легкостью подавайте изображения в форматах нового поколения (WordPress, OpenCart и Magento)
  • Как лениво загружать закадровые изображения (5 проверенных приемов)
  • Оптимизация изображений для Интернета: 2022 SEO и методы повышения скорости сайта
  • 8 стратегий загрузки шрифтов для улучшения ваших основных веб-жизненных показателей (2022 г.)
  • Как устранить ресурсы, блокирующие рендеринг (CSS и JavaScript)
  • Уменьшите влияние стороннего кода (с плагинами или без них)
  • 7 способов свести к минимуму работу основного потока