O en GTmetrix «reducir el número de elementos del DOM»:
¿Qué es el DOM?
Cuando tu navegador recibe un documento HTML, este debe convertirse en una estructura similar a un árbol que se utiliza para renderizar y pintar con la ayuda de CSS y JavaScript.
Esta estructura similar a un ‘árbol’ se llama DOM o Modelo de Objetos de Documento.
El Modelo de Objetos de Documento (DOM, por sus siglas en inglés, Document Object Model) es una interfaz de programación para los documentos HTML (Lenguaje de Marcas de Hipertexto). El hipertexto se refiere a enlaces, ya sean enlaces internos o a otras páginas web, y a contenido de texto enriquecido.
Este modelo de objetos de documento (DOM) proporciona una representación estructurada del documento HTML y define cómo los programas pueden acceder y modificar tanto su estructura como su estilo y contenido.
El DOM es un lenguaje que los navegadores comprenden y procesan. Por lo tanto, si la estructura del DOM es simple y concisa, el navegador será capaz de interpretarla más rápidamente, lo que resultará en una visualización más rápida de la página web por parte del usuario. En resumen, un DOM compacto y bien estructurado contribuye a evitar un tamaño excesivo de DOM, permitiendo una experiencia de navegación más eficiente.
- Nodos: Todos los elementos HTML en el DOM se llaman Nodos (también conocidos como «hojas» en el árbol).
- Profundidad: La longitud de una «rama» en un árbol se llama profundidad. Por ejemplo, en el diagrama anterior, la etiqueta «img» tiene una profundidad de 3 (HTML -> body -> div -> img).
- Elementos secundarios: Todos los nodos secundarios de un nodo (sin más ramificaciones) son elementos secundarios.
Lighthouse y Google PageSpeed Insights empiezan a señalar páginas si se cumplen algunas de las siguientes condiciones:
- Tienen más de 1,500 nodos en total.
- Tienen una profundidad mayor a 32 nodos.
- Tienen un nodo padre con más de 60 nodos secundarios.
¿Cómo afecta el tamaño del DOM al rendimiento?
Un tamaño excesivo del DOM puede afectar el rendimiento de diferentes maneras.
- Tiempo de análisis y renderización más largo (FCP): Un árbol DOM grande y reglas de estilo complicadas generan un trabajo considerable para el navegador. El navegador debe analizar el HTML, construir un árbol de renderización, etc. Cada vez que el usuario interactúa o algo cambia en el HTML, el navegador debe volver a calcular esto.
- Aumento del uso de memoria: Tu código JavaScript podría tener funciones para acceder a elementos DOM. Un árbol DOM más grande hace que JavaScript utilice más memoria para procesarlos. Un ejemplo sería un selector de consulta como document.querySelectorAll(‘img’), que enumera todas las imágenes y es comúnmente utilizado por bibliotecas de carga perezosa (lazy loading).
- Aumento del TTFB: A medida que el tamaño del DOM aumenta, el tamaño del documento HTML también aumenta (en KB). Dado que más datos deben transferirse a través de la red, esto aumenta el TTFB.
¿Por qué el tamaño del DOM se vuelve excesivo?
Generalmente, no existe una cifra exacta para determinar esto, pero en la mayoría de los casos, depende de la complejidad del diseño y las funciones que se requieran. Por ejemplo, un sitio web con características más avanzadas podría necesitar más elementos que un blog simple o un periódico digital. El punto clave radica en que cuantos menos elementos haya, más rápida será la carga de la página y, en consecuencia, mejor será la experiencia del usuario.
¿Cómo reducir el tamaño del DOM técnicamente?
Eliminando el código innecesario, reduciendo los elementos HTML al mínimo, depurando la estructura y simplificando el diseño. En casos donde se requiere un diseño altamente complejo, la práctica común es cargar ciertos elementos después de unos segundos, una vez completada la carga inicial o carga principal, utilizando Ajax.
Por ejemplo, técnicamente reducir el tamaño del DOM es sencillo como:
usar:
<ul id="navigation-main">
etc..
</ul>
en lugar de:
<div id="navigation-main">
<ul>
etc..
</ul>
</div>¿Cómo optimizar el rendimiento general de un sitio web?
Los profesionales del desarrollo web y los propios navegadores aconsejan que las páginas mantengan un número de elementos en el DOM que oscile entre 1200 y 1700. Sin embargo, es comprensible que esto pueda resultar un desafío en muchas ocasiones.
Además, es importante considerar la profundidad del DOM, ya que los elementos pueden estar anidados y un elemento puede tener sub elementos. Lo óptimo sería que la profundidad de la estructura del árbol sea menor a 32 elementos y que cada elemento principal cuente con menos de 60 elementos secundarios. Las páginas web con un DOM excesivamente grande aumentan significativamente el consumo de memoria, prolongan los cálculos de estilos (diseño) y, por ende, ralentizan la carga de la web. En este contexto, evita un tamaño excesivo de DOM es fundamental para lograr un rendimiento óptimo.
¿Cómo reducir el tamaño del DOM en WordPress?
Lazy load para contenido debajo del pliegue
Puedes instruir al navegador para que realice una carga perezosa (Lazy Load) del contenido (o elementos) si no son necesarios en la parte superior de la página. Esta técnica se asemeja a la carga diferida de imágenes, pero aplicada a elementos HTML. Utilizar esta estrategia contribuye a evitar un tamaño excesivo de DOM.
Renderiza contenido de manera perezosa utilizando FlyingPress
Divide las páginas extensas en varias páginas
¿Tienes una página que abarca todo lo que tienes en el sitio? ¿Incluye servicios, formularios de contacto, productos, entradas de blog, testimonios, etc.?
Intenta dividirla en varias páginas y enlázalas desde el encabezado o la barra de navegación.
Carga perezosamente y página todo lo que sea posible
Carga perezosamente todos los elementos posibles. Algunos ejemplos podrían ser:
- Carga Lazyload videos de YouTube: utiliza WP YouTube Lyte o Lazy Load de WP Rocket.
- Limita el número de entradas/productos por página: generalmente intento mantener un máximo de 10 entradas de blog por página y paginar el resto.
- Carga perezosamente las entradas de blog/productos: agrega un botón de «cargar más» o un desplazamiento infinito para cargar más entradas de blog o productos.
- Carga perezosamente los comentarios: yo cargo perezosamente la sección de comentarios usando Disqus Conditional Load. Si estás utilizando comentarios nativos, utiliza plugins como Lazy Load for Comments.
- Página los comentarios: si tienes cientos de comentarios, esto también puede afectar el tamaño del DOM. Página los comentarios yendo a Configuración -> Discusión -> Dividir los comentarios en páginas.
Limita la cantidad de entradas relacionadas: intenta limitar la cantidad de entradas relacionadas a 3 o 4.
Nota: La carga Lazy Load de imágenes no reducirá el tamaño del DOM.
No ocultes elementos no deseados mediante CSS
En ocasiones, es posible que necesites eliminar elementos inyectados por el tema o el constructor. Por ejemplo, el botón «Agregar al carrito» en las páginas de productos, el botón de calificación, la información del autor, la fecha de publicación, etc.
Una solución rápida es ocultarlos utilizando CSS:
.cart-button { display:none; }
Aunque esta solución parece sencilla, estás sirviendo código no deseado a los usuarios (lo cual incluye tanto el marcado HTML como los estilos CSS).
Verifica las opciones de configuración de tu tema/plugin para ver si hay una opción para eliminarlo. De lo contrario, busca el código PHP correspondiente y elimínalo o coméntalo.
Utiliza temas y constructores de páginas bien codificados
Un buen tema desempeña un papel importante en el tamaño del DOM. Utiliza temas bien codificados como GeneratePress o Astra.
Los constructores de páginas también inyectan demasiados divs. Utiliza constructores como Oxygen, que no inyecta divs no deseados y ofrece un mayor control sobre la estructura HTML.
La importancia del hosting como punto clave para comenzar Evita un tamaño excesivo de DOM
Al igual que los cimientos sólidos son fundamentales para una casa, es crucial elegir un servicio de hosting que se adapte a nuestras necesidades. Iniciar con un hosting básico de SiteGround podría ser una opción adecuada, y a medida que las visitas aumenten y se requiera un mejor rendimiento, considerar la migración a un VPS sería una alternativa a considerar. Si ya nos encontramos enfrentando dificultades, la elección más aconsejable sería pasar directamente a un VPS. Desde aquí, me encuentro disponible para asistirte en la selección y adquisición de tu servicio de hosting, simplificando la transición o incluso facilitando el comienzo de tu proyecto hoy mismo. Ten en cuenta que, al elegir el hosting adecuado, también estás tomando una medida importante para evitar un tamaño excesivo de DOM y mejorar el rendimiento general de tu sitio web.
Otras alternativas recomendadas para mejorar el tiempo de carga, además de evitar un tamaño excesivo en el DOM, son las siguientes:
- Eliminar archivos CSS no utilizados.
- Utilizar imágenes con dimensiones apropiadas.
- Optar por formatos de imagen de próxima generación.
- Suprimir recursos que generen bloqueos en el renderizado.
- Disminuir los tiempos de respuesta del servidor (Considerar un VPS en España).
- Aplazar la carga de imágenes que no son visibles en pantalla.
- Minimizar los archivos CSS.
- Reducir la longitud de los recursos JavaScript.
- Optimizar la codificación de imágenes de manera eficiente.
- Activar la compresión del texto.
- Establecer conexiones previas con los recursos necesarios.
- Evitar múltiples redireccionamientos de página.
- Priorizar la carga anticipada de solicitudes esenciales, como el contenido de texto.
- Emplear formatos de video para elementos animados.
- Evitar la carga de recursos de red de gran tamaño.
- Medir y reducir el tiempo de ejecución del código JavaScript.
- Limitar el uso de código de terceros.
¿Estas pautas te resultan familiares, verdad? Si has venido de Google Page Speed, seguramente las reconoces, ya que son prácticamente las mismas. Estas medidas son esenciales para potenciar el rendimiento de cualquier sitio web.
Espero que este artículo te haya permitido evitar el exceso de tamaño en el DOM de manera efectiva.
