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

gul56 cavab verdi – Vöen və bank hesabı (5 gün əvvəl)

WordPresslə saytı Bloggerə köçürmək

Salam dostlar. WordPresslə yığdığım saytı Bloggerdən açdığım bloga necə köçürə bilərəm? Mümkündürmü belə bir şey?

Sualı verdi: agayev ( 04/03/2015 )
Kateqoriya: Sual . blogger, wordpress. Qısa keçid.

Verilmiş cavablar və yazılan şərhlər (2 cavab var)

Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır
Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır
Bu suala aid öz sualım var:
Sual verin
Bu suala cavab vermək istəyirəm:
Cavab verin

Cavab verin

Cavab yazmaq üçün lütfən sağ sütundan və ya buradan hesaba daxil olun.

Üzvlər üçün giriş

Elan qutusu

Son cavablar və şərhlər

123589 cavab verdi – PC üçün tövsiyə (1 gün əvvəl)

Valeh Abishov cavab verdi – Aliexpress telefon (3 gün əvvəl)

Valeh Abishov cavab verdi – 1-dən ədəddən çox əşya sirariş etmə (3 gün əvvəl)

Valeh Abishov cavab verdi – Poçta əlavə pul (3 gün əvvəl)

gul56 cavab verdi – Vöen və bank hesabı (5 gün əvvəl)

E. Hacı cavab verdi – Vöen və bank hesabı (5 gün əvvəl)

Mammadli-Help cavab verdi – iban hesab nömrəmi tapa bilmirəm (8 gün əvvəl)

Mammadli-Help cavab verdi – İxtisasla bağlı (8 gün əvvəl)

Cənab cavab verdi – TOEFL vs IELTS (16 gün əvvəl)

yusifmemmedov2004 cavab verdi – Amerikadan Gomruk daxil Kargo (26 gün əvvəl)

Только Бог cavab verdi – PC üçün tövsiyə (30 gün əvvəl)

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

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

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

Что такое DOM?

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

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

• Узлы – все элементы 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 .

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

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

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

По сути, избавьтесь от всех возможных элементов 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.

Примечание: отложенная загрузка изображений не уменьшит размер DOM

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

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

Смотрите также: 7 лучших классических модных стрижек блонд и прически боб

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

.cart-button

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

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

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

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

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

Вывод

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

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

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

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