DOM (Document Object Model) är det allmänna namnet för HTML-taggars trädstruktur. Dess inverkan på sidhastigheten är sådan att ju mer komplex din HTML-struktur är under sidrendering, desto långsammare blir din sida.

Enligt Lighthouse, komplexiteten i DOM-strukturen mäts med hjälp av tre mått. För att tillhandahålla dessa mätvärden med deras referenspunkter:

  • Det totala antalet taggar bör vara mindre än 1500
  • Det maximala taggdjupet bör vara mindre än 32
  • Det maximala antalet underordnade taggar bör vara mindre än 60

I exemplet ovan är det totala antalet taggar dåligt, det maximala taggdjupet är bra, men det maximala antalet underordnade taggar är dåligt.

Att optimera DOM-element är helt och hållet ansvaret för frontend-intressenten. Varje tagg som väljs slumpmässigt eller godtyckligt när sidkoden först skapas har en kostnad när projektet är klart. Därför inbjuder vi alla frontend-utvecklare till en tyst stund och att öppna ögonen.

Punkter där en uppblåst DOM negativt påverkar sidprestanda inkluderar:

  • Sidor med ett stort antal noder (taggar) kommer att upplevas nätverksöverbelastning och laddningssvårigheter på grund av deras stora storlek, vilket ökar TTFB (Time to First Byte).
  • Rendering av laddade noder att skapa deras positioner och stilar tar tid, vilket ökar FCP (First Contentful Paint).
  • När antalet noder ökar kommer den nödvändiga belastningen med JavaScript-manipulationer belastar minnet, ökar TFT (Time to Interactive).

För att illustrera DOM-optimering med ett mycket enkelt exempel, överväg följande där både antalet och djupet på DOM reduceras:

<div id="nav-element">
 <ul>
 </ul>
</div>

Istället för att göra så här:

<ul id="nav-element">
</ul>

Det är nödvändigt att göra detta: De två mest rekommenderade metoderna för att minska DOM-storleken är lat inläsning och paginering. Eftersom kortstrukturer på listningssidor innehåller mycket DOM, föreslås oändlig rullning eller paginering. När man bestämmer sig för antalet artiklar i paginering bör DOM-mätkriterierna definitivt beaktas. Den tid man brukar tänka på antalet produkter i paginering är 15-20 sekunder, men denna del bör faktiskt beräknas på frontend-intressenters sida, med tanke på DOM-storleken.

En av de mycket enkla lösningarna är att inte lägga till element som inte är synliga på sidan till HTML utan att dölja dem med CSS. Om ett element behöver visas ska det anropas senare och visas för användaren. Du bör vara medveten om att dölja element med CSS förstorar DOM.

Källor: