Ili u GTmetrixu "Smanji broj DOM elemenata":
Što je DOM?
Kada vaš preglednik primi HTML dokument, on se mora pretvoriti u strukturu stabla koja se koristi za renderiranje i crtanje pomoću CSS-a i JavaScripta.
Ova struktura stabla naziva se DOM ili objektni model dokumenta.
- Čvorovi Svi HTML elementi u DOM-u nazivaju se čvorovi. (aka "lišće" na drvetu).
- Dubina – Koliko dugo "grana" ide u stablu zove se dubina. Na primjer, u dijagramu iznad, oznaka img ima dubinu od 3. (HTML -> tijelo -> div -> img).
- Dječji elementi – svi podređeni čvorovi čvora (bez daljnjeg grananja) su djeca.
Lighthouse i Google PageSpeed Insights počinju označavati stranice ako je ispunjen jedan od sljedećih uvjeta:
- Ukupno ima više od 1500 čvorova.
- Imaju dubinu veću od 32 čvora.
- Roditeljski čvor ima više od 60 podređenih čvorova.
Kako veličina DOM-a utječe na performanse?
Prekomjerna veličina DOM-a može utjecati na performanse na različite načine.
- Više vrijeme analize i generiranja (FCP) . Veliko DOM stablo i složena pravila stila odlično rade za preglednik. Preglednik mora raščlaniti HTML, izgraditi stablo renderiranja, itd. Svaki put kada korisnik stupi u interakciju ili se nešto u HTML-u promijeni, preglednik to mora ponovno izračunati.
- Povećava upotrebu memorije - Vaš JavaScript kod može imati funkcije za pristup DOM elementima. Veće DOM stablo prisiljava JavaScript da koristi više memorije za njihovu obradu. Primjer bi bio birač upita, u
document.querySelectorAll('img')koji navodi sve slike koje obično koriste biblioteke s lijenim učitavanjem. - Povećava TTFB – Kako se veličina DOM-a povećava, povećava se i veličina HTML dokumenta (u KB). Budući da je potrebno više podataka prenijeti preko mreže, to povećava TTFB.
Kako tehnički smanjiti veličinu DOM-a?
Na primjer, tehnički je jednostavno smanjiti veličinu DOM-a:
upotreba:
<ul id="navigation-main">etc..</ul>umjesto:
<div id="navigation-main"><ul>etc..</ul></div>Uglavnom, riješite se svih mogućih HTML elemenata. Također možete koristiti Flexbox ili Grid za dodatno smanjenje veličine DOM-a.
Ali budući da koristite WordPress, ovo vam neće puno pomoći!
Kako smanjiti veličinu DOM-a u WordPressu?
Podijelite velike stranice na više stranica
Imate li stranicu sa svime na stranici? Poput usluga, obrazaca za kontakt, proizvoda, postova na blogu, svjedočanstava itd.?
Pokušajte ih podijeliti na više stranica i povezati na njih iz zaglavlja/navbara.
Lijeno učitavanje i paginacija svega što je moguće
Lijeno učitavanje svih vrsta elemenata. Evo nekoliko primjera:
- YouTube video lijeno učitavanje - Koristite WP YouTube Lyte ili Lazy Load od WP Rocket.
- Ograničite broj postova/proizvoda na blogu po stranici – Obično nastojim zadržati najviše 10 blog postova po stranici, a ostale paginirati.
- Lijeno učitavanje postova/proizvoda na blogu – Dodajte gumb Učitaj više ili beskonačno pomicanje za učitavanje više postova na blogu ili proizvoda.
- Lijeno učitavanje komentara - Koristim Disqus uvjetno učitavanje budući da koristim Disqus . Ako koristite vlastite komentare, koristite dodatke poput Lazy Load for Comments.
- Paginacija komentara - ako imate stotine komentara, to također može utjecati na veličinu DOM-a. Za paginaciju komentara idite na Postavke -> Rasprava -> Paginiraj komentare.
- Ograničite broj povezanih postova – Pokušajte ograničiti broj povezanih postova na 3 ili 4.
Napomena: lijeno učitavanje slika neće smanjiti veličinu DOM-a
Nemojte skrivati neželjene elemente pomoću CSS-a
Ponekad ćete možda morati ukloniti elemente koje je uvela tema/dizajner. Na primjer, dodajte gumb u košaricu na stranicama proizvoda, gumb za cijenu, podatke o autoru, datum objave itd.
Brzo rješenje je da ih sakrijete pomoću CSS-a:
.cart-button {display:none;}Iako ovo rješenje izgleda jednostavno, izlažete korisnike neželjenom kodu (koji uključuje i HTML označavanje i CSS stil).
Provjerite postavke teme/dodatka da vidite postoji li opcija za uklanjanje. U suprotnom pronađite relevantni PHP kod i uklonite ga/komentirajte.
Koristite dobro napisane teme i alate za izgradnju stranica
Dobra tema igra važnu ulogu u veličini DOM-a. Koristite dobro napisane teme poputGeneratePress iliAstra .
Graditelji stranica također uvode previše divova. Koristite konstruktore poputkisik, koji ne uvode neželjene div blokove i imaju veću kontrolu nad HTML strukturom.
Zaključak
Možda postoji više dodataka ili postavki teme koje uvode previše divova. Primjer bi bili dodaci "mega izbornika" kao što je UberMenu.
Ponekad su kritični za korisničko iskustvo vaše stranice. Ali ponekad ih korisnici nikada ne koriste.
Možda se vaše veze u podnožju nikada ne kliknu jer većina posjetitelja pomiče samo do 75%.
Koristite alate kao što su HotJar ili Google Analytics Events kako biste saznali što posjetitelji zapravo koriste, a što ne.Analizirajte, izmjerite i ponovite.
