Как исправить «Избегайте чрезмерного размера DOM» в WordPress: практическое руководство

Рекомендация PageSpeed ​​«избегать чрезмерного размера DOM» является непростой для владельцев сайтов WordPress. Не существует плагина, который мог бы волшебным образом исправить это за вас. Вам, владельцу сайта, необходимо будет внести некоторые изменения в его контент.

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

В этом руководстве я покажу вам:

1. Как определить, что вызывает проблемы с размером DOM на ваших страницах
2. Как исправить проблемы.

Если вы пытаетесь улучшить свой показатель PageSpeed, ознакомьтесь также с другими руководствами:

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

Что такое DOM и почему это важно?

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

Каждый элемент, как <img>, <div> или <p> является узлом в этой структуре.

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

Я подчеркнул видимый текст синим цветом, а 5 элементов DOM, которые его создают, обозначены красными стрелками.

Это довольно простая структура, но позже мы увидим несколько сложных примеров.

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

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

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

Поэтому PageSpeed ​​хочет, чтобы DOM вашей страницы был разумного размера, чтобы это не замедляло ее работу.

Когда PageSpeed ​​показывает рекомендации по размеру DOM?

PageSpeed ​​специально проверяет элемент вашей страницы.
Это показывает предупреждение когда имеет более 800 узлы/элементы
Это показывает ошибка когда их больше, чем 1400 узлы/элементы

PageSpeed ​​также предоставляет вам следующую информацию:
Максимальная глубина DOM – это самая длинная последовательность вложенных элементов на странице, другими словами расстояние от данного элемента до корневого элемента страницы.

Максимальное количество дочерних элементов – это элемент, который содержит наибольшее количество дочерних элементов в DOM на странице.

Но не слишком зацикливайтесь на этих двух цифрах: они не обязательно наиболее полезны для устранения неполадок на вашей странице.

Целью является сокращение общего количества элементов.

Что увеличивает размер DOM на сайтах WordPress?

Все, что добавляет код на вашу страницу, может увеличить размер DOM. В WordPress это означает:

1. Ваша тема
2. Ваши плагины
3. Ваш контент

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

Как найти тех, кто вносит наибольший вклад в размер DOM на вашем сайте

Я рекомендую использовать расширение Chrome DOM Size Analyser, чтобы помочь вам найти источники чрезмерного размера DOM.

1. Добавьте расширение в свой браузер.
2. Перейдите на страницу вашего сайта, которую вы хотите улучшить.
3. Щелкните правой кнопкой мыши и выберите «Проверить».
4. Найдите вкладку «Анализ размера DOM».
5. Нажмите кнопку «Воспроизвести»
   При этом страница анализируется и выводится общее количество элементов DOM. Ниже отображаются элементы дерева DOM, каждый из которых имеет количество узлов.
6. Поскольку HTML является вложенным, вам придется щелкать по элементам, чтобы найти разделы, соответствующие вашему контенту.
   Продолжайте нажимать на элемент с наибольшим номером, пока не перейдете к более конкретным частям контента.
   Найдите строку с наибольшим количеством потомков:
7. Нажимая на элементы, вы увидите, что соответствующая часть страницы подсвечивается при наведении на них курсора мыши (см. рисунок ниже).
8. Это позволит вам увидеть, какие именно части страницы больше всего способствуют раздуванию DOM.
9. Получив эту информацию, вы можете либо удалить этот элемент, либо уменьшить его размер: уменьшить количество изображений, уменьшить количество избранных элементов, уменьшить количество слайдов и т. д.

Практические советы и примеры для владельцев сайтов

Избегайте конструкторов страниц

Конструкторы страниц, такие как Elementor и WP Bakery, печально известны своим неэффективным кодированием. Они выводят беспорядочный HTML-код с множеством вложенных элементов (иногда называемых «div-супом»), что часто вызывает предупреждение PageSpeed.

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

Вот пример:

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

Но когда мы проверяем DOM, посмотрите, сколько вложений требуется, чтобы добраться до этого изображения:

Даже если вы не знакомы с кодом, вы можете увидеть наклон отступа в коде — чем длиннее наклон, тем больше вложенных элементов. Это пример слишком сложного и раздутого кода.

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

Вынос:

• Всегда используйте самый простой метод создания страниц.
• Переключитесь на более простые темы, такие как GeneratePress, Astra и т. д.
• Избегайте конструкторов страниц

Но ваша тема или конструктор страниц сами по себе — это еще не все.

Огромные навигационные меню, такие как мегаменю, добавят гораздо больше элементов DOM.

Мега-меню или меню uber выглядит, как показано на примере ниже. Обычно он содержит множество навигационных ссылок, обычно организованных в столбцы, а также может содержать изображения и значки:

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

Этот виджет UberMenu содержит 450 элементов DOM! Это более 50% «бюджета» всей страницы!

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

Сократите ряды продуктов и других рекомендуемых товаров.

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

Эта карусель товаров содержит 353 элемента:

Если бы это было единственное сообщение на странице, все было бы в порядке.

Но на этом сайте есть несколько рядов каруселей товаров:

Так что эти сотни элементов действительно складываются!

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

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

Эта строка продукта, состоящая из изображений, содержит всего 48 элементов:

Вынос

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

Не злоупотребляйте табулатурами и аккордеонами.

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

Но вы должны знать, что даже если ваш посетитель не увидит весь контент сразу, он все равно присутствует в DOM. Поэтому, если каждая вкладка содержит массу контента, это все равно может раздуть DOM.

В примере ниже за этими вкладками скрывается 246 элементов DOM:

Не используйте CSS, чтобы скрыть контент

Некоторые темы и плагины будут использовать CSS для скрытия контента, например, для управления тем, какой контент отображается на настольном компьютере, а не на мобильном устройстве.

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

Например, взгляните на то, что делает Elementor — он использует CSS для скрытия элементов, не предназначенных для рабочего стола:

В зависимости от того, сколько элементов имеет каждый из них и сколько скрытых разделов, это может привести к ненужному размеру.

Оптимизируйте свои страницы

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

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

Чем длиннее ваша страница, чем больше контента вы добавите на нее, тем больше будет размер DOM.

Но это только ошеломит вашего посетителя.

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

Вот несколько примеров выбора контента, который вы можете сделать, чтобы уменьшить DOM:

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

Двухцветные SVG-файлы WordPress

Это то, что я бы назвал микрооптимизацией.

WordPress добавляет несколько SVG-файлов, которые используются для функции фильтра Duotone:

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

Просто убедитесь, что ваш сайт на самом деле не использует эти стили 🙂

Эти элементы DOM можно удалить с помощью функции «Удалить глобальные стили» в плагине Perfmatters (партнерская ссылка).

Технические советы для разработчиков

Если вы разработчик и имеете доступ к HTML-коду сайта или создаете тему, примите во внимание эти рекомендации.

Сделайте CSS максимально кратким — не используйте встроенные стили.

Здесь вы можете увидеть несколько встроенных стилей — эти узлы можно удалить, а CSS добавить в одну таблицу стилей, а затем повторно использовать на всем сайте.

Используйте современный CSS

• Использование моделей макета, таких как Flexbox или Grid, позволит вам создавать более эффективные макеты по сравнению с использованием старых методов, таких как таблицы или плавающие элементы div.
• Используйте псевдоэлементы CSS**: ::before и ::after может использоваться для добавления декоративных элементов без добавления дополнительных элементов DOM.

Используйте видимость контента

Выше я показал пример CSS display:none используется для скрытия элементов для мобильных устройств и настольных компьютеров.

Рассмотрите возможность использования content-visibility вместо. Используя значение hidden похож на display:none

И используя auto обеспечит своего рода «ленивую загрузку» HTML-элементов. Плагины WordPress, такие как LiteSpeed ​​Cache и FlyingPress, предлагают так называемый ленивый рендеринг HTML-элементов с использованием видимости контента.

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

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

Таким образом, вы все равно можете увидеть предупреждение в PageSpeed, но показатели загрузки должны быть лучше.

Используйте чистый, семантический HTML.

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

В этом примере вы можете видеть, что каждая позиция представляет собой отдельный список.

Вместо того, чтобы составлять один список с несколькими подпунктами, это было бы более эффективно и уменьшило бы количество элементов.

Минимизируйте использование JavaScript

Существует множество проблем с производительностью JavaScript.

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