29

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

При анализе своего сайта с помощью Google PageSpeed ​​Insights вы могли увидеть ошибку типа «Избегайте чрезмерного размера DOM»:
чрезмерный размер dom google pagespeed

Или в GTmetrix «Уменьшите количество элементов DOM»:

размер дома

Что такое DOM?

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

Эта древовидная структура называется DOM или объектной моделью документа.

построение дерева рендеринга
Изображение предоставлено разработчиками Google.
  • Узлы – все элементы HTML в DOM называются узлами. (он же «листья» на дереве).
  • Глубина – Как долго «ветвь» идет в дереве, называется глубиной. Например, на диаграмме выше тег img имеет глубину 3. (HTML -> body -> div -> img).
  • Дочерние элементы – все дочерние узлы узла (без дальнейшего ветвления) являются дочерними элементами.

Lighthouse и Google PageSpeed ​​Insights начинают отмечать страницы, если выполняется одно из следующих условий:

  • Всего иметь более 1500 узлов.
  • Имеют глубину более 32 узлов.
  • У родительского узла более 60 дочерних узлов.

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

Чрезмерный размер DOM может по-разному влиять на производительность.

  • Более высокое время синтаксического анализа и рендеринга (FCP) . Большое дерево DOM и сложные правила стилей делают огромную работу для браузера. Браузер должен проанализировать HTML, построить дерево рендеринга и т. Д. Каждый раз, когда пользователь взаимодействует или что-то в HTML изменяется, браузер должен вычислить это снова.
  • Увеличивает использование памяти – ваш код JavaScript может иметь функции для доступа к элементам DOM. Более крупное дерево DOM заставляет JavaScript использовать больший объем памяти для их обработки. Примером может служить селектор запросов, в document.querySelectorAll('img')котором перечислены все изображения, обычно используемые библиотеками с отложенной загрузкой .
  • Увеличивает TTFB – По мере увеличения размера DOM размер HTML-документа увеличивается (в КБ). Поскольку по сети необходимо передавать больше данных, это увеличивает TTFB .

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

Например, технически уменьшить размер DOM просто:

использование:

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

вместо того:

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

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

Но поскольку вы используете WordPress, это вам не сильно поможет!

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

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

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

Попробуйте разделить их на несколько страниц и дать на них ссылку из заголовка / панели навигации.

Ленивая загрузка и разбиение на страницы всего, что возможно

Ленивая загрузка всевозможных элементов. Вот несколько примеров:

  • Ленивая загрузка видео с YouTube – используйте WP YouTube Lyte или Lazy Load от WP Rocket .
  • Ограничьте количество сообщений / продуктов в блоге на странице – я обычно стараюсь сохранить максимум 10 сообщений в блоге на страницу и разбивать остальные на страницы.
  • Ленивая загрузка сообщений / продуктов блога – добавьте кнопку «Загрузить еще» или бесконечную прокрутку, чтобы загрузить больше сообщений или продуктов в блоге.
  • Ленивая загрузка комментариев – я использую условную загрузку Disqus, так как я использую Disqus . Если вы используете собственные комментарии, используйте плагины, такие как Lazy Load for Comments .
  • Разбивка комментариев на страницы – если у вас есть сотни комментариев, это также может повлиять на размер DOM. Чтобы разбить комментарии на страницы, выберите «Настройки» -> «Обсуждение» -> «Разбить комментарии на страницы».
  • Ограничить количество связанных сообщений – Попробуйте ограничить количество связанных сообщений до 3 или 4.

Не скрывайте нежелательные элементы с помощью CSS

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

Быстрое решение – скрыть их с помощью CSS:

.cart-button {
  display:none;
}

Несмотря на то, что это решение выглядит простым, вы предоставляете пользователям нежелательный код (который включает как разметку HTML, так и стили CSS).

Проверьте настройки темы / плагина, чтобы узнать, есть ли возможность его удалить. В противном случае найдите соответствующий код PHP и удалите / прокомментируйте его.

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

Хорошая тема играет важную роль в размере DOM. Используйте хорошо написанные темы, такие как GeneratePress или Astra .

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

Вывод

Может быть больше плагинов или настроек темы, которые вводят слишком много div. Примером могут служить плагины «мегаменю», такие как UberMenu .

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

Возможно, на ваши ссылки в нижнем колонтитуле никогда не нажимают, потому что большинство посетителей прокручивают только до 75%.

Используйте такие инструменты, как HotJar или события Google Analytics, чтобы узнать, что посетители на самом деле используют, а что не используют. Анализируйте, измеряйте и повторяйте.

0 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 5 (0 оценок, среднее: 0,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Scroll Up