Analizando su sitio web mediante Google PageSpeed InsightsEs posible que haya observado un error del tipo "Evite un tamaño excesivo del DOM":
O en GTmetrix " Reducir el número de elementos DOM:
¿Qué es el DOM?
Cuando su navegador recibe un documento HTML, necesita convertirlo en una estructura de árbol que se utiliza para renderizar y pintar utilizando CSS y JavaScript.
Esta estructura de árbol se conoce como DOM o Modelo de Objetos del Documento.
- Nodos Todos los elementos HTML del DOM se denominan nodos (alias "hojas" en el árbol).
- Profundidad La longitud de la "rama" en un árbol se denomina profundidad. Por ejemplo, en el diagrama anterior, la etiqueta "img" tiene una profundidad de 3 (HTML -> body -> div -> img).
- Elementos infantiles Todos los nodos hijos de un nodo (sin más ramificaciones) son elementos hijos.
Lighthouse y Google PageSpeed Insights comienzan a marcar las páginas si se cumple una de las siguientes condiciones:
- Más de 1.500 nodos en total
- Profundidad superior a 32 nudos
- Tener un nodo padre con más de 60 nodos hijos
¿Qué impacto tiene el tamaño del DOM en el rendimiento?
Un tamaño excesivo del DOM puede afectar al rendimiento de varias maneras.
Mayor tiempo de análisis y renderizado (FCP) Un gran árbol DOM y complicadas reglas de estilo (CSS) que requieren una enorme cantidad de procesamiento por parte del navegador. El navegador tiene que analizar el HTML, construir el árbol de renderizado, etc. Cada vez que el usuario interactúa o algo cambia en el HTML, el navegador tiene que recalcularlo.
Mayor uso de la memoria Tu código JavaScript puede tener funciones para acceder a los elementos del DOM. Un arbo DOM más grande significa que JavaScript utiliza más memoria para procesar estos elementos. He aquí un ejemplo de consultas para manipular el DOM con JS: document.querySelectorAll('img') que lista todas las imágenes, comúnmente utilizado por las bibliotecas LazyLoad.
Aumenta el TTFB A medida que aumenta el tamaño de su DOM, también lo hace el tamaño del documento HTML (en KB). Como hay que transferir más datos por la red, aumenta el TTFB.
¿Cómo puedo reducir técnicamente el tamaño del DOM?
Por ejemplo, el tamaño del DOM se reduce técnicamente de la siguiente manera:
Elige :
en lugar de :
<div id="navigation-main">
<ul>
etc.
</ul>
</div>Básicamente, necesitas deshacerte de todos los elementos HTML que puedas. También puedes utilizar Flexbox o Grid para reducir aún más el tamaño del DOM.
¿Cómo puedo reducir el tamaño del DOM en WordPress?
Divida las páginas con varias secciones en varias páginas
¿Si tiene una página con varias secciones? ¿Como servicios, formularios de contacto, productos, entradas de blog, testimonios, etc.?
Intente dividirlas en varias páginas y enlazarlas desde la cabecera, por ejemplo (barra de navegación).
Aplique un Lazyload a los elementos de su sitio y pagine todo lo posible
"Lazyload" todos los elementos posibles. Por ejemplo:
- Carga perezosa de vídeos de YouTube: Utiliza WP YouTube Lyte o Lazy Load de WP Rocket.
- Limite el número de entradas de blog/productos por página: Mantenga un máximo de 10 entradas de blog por página y pagine el resto.
- "Lazyload" entradas de blog/productos - Añade el botón "Cargar más" o "Carga infinita" para cargar más entradas de blog o productos.
- Lazyload comentarios: Usando Disqus Conditional Load por ejemplo. Si usas comentarios nativos, usa plugins como Lazy Load for Comments.
- Paginar comentarios: Si tienes cientos de comentarios, esto también puede afectar al tamaño del DOM. Pagine sus comentarios yendo a Ajustes -> Discusión -> Dividir comentarios en páginas.
- Limite el número de mensajes enlazados - Intente limitar el número de mensajes enlazados a 3 ó 4.
Nota: La carga perezosa de imágenes no reducirá el tamaño del DOM.
No ocultes elementos no deseados con CSS
A veces puede ser necesario eliminar elementos inyectados por el tema/constructor. Por ejemplo, añadir al botón de la cesta en las páginas de productos, el botón de clasificación, información sobre el autor, la fecha de publicación, etc.
Una solución rápida es ocultarlos mediante CSS :
.cart-button {
display:none ;
}
Aunque esta solución parece fácil de implementar, no es la solución óptima, ya que está distribuyendo código no deseado a los usuarios (que incluye tanto el marcado HTML como los estilos CSS).
Comprueba la configuración de tu tema/plugin para ver si hay una opción para eliminarlo. Si no es así, busca el código PHP correspondiente y elimínalo.
Utilizar temas y creadores de páginas bien codificados
Un buen tema juega un papel importante en el tamaño del DOM. Utiliza temas bien codificados como GeneratePress o Astra.
Los constructores de página también inyectan demasiados divs. Utilice constructores como Oxígeno que no inyectan divs no deseados y tienen más control sobre la estructura HTML.
Si no conoce Oxygen, eche un vistazo a " Crear un sitio web en Oxygen desde cero."
Conclusión
Otros plugins o parámetros del tema pueden inyectar demasiados divs. Ejemplo: plugins de "mega menú" como UberMenu.
A veces son cruciales para la experiencia de usuario de su sitio web. Pero a veces los usuarios nunca los utilizan.
Puede que nunca se haga clic en los enlaces del pie de página porque la mayoría de los visitantes se limitan a desplazarse hasta el 75% de la página.
Utiliza herramientas como HotJar o los eventos de Google Analytics para ver qué usan y qué no usan los visitantes. Analice, mida e itere.
Si necesita ayuda para optimizar el rendimiento web de su sitio o mejorar la velocidad de carga de sus páginas estratégicas, WS Consultoría DigitalContamos con expertos cualificados y certificados dispuestos a ayudarle y a ofrecerle soluciones adaptadas a sus instalaciones y a su presupuesto. Póngase en contacto con nosotros y solicite un presupuesto personalizado GRATUITO: Póngase en contacto con nosotros
