Tai GTmetrixissä "Vähennä DOM-elementtien määrää":
Mikä on DOM?
Kun selaimesi vastaanottaa HTML-dokumentin, se on muutettava puurakenteeksi, jota käytetään renderöimiseen ja piirtämiseen CSS:llä ja JavaScriptillä.
Tätä puurakennetta kutsutaan DOM- tai asiakirjaobjektimalliksi.
- Solmut Kaikkia DOM:n HTML-elementtejä kutsutaan solmuiksi. (alias "lehdet" puussa).
- Syvyys – Sitä, kuinka kauan "oksa" menee puussa, kutsutaan syvyydeksi. Esimerkiksi yllä olevassa kaaviossa img-tunnisteen syvyys on 3. (HTML -> body -> div -> img).
- Lapsi elementtejä – kaikki solmun lapsisolmut (ilman haaroittumista) ovat lapsia.
Lighthouse ja Google PageSpeed Insights alkavat merkitä sivuja, jos jokin seuraavista ehdoista täyttyy:
- Yhteensä yli 1500 solmua.
- Niiden syvyys on yli 32 solmua.
- Pääsolmussa on yli 60 alisolmua.
Miten DOM-koko vaikuttaa suorituskykyyn?
Liiallinen DOM-koko voi vaikuttaa suorituskykyyn eri tavoin.
- Korkeampi jäsennys- ja renderöintiaika (FCP) . Suuri DOM-puu ja monimutkaiset tyylisäännöt tekevät hyvää työtä selaimelle. Selaimen täytyy jäsentää HTML, rakentaa renderöintipuu jne. Aina kun käyttäjä on vuorovaikutuksessa tai jotain HTML:ssä muuttuu, selaimen on laskettava se uudelleen.
- Lisää muistin käyttöä - JavaScript-koodillasi voi olla toimintoja DOM-elementtien käyttämiseen. Suurempi DOM-puu pakottaa JavaScriptin käyttämään enemmän muistia niiden käsittelemiseen. Esimerkkinä voisi olla kyselyn valitsin
document.querySelectorAll('img')joka luettelee kaikki laiskalataavien kirjastojen yleisesti käyttämät kuvat. - Lisää TTFB:tä – Kun DOM:n koko kasvaa, HTML-asiakirjan koko kasvaa (kt). Koska verkon yli on siirrettävä enemmän dataa, tämä lisää TTFB:tä.
Kuinka pienentää DOM-kokoa teknisesti?
Esimerkiksi DOM:n koon pienentäminen on teknisesti helppoa:
käyttö:
<ul id="navigation-main">etc..</ul>sijasta:
<div id="navigation-main"><ul>etc..</ul></div>Periaatteessa eroon kaikista mahdollisista HTML-elementeistä. Voit myös käyttää Flexboxia tai Gridiä pienentääksesi DOM-kokoa entisestään.
Mutta koska käytät WordPressiä, tämä ei auta sinua paljon!
Kuinka pienentää DOM-kokoa WordPressissä?
Jaa suuret sivut useiksi sivuiksi
Onko sinulla sivu, jossa on kaikki sivustolla oleva? Kuten palvelut, yhteydenottolomakkeet, tuotteet, blogiviestit, suosittelut jne.?
Yritä jakaa ne useiksi sivuiksi ja linkittää niihin otsikosta/navigointipalkista.
Laiska lataus ja kaiken mahdollisen sivutus
Kaikenlaisten elementtien laiska lataus. Tässä on joitain esimerkkejä:
- YouTube-videon laiska lataus - Käytä WP YouTube Lyte tai Lazy Load by WP Rocket.
- Rajoita blogitekstien/tuotteiden määrää sivulla – Pyrin yleensä pitämään enintään 10 blogitekstiä sivulla ja sivuttelen loput.
- Laiskaa blogitekstien/tuotteiden lataamista - Lisää Lataa lisää -painike tai loputon vieritys ladataksesi lisää blogiviestejä tai tuotteita.
- Kommenttien laiska lataus - Käytän Disqusin ehdollista latausta, koska käytän Disqusia. Jos käytät omia kommenttejasi, käytä lisäosia, kuten Lazy Load for Comments .
- Kommenttien sivutus - Jos sinulla on satoja kommentteja, tämä voi myös vaikuttaa DOM-kokoon. Sivuttele kommentit valitsemalla Asetukset -> Keskustelu -> Sivuta kommentit.
- Rajoita aiheeseen liittyvien viestien määrää – Yritä rajoittaa aiheeseen liittyvien viestien lukumäärä kolmeen tai neljään.
Huomautus: kuvien laiska lataaminen ei vähennä DOM:n kokoa
Älä piilota ei-toivottuja elementtejä CSS:llä
Joskus saatat joutua poistamaan teeman/suunnittelijan tuomia elementtejä. Lisää esimerkiksi ostoskoriin tuotesivuilla painike, hintapainike, tekijän tiedot, julkaisupäivä jne.
Pikakorjaus on piilottaa ne CSS:llä:
.cart-button {display:none;}Vaikka tämä ratkaisu näyttää yksinkertaiselta, altistat käyttäjät ei-toivotulle koodille (joka sisältää sekä HTML-merkinnät että CSS-tyylit).
Tarkista teemasi/laajennuksesi asetuksista, onko mahdollista poistaa se. Muussa tapauksessa etsi sopiva PHP-koodi ja poista/kommentoi se.
Käytä hyvin kirjoitettuja teemoja ja sivujen rakentajia
Hyvällä teemalla on tärkeä rooli DOM-koossa. Käytä hyvin kirjoitettuja teemoja, kutenGeneratePress taiAstra .
Sivujen rakentajat ottavat käyttöön myös liian monta div-tunnusta. Käytä rakentajia, kutenhappi, jotka eivät lisää ei-toivottuja div-lohkoja ja hallitsevat paremmin HTML-rakennetta.
Johtopäätös
Saattaa olla enemmän laajennuksia tai teema-asetuksia, jotka sisältävät liian monta div:tä. Esimerkkinä voisivat olla "mega menu" -laajennukset, kuten UberMenu.
Joskus ne ovat kriittisiä sivustosi käyttökokemuksen kannalta. Mutta joskus käyttäjät eivät koskaan käytä niitä.
Kenties alatunnisteen linkkejäsi ei koskaan napsautettu, koska useimmat vierailijat vierittävät vain 75 prosenttiin.
Käytä työkaluja, kuten HotJar tai Google Analytics Events, selvittääksesi, mitä vierailijat todella käyttävät ja mitä he eivät käytä.Analysoi, mittaa ja toista.
