Optimización del DOM

Una estructura de página grande e ineficiente (Modelo de Objeto de Documento, o DOM) puede ralentizar significativamente tu sitio web y afectar negativamente las métricas de Core Web Vitals. Mantenerla en un tamaño razonable y lo más eficiente posible es absolutamente crucial para el rendimiento técnico general de tu proyecto y afectará la velocidad de respuesta de las interacciones (métrica INP).

En este texto, te compartiré lo que he aprendido sobre el DOM durante mis años de experiencia como consultor. Descubrirás por qué importa su tamaño total, cómo medirlo fácilmente y cómo optimizar la estructura HTML para un renderizado más rápido.

El tamaño importa#

El DOM, esa estructura arbórea de componentes, tiende a crecer rápidamente en la vida real de la web. Añadir elementos y sus anidamientos es sencillo en HTML. Por eso, es necesario contenerse conscientemente.

El DOM se considera demasiado grande si tiene muchos elementos o anidamientos profundos. Google recomienda un máximo de 1,400 elementos.

Eso es bastante estricto, especialmente en sitios grandes como e-commerce o aplicaciones. Nuestra experiencia sugiere que 2,500 elementos del DOM aún son manejados de manera bastante ágil por el navegador.

Una vez que el número de elementos del DOM supera este límite, todo comienza a complicarse rápidamente. Por supuesto, cuanto más pequeño y eficiente sea, mejor.

¿Por qué el DOM debe ser eficiente?#

Es crucial entender que el HTML, en su fase inicial de preparación por parte del navegador, es solo una cadena de texto estructurado. Idealmente, esto se ensambla en el servidor, luego se descarga en el navegador y el navegador lo convierte en una estructura arbórea dinámica. Este es el proceso de "análisis".

Esquema del proceso de renderizado. El HTML se convierte en DOM mediante el análisis. Al combinarse con CSS, se pasa al cálculo del diseño y al dibujo en la pantalla.

Pero eso no es todo. La construcción del DOM ocurre al inicio del proceso de renderizado. El proceso de renderizado tiene varios pasos y, por lo tanto, la ineficiencia del DOM se manifiesta negativamente en todas partes.

1. En el servidor
   Cuanto más complejo sea el DOM, más datos y consultas a la base de datos. El HTML tardará más en ensamblarse, lo que ralentizará la métrica TTFB.

2. Transferencia del HTML al navegador
   Más datos tardarán más en transmitirse a través de la red, lo que ralentizará métricas como FCP o LCP, es decir, la velocidad de carga.

3. Análisis de la cadena HTML y construcción del DOM
   Más elementos tomarán más tiempo para que el navegador los convierta en una estructura arbórea.

4. Aplicación de estilos y cálculo del diseño
   Los selectores de CSS se aplicarán a más elementos y también se alargará el cálculo de su disposición.

5. Renderizado en la pantalla
   Esta fase el navegador la optimiza bastante bien, pero incluso aquí pueden surgir problemas debido a un DOM grande. Depende de cómo se trabaje con el CSS.

6. En cada interacción
   El DOM es dinámico y reacciona a las entradas del usuario y de JavaScript. Un DOM grande tomará más tiempo para reflejar los cambios en la pantalla.

Un DOM eficiente reduce la carga en todo el proceso de renderizado y no solo eso. También habrá ahorros en el lado del servidor.

Info: Comprender el renderizado es clave para un sitio web rápido. En nuestros talleres te mostraremos, paso a paso, cómo funciona este fascinante mecanismo.

¿Cómo probar la complejidad del DOM?#

Existen varios métodos para averiguar cómo estás:

Informe de Lighthouse#

Uno de los informes de la herramienta Lighthouse indica el número total de elementos DOM en la página, la profundidad máxima del DOM y el número máximo de elementos anidados.

El resultado de la herramienta Lighthouse lo puedes ver, por ejemplo, en nuestro detalle del informe de prueba.

Consola de DevTools en el navegador#

Otra forma es la consola de DevTools. Con la página cargada, solo necesitas ejecutar el siguiente fragmento de código.

[...document.querySelectorAll('*')].length;

En Google Chrome se ve de la siguiente manera:

La imagen muestra el resultado de ejecutar el script. Hay 932 elementos en la página.

Número de elementos DOM en el informe "Técnico"#

En nuestro monitoring PLUS registramos el número de elementos DOM para cada página medida. En el gráfico se puede ver cómo ha evolucionado el sitio web a lo largo del tiempo.

Gráfico del informe Técnico que muestra la evolución del número de elementos DOM a lo largo del tiempo. También se observa cómo el monitoreo detecta un error en la página de inicio, donde el contenido no se estaba renderizando correctamente.

Optimización del DOM#

Nuestras recomendaciones cambiarán tu paradigma sobre cómo ves la estructura del HTML y el DOM hoy en día. Quizás te sorprendan un poco al principio. La verdad es que el DOM no necesita ser grande, ni siquiera en páginas realmente complejas.

Elimina todo lo que no sea necesario tener en el código al cargar#

La forma más eficiente es eliminar y cargar de manera perezosa todo lo que no necesita estar en el código. ¿Cómo saber qué eliminar? Solo necesitas hacerte estas preguntas:

1. ¿Tiene el componente algún valor informativo significativo?
   Los robots no pueden trabajar con ciertos componentes en absoluto, como formularios y filtros. Por lo tanto, no es necesario que estén en el código predeterminado en toda su estructura.

2. ¿No es un elemento puramente visual?
   Los elementos visuales deben ser explicados en el código también textualmente para el valor informativo de la máquina. Ejemplos incluyen gráficos dinámicos, mapas.

3. ¿Qué tanto valor añadido tiene el componente para el contenido principal?
   A menudo llenamos los sitios web con información complementaria. Ejemplos son chats, cajas de contacto laterales, con frecuencia barras laterales completas o pies de página. A menudo, estos tampoco necesitan estar en el DOM predeterminado.

4. ¿No es específico solo para un usuario en particular?
   Si eliminas tal contenido, también aumentarás significativamente la probabilidad de caché. Ejemplos son cajas para el perfil del usuario y el carrito, los últimos productos visitados.

5. ¿No se duplica el contenido en algún componente?
   Tales componentes solo inflan innecesariamente el DOM. Técnicamente, en el pasado, la duplicación era la única opción correcta para los codificadores. Hoy en día, con el CSS moderno, eso ya no es cierto. O, las componentes duplicadas se pueden generar y renderizar con JavaScript cuando son necesarias. Un ejemplo típico es la navegación principal, que a menudo está en el código dos veces. Una vez para móvil y otra para escritorio.

Ejemplo de solución correcta en alza.cz. El menú del usuario aparece en el DOM solo después de hacer clic en el desplegable. Al cerrarlo, se elimina nuevamente.

Simplifica los componentes hasta que sean visibles#

Aunque un componente o su contenido sean importantes para el SEO o la accesibilidad, eso no significa que deban estar en su plena calidad visual en el primer renderizado. Especialmente si el componente no es visible en el primer viewport.

¿Cuántos componentes verá realmente el usuario? Algunos de ellos están ocultos detrás de una interacción, como un mega-menú, otros componentes los verá después de desplazar la página. ¿Realmente necesitas todos los componentes en HTML en su forma final?

La optimización mediante la división en un componente simple y uno rico es especialmente efectiva en elementos que se repiten varias veces en la página. Estos son típicamente páginas de directorio, listados de productos u otras ofertas, como ves en la imagen:

Un ejemplo más claro es el siguiente fragmento de código, que muestra cómo usar Intersection Observer para cargar una versión más rica del componente:

import React from 'react';
import { useInView } from 'react-intersection-observer';

const Offer = ({ images, title }) => {
  const { ref, inView, entry } = useInView();

  return (
    <article className="offer" ref={ref}>
      <div className="gallery">
        {!inView ? <Image data={images[0]} /> : <ImagesCarousel data={images} />}
        <h3>{title}</h3>
      </div>
    </article>
  );
};

Correspondiente al contenido importante y al HTML resultante, encontrarás que la estructura del DOM puede ser bastante simple. La riqueza visual se puede completar en el frontend durante la visita del usuario.

Optimiza listas largas y tablas#

Las listas largas o tablas grandes siempre tomarán tiempo para ser renderizadas por el navegador. El contenido debe mantenerse en una longitud razonable. Un listado con 100 productos no beneficiará a nadie.

Siempre es necesario paginar el contenido y, si deseas utilizar el desplazamiento infinito, reutiliza los elementos del DOM mediante el desplazamiento virtual o elimina los elementos no visibles del DOM y reserva espacio para ellos.

Simplifica la estructura de los componentes#

En la interfaz de usuario, a menudo se crean muchos componentes. Con las capacidades modernas de HTML y CSS, necesitamos cada vez menos elementos envolventes que solo cumplen un papel de diseño.

Un ejemplo típico de desperdicio es la calificación con estrellas y la expansión innecesaria del DOM con "estrellas" separadas:

// Mal
<StarRating>
  <SVGStar />
  <SVGStar />
  <SVGStar />
  <SVGStar />
  <SVGStar />
</StarRating>

Este tipo de cosas se podrían resolver con un solo elemento al que se le establece un ancho y un fondo repetido.

Optimización del DOM: ejemplos prácticos#

Como consultores de velocidad, hemos llevado a cabo una serie de optimizaciones exitosas del DOM.

Se puede optimizar el DOM en casi cualquier proyecto, ya que a menudo no está bajo supervisión directa. Veamos dos optimizaciones que ayudaron significativamente y tuvieron un impacto positivo en la métrica INP.

Optimización del mega-menú#

En Benu.cz, tras consultaciones con expertos en SEO, nos embarcamos en la optimización del mega-menú, que tenía casi 3,000 elementos en cada página.

La optimización se centró en reducir las subcategorías anidadas. Las categorías menos importantes se cargan de forma perezosa cuando el usuario las necesita.

¿Qué ves en la imagen?

1. Impacto de la optimización visible en páginas específicas.
2. En todo el dominio, desde la implementación de la optimización, se cambia la distribución de la métrica INP.

Componentes simplificados de marcador de posición#

Megaubytovanie.sk es un proyecto bastante extenso en contenido. Es como un "Booking" checoslovaco. El sitio está construido sobre el framework React y contiene una gran cantidad de bloques de directorio con ofertas.

Propusimos usar componentes simplificados, que al cargar la página solo proporcionan datos importantes para el SEO. Al usuario se le oculta visualmente este estado. La "variante rica" se activa al mostrar el componente en el viewport.

Impacto de la optimización del DOM en la métrica INP para la página con listado de ofertas.

Cuidado con el CLS#

Al optimizar el DOM, presta atención a la estabilidad del diseño para que la aceleración del renderizado no traiga problemas con la métrica CLS.

No olvides reservar espacio en el diseño para los componentes cargados de forma perezosa o simplificados usando marcadores de posición. Presta especial atención a la eliminación de componentes durante el desplazamiento.

El desplazamiento no se considera una acción del usuario en la métrica CLS, por lo que el salto del diseño en este momento sería muy penalizado.

Conclusión#

El DOM es la estructura, el DOM es todo.

No hay ningún otro lugar donde puedas hacer tantas optimizaciones a la vez como aquí. Por lo tanto, préstale suficiente atención, definitivamente valdrá la pena.

Un DOM eficiente aumentará la relevancia del contenido, con TTFB aumentarás la posibilidad de indexación, acelerarás tu producto. Todo esto llevará a mayores conversiones.