O DOM (Modelo de Objeto de Documento) é o nome geral para a estrutura em árvore das tags HTML. Seu impacto na velocidade da página é tal que quanto mais complexa for a estrutura HTML durante a renderização da página, mais lenta ela será.

De acordo com Lighthouse, a complexidade do A estrutura do DOM é medida usando três métricas. Para fornecer a essas métricas seus pontos de referência:

  • O número total de tags deve ser menos de 1500
  • A profundidade máxima da etiqueta deve ser menos de 32
  • O número máximo de tags filhas deve ser menos de 60

No exemplo acima, o número total de tags é baixo, a profundidade máxima da tag é boa, mas o número máximo de tags filhas é ruim.

A otimização dos elementos DOM é inteiramente de responsabilidade da parte interessada do frontend. Cada tag escolhida aleatoriamente ou arbitrariamente quando o código da página é criado pela primeira vez tem um custo quando o projeto é concluído. Portanto, convidamos todos os desenvolvedores frontend a um momento de silêncio e a abrirem os olhos.

Os pontos em que um DOM inflacionado afeta negativamente o desempenho da página incluem:

  • Páginas com um grande número de nós (tags) experimentarão congestionamento da rede e dificuldade de carregamento devido ao seu grande tamanho, aumentando assim o TTFB (tempo até o primeiro byte).
  • Renderizando nós carregados para criar suas posições e estilos levam tempo, aumentando assim o FCP (First Contentful Paint).
  • À medida que o número de nós aumenta, a carga necessária com Manipulações de JavaScript sobrecarregam a memória, aumentando o TFT (tempo de interação).

Para ilustrar a otimização do DOM com um exemplo muito simples, considere o seguinte, onde o número e a profundidade do DOM são reduzidos:

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

Em vez de fazer isso:

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

É necessário fazer isso: Os dois métodos mais recomendados para reduzir o tamanho do DOM são carregamento lento e paginação. Como as estruturas de cartão nas páginas de listagem contêm muito DOM, sugere-se rolagem ou paginação infinita. Ao decidir sobre o número de itens na paginação, os critérios de medição do DOM devem ser definitivamente considerados. O tempo normalmente considerado para o número de produtos na paginação é de 15 a 20 segundos, mas esta parte deve ser calculada do lado da parte interessada do frontend, considerando o tamanho do DOM.

Uma das soluções muito simples é não adicionar elementos que não são visíveis na página para o HTML sem ocultá-los com CSS. Se um elemento precisar ser exibido, ele deverá ser chamado posteriormente e mostrado ao usuário. Você deve estar ciente de que ocultar elementos com CSS aumenta o DOM.

Fontes: