bg.allworldrating.com
Статии

Как да намалим размера на DOM в WordPress

Или в GTmetrix "Намалете броя на DOM елементите":

Какво е DOM?

Когато вашият браузър получи HTML документ, той трябва да бъде преобразуван в дървовидна структура, която се използва за изобразяване и рисуване с CSS и JavaScript.

Тази дървовидна структура се нарича DOM или Document Object Model.

  • възли Всички 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 документа се увеличава (в KB). Тъй като трябва да се прехвърлят повече данни през мрежата, това увеличава 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.

Забележка: мързеливото зареждане на изображения няма да намали размера на DOM

Не скривайте нежелани елементи с CSS

Понякога може да се наложи да премахнете елементи, въведени от тема/дизайнер. Например добавете бутон към количката на страниците с продукти, бутон за тарифа, информация за автора, дата на публикуване и т.н.

Бързо решение е да ги скриете с CSS:

.cart-button {display:none;}

Въпреки че това решение изглежда просто, вие излагате потребителите на нежелан код (който включва както HTML маркиране, така и CSS стил).

Проверете настройките на вашата тема/плъгин, за да видите дали има опция за премахването им. В противен случай намерете съответния PHP код и го премахнете/коментирайте.

Използвайте добре написани теми и конструктори на страници

Добрата тема играе важна роля в размера на DOM. Използвайте добре написани теми катоGeneratePress илиАстра .

Създателите на страници също въвеждат твърде много divs. Използвайте конструктори катокислород, които не въвеждат нежелани блокове div и имат повече контрол върху HTML структурата.

Заключение

Може да има повече плъгини или настройки за тема, които въвеждат твърде много divs. Пример биха били плъгини за "мега меню", като UberMenu.

Понякога те са от решаващо значение за потребителското изживяване на вашия сайт. Но понякога те никога не се използват от потребителите.

Може би никога не се щраква върху връзките в долния колонтитул, защото повечето посетители превъртат само до 75%.

Използвайте инструменти като HotJar или Google Analytics Events, за да разберете какво всъщност използват посетителите и какво не използват.Анализирайте, измерете и повторете.

Интересни Статии