sl.allworldrating.com
Članki

Kako zmanjšati velikost DOM v WordPressu

Ali v GTmetrix "Zmanjšaj število elementov DOM":

Kaj je DOM?

Ko vaš brskalnik prejme dokument HTML, ga je treba pretvoriti v drevesno strukturo, ki se uporablja za upodabljanje in risanje s CSS in JavaScript.

Ta drevesna struktura se imenuje DOM ali dokumentni objektni model.

  • Vozli Vsi elementi HTML v DOM-u se imenujejo vozlišča. (tudi "listje" na drevesu).
  • Globina – Koliko časa je »veja« na drevesu, se imenuje globina. Na primer, v zgornjem diagramu ima oznaka img globino 3. (HTML -> body -> div -> img).
  • Otroški elementi – vsa podrejena vozlišča vozlišča (brez nadaljnjega razvejanja) so podrejena.

Lighthouse in Google PageSpeed ​​Insights začneta označevati strani, če je izpolnjen eden od naslednjih pogojev:

  • Skupaj ima več kot 1500 vozlišč.
  • Imajo globino več kot 32 vozlov.
  • Nadrejeno vozlišče ima več kot 60 podrejenih vozlišč.

Kako velikost DOM vpliva na zmogljivost?

Prekomerna velikost DOM lahko vpliva na delovanje na različne načine.

  • Višji čas razčlenjevanja in upodabljanja (FCP) . Veliko drevo DOM in zapletena slogovna pravila odlično opravijo brskalnik. Brskalnik mora razčleniti HTML, zgraditi drevo upodabljanja itd. Vsakič, ko uporabnik interagira ali se kaj spremeni v HTML-ju, mora brskalnik to znova izračunati.
  • Poveča porabo pomnilnika – Vaša koda JavaScript ima lahko funkcije za dostop do elementov DOM. Večje drevo DOM prisili JavaScript, da uporabi več pomnilnika za njihovo obdelavo. Primer bi bil izbirnik poizvedb, vdocument.querySelectorAll('img')ki navaja vse slike, ki jih običajno uporabljajo knjižnice z leno nalaganjem.
  • Poveča TTFB – Ko se velikost DOM-a poveča, se poveča velikost dokumenta HTML (v KB). Ker je treba več podatkov prenesti po omrežju, to poveča TTFB.

Kako tehnično zmanjšati velikost DOM?

Na primer, tehnično je enostavno zmanjšati velikost DOM-a:

uporaba:

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

namesto:

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

V bistvu se znebite vseh možnih elementov HTML. Za dodatno zmanjšanje velikosti DOM lahko uporabite tudi Flexbox ali Grid.

Ker pa uporabljate WordPress, vam to ne bo veliko pomagalo!

Kako zmanjšati velikost DOM v WordPressu?

Razdeli velike strani na več strani

Ali imate stran z vsem na spletnem mestu? Kot storitve, kontaktni obrazci, izdelki, objave v blogu, pričevanja itd.?

Poskusite jih razdeliti na več strani in povezati z njimi iz glave/krmarjenja.

Leno nalaganje in paginacija vsega možnega

Leno nalaganje vseh vrst elementov. Tukaj je nekaj primerov:

  • YouTube video leno nalaganje - Uporabite WP YouTube Lyte ali Lazy Load podjetja WP Rocket.
  • Omejite število blog objav/izdelkov na stran – Običajno poskušam obdržati največ 10 objav v blogu na stran, ostale pa paginirati.
  • Leno nalaganje objav/izdelkov v blogu – Dodajte gumb Naloži več ali neskončno drsenje, da naložite več objav v spletnem dnevniku ali izdelkov.
  • Leno nalaganje komentarjev - Uporabljam Disqus pogojno nalaganje, saj uporabljam Disqus. Če uporabljate lastne komentarje, uporabite vtičnike, kot je Lazy Load for Comments .
  • Paginacija komentarjev - če imate na stotine komentarjev, lahko to vpliva tudi na velikost DOM. Če želite razvrstiti komentarje na strani, pojdite na Nastavitve -> Razprava -> Paginiraj komentarje.
  • Omejite število povezanih objav – Poskusite omejiti število povezanih objav na 3 ali 4.

Opomba: leno nalaganje slik ne bo zmanjšalo velikosti DOM-a

Ne skrivajte neželenih elementov s CSS

Včasih boste morda morali odstraniti elemente, ki jih uvede tema/oblikovalec. Na primer, dodajte gumb v košarico na straneh izdelkov, gumb za oceno, podatke o avtorju, datum objave itd.

Hitra rešitev je, da jih skrijete s CSS:

.cart-button {display:none;}

Čeprav je ta rešitev videti preprosta, uporabnike izpostavljate neželeni kodi (ki vključuje označevanje HTML in slog CSS).

Preverite nastavitve teme/vtičnika in preverite, ali obstaja možnost odstranitve. V nasprotnem primeru poiščite ustrezno kodo PHP in jo odstranite/komentirajte.

Uporabite dobro napisane teme in graditelje strani

Dobra tema igra pomembno vlogo pri velikosti DOM. Uporabite dobro napisane teme, kot soGeneratePress ozAstra .

Graditelji strani uvajajo tudi preveč div. Uporabite konstruktorje, kot jekisik, ki ne uvajajo neželenih blokov div in imajo večji nadzor nad strukturo HTML.

Zaključek

Morda je več vtičnikov ali nastavitev teme, ki uvajajo preveč div. Primer bi bili vtičniki "mega menija", kot je UberMenu.

Včasih so ključnega pomena za uporabniško izkušnjo vašega spletnega mesta. Toda včasih jih uporabniki nikoli ne uporabljajo.

Morda se vaše povezave v nogi nikoli ne kliknejo, ker se večina obiskovalcev pomakne le do 75%.

Uporabite orodja, kot sta HotJar ali Google Analytics Events, da ugotovite, kaj obiskovalci dejansko uporabljajo in česa ne.Analizirajte, izmerite in ponovite.

Zanimivi Članki