Tamanho excessivo do DOM

A Silktide mede quantos elementos compõem a sua página e a profundidade do seu aninhamento. As páginas compostas por elementos em excesso demoram mais a carregar, demoram mais a responder e usam mais memória nos dispositivos dos seus visitantes.

Cada título, parágrafo, imagem e contentor numa página é um elemento no modelo interno que o navegador tem da página, o . Os navegadores lidam facilmente com algumas centenas de elementos; páginas com milhares tornam cada cálculo de estilo, passagem de layout e atualização de script mensuravelmente mais lentos.

Por que isso é importante

Os visitantes percebem uma página demasiado grande como lentidão: a página demora mais a aparecer, a deslocação apresenta interrupções e as interações, como abrir um menu, sofrem atrasos percetíveis. O efeito é pior nos dispositivos com menos potência disponível — telemóveis económicos e computadores antigos —, por isso os visitantes com o hardware mais lento têm a pior versão do seu site.

As páginas demasiado grandes normalmente não são concebidas assim de propósito. Vão crescendo: criadores de páginas que envolvem tudo em camadas de contentores, variantes ocultas do mesmo conteúdo para diferentes tamanhos de ecrã e listas longas apresentadas na íntegra, apesar de os visitantes verem apenas o primeiro ecrã.

Como corrigir

Descubra o que está a aumentar o tamanho da página. Os culpados mais comuns são temas de criadores de páginas que geram elementos de agrupamento profundamente aninhados, megamenus que incorporam toda a estrutura do site em cada página e tabelas longas ou listas de produtos apresentadas na íntegra.
Apresente listas longas de forma incremental: mostre os primeiros itens e carregue mais à medida que o visitante percorre a página ou avança pelas páginas, em vez de colocar milhares de linhas na página de uma só vez.
Evite duplicar conteúdo para diferentes dispositivos. Aplique estilos a uma única cópia com , em vez de disponibilizar versões separadas, ocultas, para computadores e dispositivos móveis com o mesmo conteúdo.
Divida páginas muito longas em várias páginas mais pequenas quando o conteúdo o permitir.

Como a Silktide faz a verificação

Carregue a página num navegador real, utilizando o tipo de dispositivo, a velocidade de ligação e a localização do teste configurados para as suas verificações de velocidade.
Conte os elementos que compõem a página totalmente carregada, incluindo tudo o que for adicionado pelo .
Meça três estatísticas e identifique o elemento responsável por cada uma: o número total de elementos, o aninhamento máximo dos elementos e o maior número de elementos subordinados a um único elemento principal.
Atribua uma classificação a cada estatística. Cerca de 1.000 elementos no total, um aninhamento com cerca de 24 níveis de profundidade ou um elemento principal com cerca de 45 elementos subordinados começa a baixar a classificação; cerca de 1.500 elementos, 32 níveis ou 60 elementos subordinados recebe uma classificação fraca.

Resolução de problemas

A página não parece grande

A contagem de elementos diz respeito à estrutura, não ao conteúdo visível. Uma página visualmente simples pode conter milhares de elementos se cada item visível estiver envolvido em muitas camadas de contentores ou se estiver presente conteúdo para outros tamanhos de ecrã, mas oculto. Os elementos comunicados para cada estatística mostram onde está realmente a maior parte do conteúdo.

A grande quantidade de elementos vem do meu tema ou criador de páginas

Isso é comum e, normalmente, não é algo que os editores de conteúdo possam corrigir. Encaminhe o resultado para a pessoa responsável pela manutenção do tema ou dos modelos do site; desativar funcionalidades não utilizadas do criador de páginas ou simplificar os modelos costuma remover centenas de elementos de uma só vez.