Или у ГТметрик-у „Смањи број ДОМ елемената“:
Шта је ДОМ?
Када ваш претраживач прими ХТМЛ документ, он мора бити конвертован у структуру стабла, која се користи за приказивање и цртање помоћу ЦСС-а и ЈаваСцрипт-а.
Ова структура стабла се назива ДОМ или модел објекта документа.
- Чворови Сви ХТМЛ елементи у ДОМ-у се називају чворови. (ака "лишће" на дрвету).
- Дубина – Колико дуго "грана" иде у дрвету, назива се дубина. На пример, у дијаграму изнад, ознака имг има дубину од 3. (ХТМЛ -> тело -> див -> имг).
- Дечији елементи – сви подређени чворови чвора (без даљег гранања) су деца.
Лигхтхоусе и Гоогле ПагеСпеед Инсигхтс почињу да означавају странице ако је испуњен један од следећих услова:
- Укупно да има више од 1500 чворова.
- Имају дубину већу од 32 чвора.
- Родитељски чвор има више од 60 подређених чворова.
Како величина ДОМ-а утиче на перформансе?
Превелика величина ДОМ-а може утицати на перформансе на различите начине.
- Више време рашчлањивања и приказивања (ФЦП) . Велико ДОМ стабло и сложена правила стила одлично раде за претраживач. Прегледач мора да рашчлани ХТМЛ, да направи стабло за рендеровање, итд. Сваки пут када корисник ступи у интеракцију или се нешто у ХТМЛ-у промени, претраживач мора то поново да израчуна.
- Повећава употребу меморије – Ваш ЈаваСцрипт код може имати функције за приступ ДОМ елементима. Веће ДОМ стабло приморава ЈаваСцрипт да користи више меморије за њихову обраду. Пример би био селектор упита, у
доцумент.куериСелецторАлл('имг')који наводи све слике које обично користе библиотеке са лењим учитавањем. - Повећава ТТФБ – Како се величина ДОМ-а повећава, повећава се и величина ХТМЛ документа (у КБ). Пошто више података треба да се пренесе преко мреже, ово повећава ТТФБ.
Како технички смањити величину ДОМ-а?
На пример, технички је лако смањити величину ДОМ-а:
употреба:
<ul id="navigation-main">etc..</ul>уместо:
<div id="navigation-main"><ul>etc..</ul></div>У суштини, ослободите се свих могућих ХТМЛ елемената. Такође можете користити Флекбок или Грид да додатно смањите величину ДОМ-а.
Али пошто користите ВордПресс, ово вам неће много помоћи!
Како смањити величину ДОМ-а у ВордПресс-у?
Поделите велике странице на више страница
Да ли имате страницу са свиме на сајту? Као услуге, обрасци за контакт, производи, постови на блогу, изјаве итд.?
Покушајте да их поделите на више страница и повежете их са заглавља/навбара.
Лено учитавање и пагинација свега што је могуће
Лено учитавање свих врста елемената. Ево неколико примера:
- ИоуТубе видео лењо учитавање - Користите ВП ИоуТубе Лите или Лази Лоад од ВП Роцкет.
- Ограничите број постова/производа на блогу по страници – Обично се трудим да задржим највише 10 постова на блогу по страници, а остале пагинирам.
- Лено учитавање постова/производа на блогу – Додајте дугме Учитај више или бесконачно скроловање да бисте учитали више постова на блогу или производа.
- Лено учитавање коментара - Користим Дискус условно учитавање пошто користим Дискус . Ако користите сопствене коментаре, користите додатке као што је Лази Лоад фор Цомментс.
- Пагинација коментара - ако имате стотине коментара, то такође може утицати на величину ДОМ-а. Да бисте пагинирали коментаре, идите на Подешавања -> Дискусија -> Пагинирај коментаре.
- Ограничите број повезаних постова – Покушајте да ограничите број повезаних постова на 3 или 4.
Напомена: лење учитавање слика неће смањити величину ДОМ-а
Не сакривајте нежељене елементе помоћу ЦСС-а
Понекад ћете можда морати да уклоните елементе које је увела тема/дизајнер. На пример, додајте дугме у корпу на страницама производа, дугме за цену, податке о аутору, датум објављивања итд.
Брзо решење је да их сакријете помоћу ЦСС-а:
.царт-буттон {дисплаи:ноне;}Иако ово решење изгледа једноставно, излажете кориснике нежељеном коду (који укључује и ХТМЛ ознаке и ЦСС стил).
Проверите подешавања теме/додатка да видите да ли постоји опција да их уклоните. У супротном пронађите релевантни ПХП код и уклоните га/коментаришите га.
Користите добро написане теме и креаторе страница
Добра тема игра важну улогу у величини ДОМ-а. Користите добро написане теме попутГенератеПресс илиАстра .
Креатори страница такође уводе превише дивова. Користите конструкторе попуткисеоник, који не уводе нежељене див блокове и имају већу контролу над ХТМЛ структуром.
Закључак
Можда постоји више додатака или подешавања теме која уводе превише дивова. Пример би били додаци за „мега мени“ као што је УберМену.
Понекад су критични за корисничко искуство вашег сајта. Али понекад их корисници никада не користе.
Можда се никада не кликне на линкове у подножју јер већина посетилаца скролује само до 75%.
Користите алатке као што су ХотЈар или Гоогле Аналитицс Евентс да бисте сазнали шта посетиоци заправо користе, а шта не користе.Анализирајте, измерите и поновите.
