Как исправить чрезмерный размер DOM в WordPress (11 советов экспертов)

Предупреждение ‘Избегайте чрезмерного размера DOM’ может отображаться в Google Lighthouse или других инструментах тестирования скорости веб-сайта. По сути, это означает, что на вашем веб-сайте слишком много элементов, что может замедлить загрузку и расстроить посетителей.

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

И в этой статье мы покажем вам наши испытанные способы, как исправить чрезмерный размер DOM в WordPress.

 

Что означает предупреждение ‘Избегайте чрезмерного размера DOM’?

Вы когда-нибудь запускали тест скорости веб-сайта на своем сайте WordPress и сталкивались с предупреждением под названием ‘Избегайте чрезмерного размера DOM’?

Это предупреждение появляется в инструментах тестирования скорости, таких как Google Lighthouse, Google PageSpeed Insights или GTmetrix. Это указывает на то, что на вашем веб-сайте слишком много элементов, что может замедлить скорость его загрузки.

Но что такое DOM и почему его размер имеет значение? Давайте разберем это.

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

Общее количество узлов в древовидной структуре вашего сайта соответствует размеру DOM. Чем больше элементов у вас на странице, тем больше становится дерево DOM.

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

 

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

Большой размер DOM может негативно повлиять на производительность вашего сайта WordPress несколькими способами.

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

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

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

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

В наши дни пользователи ожидают, что веб-сайты будут загружаться быстро. Медленно загружающийся веб-сайт может быть похож на ожидание в длинной очереди – это отбивает у людей охоту задерживаться.

Кроме того, поисковые системы, такие как Google, отдают предпочтение веб-сайтам, которые предлагают хорошее взаимодействие с пользователем, включая высокую скорость загрузки. Таким образом, чрезмерный размер DOM может косвенно повредить вашему WordPress SEO и, в конечном итоге, конверсии веб-сайта.

 

Сколько элементов DOM слишком много для Google?

Хотя строгих ограничений не установлено, Google Lighthouse и другие инструменты тестирования помечают веб-сайты с чрезмерным размером DOM. Вот разбивка того, что могут указывать эти флаги.:

• Предупреждение: Google Lighthouse выдает предупреждение, когда основной элемент вашей страницы имеет более 800 узлов.
• Ошибка: Если элемент body достигает более 1400 узлов, Lighthouse выдает ошибку.

 

Давайте рассмотрим это в контексте, чтобы понять, какие веб-сайты могут попадать в эти категории.

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

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

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

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

1. Используйте плагин для оптимизации скорости WordPress

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

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

 

2. Проверьте свою тему и плагины

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

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

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

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

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

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

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

 

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

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

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

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

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

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

Если вы решите больше не использовать свой старый конструктор страниц, то вы можете использовать один из встроенных инструментов WordPress для создания дизайна вашего веб-сайта (например, полнофункциональный редактор сайта или настройщик тем).

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

 

4. Оптимизируйте свои изображения и видео

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

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

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

Когда дело доходит до видео, мы не рекомендуем загружать их непосредственно на WordPress. Большие видеофайлы могут значительно замедлить загрузку вашего сайта.

Лучший подход – использовать видеохостинг. Видеохостинги обрабатывают хранение и потоковую передачу ваших видео, снимают нагрузку с сервера вашего сайта и уменьшают размер DOM.

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

 

5. Внедрите отложенную загрузку

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

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

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

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

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

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

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

К счастью, вы можете легко разбивать длинные посты, используя блок ‘Разрыв страницы’ в редакторе блоков.

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

 

7. Уменьшите файлы CSS и JavaScript

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

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

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

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

 

8. Уменьшите JavaScript и CSS, блокирующие рендеринг

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

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

WP Rocket имеет встроенные функции для уменьшения количества CSS и JavaScript, блокирующих рендеринг.

Например, вы можете объединить файлы CSS и JavaScript, что уменьшит количество HTTP-запросов, которые должен выполнять ваш веб-сайт. Меньшее количество запросов означает меньшее время ожидания, пока браузер загрузит все и отобразит ваш контент.

 

9. Включите кэширование WordPress

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

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

Это ускоряет загрузку и отображение DOM, что делает работу посетителей более плавной.

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

 

10. Используйте CDN WordPress

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

Это связано с тем, что CDN хранит копии статического контента вашего сайта (изображения, скрипты, таблицы стилей) на серверах в разных местах. Когда кто-то посещает ваш веб-сайт, его компьютер загружает контент с ближайшего к нему CDN-сервера.

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

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

 

11. Оптимизируйте свою базу данных WordPress

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

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

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

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

 

Сосредоточьтесь на общей производительности WordPress, а не только на размере DOM

Хотя предупреждение ‘Избегайте чрезмерного размера DOM’ в WordPress важно для скорости работы сайта, это не единственный фактор, который следует учитывать.

Веб-сайт с большим функционалом или уникальным форматированием, естественно, может иметь больший размер DOM, и это нормально.

Главное – найти правильный баланс между производительностью сайта и функциями. Итак, помимо размера DOM, вы можете обратить внимание на другие показатели, такие как основные веб-показатели. Это конкретные показатели, которые Google использует для измерения пользовательского опыта веб-сайта.

Мы надеемся, что эта статья помогла вам узнать, как исправить чрезмерный размер DOM в WordPress.