DOM (angl. Document Object Model) - tai HTML ir XML dokumentų programavimo sąsaja ir HTML dokumento struktūros, sudarytos iš šakų ir mazgų, kuriuose yra objektų, pavadinimas.
Dokumento objekto modelio istorija prasidėjo nuo vadinamųjų"naršyklių karų" tarp"Netscape Navigator" ir "Microsoft Internet Explorer" XX a. dešimtojo dešimtmečio pabaigoje, taip pat nuo "JavaScript" ir "JScript" - pirmųjų skriptų kalbų, kurios buvo plačiai įdiegtos interneto naršyklių "JavaScript" varikliuose.
DOM struktūra "WordPress": medis, šakos ir mazgai
"WordPress" DOM nelabai skiriasi nuo bet kurios kitos svetainės.
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- Medis: visas puslapis vaizduojamas kaip medis su šakniniu mazgu
(<html>)ir jo antriniais elementais. - Šakos: kiekvienas
<div>,<header>,<footer>ir t. t. elementas yra medžio šaka. - Mazgai: Visi HTML elementai, pavyzdžiui,
<p>,<img>arba<a>, yra mazgai, kurie kabo ant šakų. Šie mazgai gali būti vidiniai (juose gali būti kitų mazgų) arba išoriniai ("medžio" lapai, neturintys kitų vaikų).
Taigi šakų tankis priklauso nuo jas sudarančių elementų tipo ir skaičiaus. Pavyzdžiui, sudėtingas "WordPress" navigacijos meniu dėl nuorodų ir submeniu skaičiaus gali sukurti kelių lygių atšakas ir dešimtis mazgų.
Mazgus galite įsivaizduoti kaip visus puslapio HTML elementus. Kuo daugiau elementų, tuo ilgiau užtrunka puslapio kūrimas, o tai lemia didesnį bendrą bloko laiką(TBT).
Tai gali būti sudėtinga optimizuoti "WordPress", nes negalite tiesiog pašalinti DOM elementų, sudarančių puslapio struktūrą. Tačiau galime pasirinktinai rodyti šiuos elementus ir įkelti žemiau esančių objektų eilutę, taip sumažindami bendrą DOM dydį.
Kodėl reikia mažinti DOM dydį?
Didelis DOM medis gali keliais būdais sulėtinti svetainės įkėlimo laiką, padidinti atminties naudojimą, nes stilius skaičiuojamas ilgiau ir lėčiau, taip pat naudotojai gali patirti nereikalingų duomenų sąnaudų.
Šie skirtingi scenarijai gali apimti nereikalingą mazgų, kurie nėra matomi, kai naudotojas pirmą kartą įkelia puslapį, įkėlimą, nuolat pasikartojančius mazgų padėties ir stiliaus skaičiavimus ir pernelyg didelio skaičiaus nuorodų į mazgus saugojimą, kuris apkrauna naudotojų įrenginių atmintį.
Trumpalaikė ir ilgalaikė puslapio įkėlimo greičio optimizavimo nauda jau buvo paaiškinta tūkstančiuose straipsnių. Trumpai tariant, trumpuoju laikotarpiu išvengsite to, kad žmonės paliks puslapį nuobodžiaudami ir greičiausiai praleis jame daugiau laiko, aplankys daugiau puslapių ir sumažins atmetimo rodiklį. Užkrovimo greitis yra vienas iš veiksnių, kuriuos "Google" pripažįsta SEO pozicionavimo srityje, ir, kaip suprantu, taip pat ir likusiose paieškos sistemose, todėl ilgainiui padidės brangus organinis srautas.
Dėl ko didėja DOM?
Galutiniam DOM dydžiui įtakos turi daug veiksnių, pvz., pats šablonas, tai, ką prideda įvairūs įskiepiai, kuriuos naudojate, ir pridėto turinio tipas, pvz., sudėtingi blokai arba nepadorūs vaizdų "slankmačiai" ir kt. Taip pat tam tikrų "Builderių" generuojamas kodas.
Pavyzdžiui, iki 2022 m., kai atsisakiau "Elementor", nes jis priešinosi optimizavimui ir retai kada ką nors sugadindavo beveik kiekviename atnaujinime, be to, turėjau keletą blogų patirčių su jų techniniu palaikymu, šis konstruktorius pavertė žiniatinklio kodą tikra abėcėlės sriuba ir košmaru su tūkstančiais
Tų pačių metų balandį "Elementor" įtraukė "Flexbox" konteinerį kaip labai naują ir revoliucinę naujovę, nors konteineris jau daugelį metų buvo " GenerateBlocks" pagrindas.
Kaip išmatuoti DOM?
Matavimui pasirinkau dar nelabai optimizuotą, šiek tiek ilgą ir su įvairių tipų elementais pranešimą.
Pradėkime nuo geriausiai žinomos ir populiariausios: " PageSpeed Insights" . Jame "Google" pažymi įspėjimą(oranžine spalva), kai kūno elementas turi daugiau nei 800 mazgų, ir klaidos pranešimą(raudona spalva), kai kūno elementas turi daugiau nei 1400 mazgų, ir pranešimą su šia rekomendacija:"Venkite pernelyg didelio DOM dydžio".
Priklausomai nuo kiekvieno analizuojamo puslapio turinio ir struktūros, rasite daugiau ar mažiau užuominų, kuriuos elementus galite atakuoti. Privalumas tas, kad paprastai rodomas vaizdas, nurodantis į atitinkamą elementą.
Dar kartą noriu priminti, kad visi šie įspėjimai yra tik rekomendacijos ir kad neturėtumėte panikuoti ar apsėsti šių rodiklių. Yra puslapių, kurie užtikrina gerą naudotojo patirtį ir gerą suvokiamą greitį, tačiau jų "PageSpeed" rodikliai yra žemi.
Naudodami "GTmetrix" paprastai gausime tuos pačius DOM rezultatus.
Tačiau čia jo užklausų "krioklio" grafikas yra labai naudingas, nes leidžia iš pirmo žvilgsnio apžiūrėti visus elementus, surūšiuotus pagal tipą ir laiką, per kurį jie įkeliami.
Kitos panašios galimybės yra Pingdom arba isitwp.
Tačiau lengviausia ir greičiausia tai padaryti per bet kurią naršyklę. Atidarykite analizuojamą puslapį ir spustelėkite dešiniuoju pelės klavišu / "Inspect" (tikrinti), o skirtuke "Network" (tinklas) rasite daug išsamesnį krioklį , nes jį galėsite papildyti slinkdami puslapį ir visos užklausos bus įtrauktos į sąrašą. Tada galite juos surūšiuoti pagal svorį, tipą, laiką ir t. t.
Po šiuo langu rasite rezultatų santrauką. Kairėje - užklausų skaičius. Dešinėje pusėje mėlynai - įvykio DOMContentLoaded laikas, o raudonai - to puslapio įkėlimo laikas.
Sumažinkite DOM dydį naudodami "Perfmatters" "Lazy Elements".
"Perfmatters", šis esminis įskiepis, kurį niekada nepavargstu rekomenduoti, 2024 m. rugpjūčio 28 d. versijoje 2.3.3 pridėjo parinktį, pavadintą " Lazy Elements ", kuri, nors vis dar yra beta versijoje, veikia tikrai gerai ir palengvina DOM palengvinimo užduotį.
Ši funkcija leidžia prie konkrečių elementų ir jų palikuonių (vaikų) pridėti neteisingai pavadintą funkciją "LazyLoad" (tingusįkėlimas), pridedant bet kurią vieną tėvinio konteinerio atributų eilutės (class="example") dalį.
Taip pat galite pridėti perfmatters-lazy-element klasę prie konkretaus šablono ar puslapio kūrimo priemonės konteinerio.
" Perfmatters" pateiktoje dokumentacijoje apie šią naują funkciją įspėjama, kad nebandytume taikyti "Lazy Load" elementams, kurie yra virš užlenkimo. T. y. tam, kas įkeliama ekrane ir yra pirmas dalykas, kurį naudotojas mato neslinkdamas žemyn.
Taip pat pažymima, kad jei matote, jog kažkas vizualiai sugadinta, įsitikinkite, kad puslapyje naudojote unikalią eilutę, kuri nėra bendra su kitais elementais.
Kaip ir lėtai įkraunamų vaizdų atveju, turinys patalpinamas į . Tai reiškia, kad viskas, kas įkeliama lėtai, vis tiek techniškai yra "Google" nuskaitoma ir indeksuojama. Tačiau jie negali tiksliai pasakyti, kaip "Google" traktuos eilutėje esančius elementus su "Lazy Load". Todėl jie rekomenduoja, kalbant apie SEO, pirmiausia išbandyti.
Jame taip pat įspėjama nebandyti taikyti "Lazy Load" elementams, kuriuose yra paveikslėlių, paleidžiančių "šviesdėžę". Taip ir yra, man pavyko patikrinti, kad gimtoji "WordPress lightbox" funkcija nustoja veikti, kai į sąrašą įtraukiama ją įgyvendinančio elemento klasė.
Kitais atvejais "Lazy Elements" veikia puikiai. Naudodamasis šia funkcija sutaupiau daug laiko ir pasiekiau gerų rezultatų. Tikiuosi, kad " Perfmatters" ir toliau bus tobulinama bei plečiamos jos galimybės.
