lt.allworldrating.com
Straipsniai

Kaip sumažinti DOM dydį „WordPress“.

Arba GTmetrix „Sumažinti DOM elementų skaičių“:

Kas yra DOM?

Kai jūsų naršyklė gauna HTML dokumentą, jis turi būti konvertuotas į medžio struktūrą, kuri naudojama atvaizdavimui ir piešimui naudojant CSS ir JavaScript.

Ši medžio struktūra vadinama DOM arba dokumento objekto modeliu.

  • Mazgai Visi DOM HTML elementai vadinami mazgais. (dar žinomas kaip "lapai" ant medžio).
  • Gylis – Kiek laiko „šaka“ eina medyje, vadinama gyliu. Pavyzdžiui, aukščiau esančioje diagramoje img žymos gylis yra 3. (HTML -> body -> div -> img).
  • Vaikų elementai – visi antriniai mazgo mazgai (be tolesnio šakojimosi) yra vaikai.

„Lighthouse“ ir „Google PageSpeed ​​​​Insights“ pradeda žymėti puslapius, jei įvykdoma viena iš šių sąlygų:

  • Iš viso turi būti daugiau nei 1500 mazgų.
  • Turi didesnį nei 32 mazgų gylį.
  • Pirminiame mazge yra daugiau nei 60 antrinių mazgų.

Kaip DOM dydis veikia našumą?

Per didelis DOM dydis gali įvairiai paveikti našumą.

  • Didesnis analizės ir pateikimo laikas (FCP) . Didelis DOM medis ir sudėtingos stiliaus taisyklės puikiai veikia naršyklėje. Naršyklė turi išanalizuoti HTML, sukurti atvaizdavimo medį ir tt Kiekvieną kartą, kai vartotojas sąveikauja arba kas nors pasikeičia HTML, naršyklė turi jį apskaičiuoti iš naujo.
  • Padidina atminties naudojimą – Jūsų „JavaScript“ kode gali būti funkcijų, leidžiančių pasiekti DOM elementus. Didesnis DOM medis verčia JavaScript naudoti daugiau atminties jiems apdoroti. Pavyzdys būtų užklausų parinkiklis, indocument.querySelectorAll('img')kuriame pateikiami visi vaizdai, kuriuos dažniausiai naudoja tingiai įkeliamos bibliotekos.
  • Padidina TTFB – Didėjant DOM dydžiui, didėja ir HTML dokumento dydis (KB). Kadangi tinkle reikia perduoti daugiau duomenų, tai padidina TTFB.

Kaip techniškai sumažinti DOM dydį?

Pavyzdžiui, techniškai lengva sumažinti DOM dydį:

naudojimas:

<ul id="navigation-main">etc..</ul>

vietoj:

<div id="navigation-main"><ul>etc..</ul></div>

Iš esmės, atsikratykite visų galimų HTML elementų. Taip pat galite naudoti „Flexbox“ arba „Grid“, kad dar labiau sumažintumėte DOM dydį.

Bet kadangi naudojate „WordPress“, tai jums nelabai padės!

Kaip sumažinti DOM dydį „WordPress“?

Padalinkite didelius puslapius į kelis puslapius

Ar turite puslapį su viskuo, kas yra svetainėje? Ar jums patinka paslaugos, kontaktų formos, produktai, tinklaraščio įrašai, atsiliepimai ir pan.?

Pabandykite padalyti juos į kelis puslapius ir susieti su jais iš antraštės / naršymo juostos.

Tingus visų įmanomų dalykų įkėlimas ir puslapių rūšiavimas

Tingus visų rūšių elementų krovimas. Štai keletas pavyzdžių:

  • „YouTube“ vaizdo įrašas įkeliamas tingiai - Naudokite WP YouTube Lyte arba Lazy Load by WP Rocket.
  • Apribokite tinklaraščio įrašų / produktų skaičių puslapyje – Paprastai stengiuosi, kad viename puslapyje būtų ne daugiau kaip 10 tinklaraščio įrašų, o likusius – puslapiais.
  • Tingiai kraunasi tinklaraščio įrašus/produktus – Pridėkite mygtuką „Įkelti daugiau“ arba begalinį slinktį, kad įkeltumėte daugiau tinklaraščio įrašų ar produktų.
  • Tingiai krauna komentarus - Aš naudoju Disqus sąlyginį įkėlimą, nes naudoju Disqus . Jei naudojate savo komentarus, naudokite papildinius, pvz., Lazy Load for Comments .
  • Komentarų puslapiavimas - Jei turite šimtus komentarų, tai taip pat gali turėti įtakos DOM dydžiui. Norėdami surūšiuoti komentarus, eikite į Nustatymai -> Diskusija -> Sutvarkyti komentarus.
  • Apribokite susijusių įrašų skaičių – Pabandykite apriboti susijusių įrašų skaičių iki 3 arba 4.

Pastaba: tingus vaizdų įkėlimas nesumažins DOM dydžio

Neslėpkite nepageidaujamų elementų naudodami CSS

Kartais gali tekti pašalinti temos / dizainerio įvestus elementus. Pavyzdžiui, pridėkite mygtuką į krepšelį produktų puslapiuose, įvertinimo mygtuką, informaciją apie autorių, paskelbimo datą ir kt.

Greitas sprendimas yra paslėpti juos naudojant CSS:

.cart-button {display:none;}

Nors šis sprendimas atrodo paprastas, naudotojai susiduria su nepageidaujamu kodu (įskaitant HTML žymėjimą ir CSS stilių).

Patikrinkite temos / papildinio nustatymus, kad sužinotumėte, ar yra galimybė jį pašalinti. Kitu atveju suraskite atitinkamą PHP kodą ir pašalinkite / pakomentuokite.

Naudokite gerai parašytas temas ir puslapių kūrimo priemones

Gera tema vaidina svarbų vaidmenį nustatant DOM dydį. Naudokite gerai parašytas temas, pvzSukurti spaudą arbaAstra .

Puslapių kūrėjai taip pat įveda per daug div. Naudokite tokius konstruktoriusdeguonies, kurie neįveda nepageidaujamų div blokų ir labiau kontroliuoja HTML struktūrą.

Išvada

Gali būti daugiau papildinių arba temų nustatymų, kurie įveda per daug div. Pavyzdys galėtų būti „megamenu“ papildiniai, tokie kaip „UberMenu“.

Kartais jie yra labai svarbūs jūsų svetainės naudotojų patirčiai. Tačiau kartais vartotojai jų niekada nenaudoja.

Galbūt jūsų poraštės nuorodos niekada nespaudžiamos, nes dauguma lankytojų slenka tik iki 75%.

Naudokite tokius įrankius kaip „HotJar“ arba „Google Analytics Events“, kad sužinotumėte, ką lankytojai iš tikrųjų naudoja ir ko ne.Analizuokite, išmatuokite ir pakartokite.

Įdomios Straipsniai