uk.allworldrating.com
Статті

Як зменшити розмір DOM у WordPress

Або в 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 .

Як технічно зменшити розмір 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. Щоб розбити коментарі на сторінки, виберіть "Налаштування" -> "Обговорення" -> "Розбити коментарі на сторінки".
  • Обмежити кількість пов'язаних повідомлень – Спробуйте обмежити кількість пов'язаних повідомлень до трьох або чотирьох.

Примітка: відкладене завантаження зображень не зменшить розмір DOM

Не приховуйте небажані елементи за допомогою CSS

Іноді вам може знадобитися видалити елементи, введені темою/конструктором. Наприклад, додайте кнопку в кошик на сторінках товару, кнопку оцінки, інформацію про автора, дату публікації тощо.

Швидке рішення – приховати їх за допомогою CSS:

.cart-button {display:none;}

Незважаючи на те, що це рішення виглядає простим, ви надаєте користувачам небажаний код (який включає як розмітку HTML, так і стилі CSS).

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

Використовуйте добре написані теми та компонувальники сторінок

Хороша тема відіграє у розмірі DOM. Використовуйте добре написані теми, такі якGeneratePress абоAstra .

Творці сторінок також вводять надто багато div. Використовуйте такі конструктори, якOxygen, які не вводять небажані блоки div та мають більший контроль над структурою HTML.

Висновок

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

Іноді вони мають вирішальне значення для досвіду вашого сайту. Але інколи вони ніколи не використовуються користувачами.

Можливо, на ваші посилання в нижньому колонтитулі ніколи не натискають, тому що більшість відвідувачів прокручують лише до 75%.

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

Цікаві Статті