7 estrategias comprobadas para corregir la advertencia "Evitar un tamaño de DOM excesivo"

Publicado: 2022-11-23
TL;DR: corregir la advertencia "Evitar un tamaño de DOM excesivo" no mejorará sus puntajes de Lighthouse, pero tiene un impacto directo en el rendimiento real de su sitio. Un DOM de gran tamaño ralentiza su sitio, aumenta el tiempo de renderizado y los costos de datos para sus usuarios y sobrecarga la memoria de sus dispositivos. Existen numerosas soluciones para el problema del tamaño excesivo de DOM, como evitar temas y complementos mal codificados, dividir su sitio web de una sola página en varias páginas y usar los creadores de páginas con precaución.

La mayoría de las sugerencias de mejora de Google PageSpeed ​​Insights son bastante sencillas.

Ya sea "aplazar las imágenes fuera de la pantalla", "eliminar los recursos que bloquean el renderizado" o "reducir el CSS no utilizado", puede comprender los próximos pasos que debe seguir para solucionar los problemas.

Sin embargo, cuando se desplaza un poco más profundo, de repente recibe la advertencia "Evitar un tamaño de DOM excesivo":

Primera reacción:

¿Qué diablos es el tamaño del DOM y cómo lo soluciono?

Estás en el lugar correcto.

En los siguientes párrafos, aprenderá todo lo que necesita saber sobre el tamaño del DOM y cómo lidiar con esta advertencia:

  • ¿Qué es DOM (Modelo de objeto de documento)?
  • ¿Cuál es el impacto del tamaño del DOM en el rendimiento de la página?
  • Por qué aparece la advertencia "Evitar un tamaño de DOM excesivo"
  • Cómo corregir la advertencia "Evitar un tamaño de DOM excesivo"

Consigue una puntuación de más de 90 PSI con solo hacer clic en un botón. ¡Vea su sitio con NitroPack!

¿Qué es DOM?

Su sitio web incluye recursos como un documento HTML, CSS y archivos JavaScript.

Cada vez que un usuario carga su sitio web, su navegador establece una conexión y recibe los recursos. Una vez que se recibe el primer fragmento de datos, comienza el proceso de análisis.

El análisis es el paso que toma el navegador para convertir los datos (marcado HTML) en el árbol DOM.

El DOM es un modelo de documento que representa HTML como un árbol de ramas y nodos.

Cada rama del árbol termina en un nodo y cada nodo contiene objetos. Un nodo representa parte del documento, como un elemento, una cadena de texto o un comentario.

En términos más simples, cuando escuchas DOM, se refiere a la estructura de objetos que el navegador crea cada vez que se carga una página web.

Términos clave:

  • Nodos. Cada elemento o etiqueta en el DOM se denomina nodo u hoja.
  • Profundidad. El número de elementos en una rama de un DOM.
  • elemento hijo. El último nodo que no se bifurca más.

¿Cuál es el impacto del tamaño del DOM en el rendimiento de la página?

Cuantas más ramas y nodos tenga tu DOM, mayor será su tamaño.

Respectivamente, cuanto mayor sea el tamaño del DOM, más problemas de rendimiento negativos podría enfrentar.

Estos son algunos de los problemas que se correlacionan con un tamaño de DOM más grande:

1. Mayores costos de datos y tiempos de carga más lentos

Un árbol DOM grande a menudo incluye muchos nodos que no son visibles cuando el usuario carga la página por primera vez. Esto aumentará innecesariamente los costos de datos, ya que tendrán que cargar más elementos para sus usuarios y ralentizará el tiempo de carga.

2. Abruma los recursos de memoria del dispositivo de su usuario

La interacción continua con las consultas de JavaScript genera un rendimiento deficiente y una representación lenta. Esto da como resultado una experiencia de página negativa para los usuarios de su sitio.

3. Mayor tiempo de renderizado

A medida que los usuarios interactúan con su página, el navegador debe volver a calcular constantemente la posición y el estilo de los nodos. Un árbol DOM grande y complicado puede ralentizar drásticamente el renderizado.

4. Mayor tiempo hasta el primer byte (TTFB)

TTFB mide cuánto tarda el navegador de un cliente en recibir el primer byte de la respuesta del servidor. Un DOM excesivo indica un documento HTML más grande. Como resultado, hay más cantidad de datos para transportar, lo que podría llevar más tiempo.

Por qué aparece la advertencia "Evitar un tamaño de DOM excesivo" en PageSpeed ​​Insights

PSI utiliza Lighthouse para analizar URL en un entorno controlado (es decir, utilizando datos de laboratorio) para mostrar el rendimiento, la accesibilidad, las mejores prácticas y la puntuación de SEO.

Para que Lighthouse marque su página y, respectivamente, muestre la advertencia "Evitar un tamaño de DOM excesivo" en su informe PSI, cualquiera de los siguientes errores debe ser cierto para su árbol DOM:

  • Tiene más de 1500 nodos DOM en total.
  • Tiene una profundidad de nodo máxima superior a 32 nodos .
  • Un nodo principal tiene más de 60 nodos secundarios .

Es bueno saberlo: el tamaño del DOM no afecta directamente sus puntajes de Lighthouse (es decir, rendimiento, accesibilidad, mejores prácticas y SEO). Sin embargo, un tamaño de DOM excesivo afectará negativamente el rendimiento real de su sitio, lo que provocará tiempos de carga lentos y una mala experiencia de usuario para sus usuarios.

¡Únase al 31% superior de los sitios web que pasan sus Core Web Vitals! Vea su sitio con NitroPack

 

Cómo solucionar Evitar un tamaño DOM excesivo

Una buena regla general de Google es:

 "En general, busque formas de crear nodos DOM solo cuando sea necesario y destrúyalos cuando ya no los necesite".

Por supuesto, es más fácil decirlo que hacerlo, y habrá ocasiones en las que necesite ir al meollo de la cuestión de optimizar su sitio web.

Entonces, sugerimos aplicar algunas de las siguientes correcciones:

1. Evite complementos y temas mal codificados

Básicamente, inflarán el código de su sitio, aumentarán el tamaño de su DOM y dañarán la velocidad y el rendimiento general de su sitio.

¿Cómo puede saber si un tema/complemento estaba mal codificado?

Gran pregunta. Y la respuesta es:

  • Lee las reseñas. Si hay problemas, es probable que alguien ya los haya encontrado y comentado.
  • No sea tímido para gastar algo de dinero. Al igual que cualquier otra cosa, obtienes lo que pagas. Ahorrar dinero al obtener un tema/complemento gratuito puede sonar genial, pero los efectos a largo plazo le costarán mucho más.
  • Compruebe cuándo se actualizó por última vez. Definitivamente desea evitar temas y complementos desactualizados.

Si eres usuario de WooCommerce o planeas abrir una tienda, definitivamente deberías consultar nuestra investigación en profundidad sobre los temas de Woo con mejor rendimiento en 2022.

Aquí hay una lista de verificación de cosas que debe tener en cuenta/evitar al seleccionar un tema:

  1. Temas polivalentes. Vienen con muchas opciones que nunca usarás y, al mismo tiempo, inflarán tu código.
  2. Versiones gratuitas. Nuevamente, son excelentes para una prueba de manejo, pero a menudo tienen un rendimiento inferior y pueden causarle muchos problemas.
  3. Temas anulados. Nunca use una versión descifrada de un tema pago, ya que puede contener scripts maliciosos que podrían dañar su sitio web.

 

2. Minimice los nodos DOM basados ​​en JavaScript

Agregar elementos dinámicos en su sitio web tiene un precio, ya que podrían inflarlo con nodos de JavaScript adicionales.

Para empezar, puede solucionarlo asignando los archivos JS que causan problemas y eliminándolos. En caso de que se trate de un widget de terceros (por ejemplo, un widget de chat), debe buscar una alternativa optimizada.

3. Creadores de páginas que generan HTML inflado

La facilidad de uso de los creadores de páginas los ha convertido en una parte integral del proceso de creación de sitios web para muchos usuarios.

Desafortunadamente, los creadores de páginas a veces pueden producir código inflado con una cantidad excesiva de nodos DOM. Lo están haciendo inyectando demasiadas etiquetas div.

Para solucionarlo, puede acceder a su HTML y corregirlo manualmente.

La buena noticia es que algunos creadores de páginas toman medidas para resolver estos problemas conocidos. Por ejemplo, Elementor ha anunciado que Elementor 3.0 viene con importantes mejoras de DOM para aumentar la velocidad y el rendimiento de los nuevos sitios web.

4. No copie/pegue texto en el editor WYSIWYG

La mayoría de los editores WYSIWYG (Lo que ves es lo que obtienes) fallan al limpiar el código pegado. Especialmente cuando se pega desde otra fuente de texto enriquecido como Microsoft Word. El problema es que no solo copiará el texto sino también sus estilos. Y son los principales culpables, ya que pueden incrustar muchos nodos DOM.

Tienes un par de opciones para lidiar con eso:

  • Evita pegar texto en tu editor
  • Utilice la opción Pegar como texto sin formato
  • (Si su editor lo permite) Use las funciones avanzadas para limpiar el código después de pegarlo

Y por último, pero no menos importante, regrese a sus páginas antiguas y límpielas.

5. Divide tu sitio web de una página en varias páginas

Un sitio web de una sola página es una gran idea cuando su único propósito es presentar su negocio.

Por el contrario, si decide agregar información comercial, artículos de blog, productos, formularios de contacto, etc., divídalos en páginas separadas y vincúlelos a través del menú de navegación.

Dividir páginas grandes en varias páginas podría reducir la cantidad de nodos DOM.

6. No oculte elementos no deseados usando display:none

display: none se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos y volver a crearlos. Sin embargo, eso no significa que desaparezcan de su marcado HTML, dejando a los visitantes cargando elementos no deseados.

7. Evite el uso de declaraciones CSS complicadas y JavaScript

Las declaraciones de CSS complicadas y JavaScript también pueden aumentar el uso de la memoria y ralentizar su sitio. Es mejor omitirlos si se trata de una cantidad excesiva de nodos DOM.

¡Solucione los problemas de CSS y JavaScript automáticamente! Vea su sitio con NitroPack

En conclusión

Es cierto que solucionar sus problemas de DOM no conducirá a una mejora en sus puntajes de PageSpeed ​​Insights.

Sin embargo, los beneficios ocultos de esforzarse en lidiar con la advertencia "evitar un tamaño excesivo de DOM" son mucho mayores:

  • Aumenta el tiempo de carga de tu sitio
  • Mejora el rendimiento percibido de tu página
  • Proporcionar a los visitantes una mejor experiencia de usuario.

¡Lo más importante es que estas tres cosas son recompensadas por Google ! Además de eso, son una forma segura de disminuir las tasas de rebote, aumentar el tiempo promedio empleado y, por último, pero no menos importante, aumentar las conversiones.

Si está buscando formas de corregir cualquier otra sugerencia de PSI, asegúrese de consultar nuestros otros artículos:

  • Sirva imágenes en formatos de próxima generación fácilmente (WordPress, OpenCart y Magento)
  • Cómo cargar imágenes fuera de pantalla de forma diferida (5 técnicas comprobadas)
  • Optimización de imágenes para la web: 2022 SEO y técnicas de velocidad del sitio
  • 8 estrategias de carga de fuentes para mejorar su Core Web Vitals (2022)
  • Cómo eliminar los recursos que bloquean el renderizado (CSS y JavaScript)
  • Reduzca el impacto del código de terceros (con/sin complementos)
  • 7 formas de minimizar el trabajo del hilo principal