Как решить проблему использования чрезмерного размера DOM в аналитике скорости страниц Google

Избегайте чрезмерного размера DOM, который отображается в результатах Google Pagespeed Insights. Как я могу решить это? Пожалуйста, укажите способы уменьшить это. Мой сайт является сайтом WordPress.

Источник

1 ответ

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

  • Сокращение ненужного плагина.
  • Сокращение ненужных CSS / JS.
  • Redcuing количество изображений. В основном, если вы думаете, что что-то может быть удалено со страницы, сделайте это, и вы увидите меньшее количество узлов в вашей DOM.

Техническая обратная связь (добавление по рекомендации скорости страниц Google):

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

Эффективность сети и производительность нагрузки. Если ваш сервер отправляет большое дерево DOM, возможно, вы отправляете много ненужных байтов. Это также может замедлить время загрузки страницы, потому что браузер может анализировать множество узлов, которые даже не отображаются выше сгиба. Производительность во время выполнения. Когда пользователи и сценарии взаимодействуют с вашей страницей, браузер должен постоянно пересчитывать положение и стиль узлов. Большое дерево DOM в сочетании со сложными правилами стилей может значительно замедлить рендеринг. Производительность памяти. Если вы используете общие селекторы запросов, такие как document.querySelectorAll('li'), вы можете неосознанно хранить ссылки на очень большое количество узлов, что может превысить возможности памяти устройств ваших пользователей. Рекомендации Оптимальное дерево DOM:

Всего менее 1500 узлов. Максимальная глубина 32 узла. Не имеет родительского узла с более чем 60 дочерними узлами.

Источник

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

  1. Уменьшение количества виджетов / разделов на ваших веб-страницах или макетах страниц
  2. Использование более простого конструктора веб-страниц, поскольку многие конструкторы страниц добавляют много раздуваемого кода
  3. Смена темы
  4. Используйте разные ползунки
Источник
Другие вопросы по тегам