O en GTmetrix "Reducir el número de elementos DOM":
¿Qué es DOM?
Cuando su navegador recibe un documento HTML, debe convertirlo en una estructura de árbol, que se utiliza para renderizar y dibujar con CSS y JavaScript.
Esta estructura de árbol se denomina DOM o modelo de objeto de documento.
- nudos Todos los elementos HTML en el DOM se denominan nodos. (también conocido como "hojas" en el árbol).
- Profundidad – El largo de una “rama” en un árbol se llama profundidad. Por ejemplo, en el diagrama anterior, la etiqueta img tiene una profundidad de 3. (HTML -> cuerpo -> div -> img).
- Elementos secundarios – todos los nodos hijos de un nodo (sin más ramificaciones) son hijos.
Lighthouse y Google PageSpeed Insights comienzan a marcar páginas si se cumple una de las siguientes condiciones:
- Total para tener más de 1500 nodos.
- Tener un calado de más de 32 nudos.
- El nodo principal tiene más de 60 nodos secundarios.
¿Cómo afecta el tamaño del DOM al rendimiento?
El tamaño excesivo de DOM puede afectar el rendimiento de diferentes maneras.
- Mayor tiempo de procesamiento y análisis (FCP) . Un gran árbol DOM y reglas de estilo complejas hacen un gran trabajo para el navegador. El navegador tiene que analizar el HTML, construir el árbol de representación, etc. Cada vez que el usuario interactúa o algo en el HTML cambia, el navegador tiene que calcularlo nuevamente.
- Aumenta el uso de la memoria - Su código JavaScript puede tener funciones para acceder a elementos DOM. Un árbol DOM más grande obliga a JavaScript a usar más memoria para procesarlos. Un ejemplo sería un selector de consulta, en
documento.querySelectorAll('img')que enumera todas las imágenes comúnmente utilizadas por las bibliotecas de carga diferida. - Aumenta TTFB – A medida que aumenta el tamaño del DOM, aumenta el tamaño del documento HTML (en KB). Dado que es necesario transferir más datos a través de la red, esto aumenta el TTFB.
¿Cómo reducir técnicamente el tamaño del DOM?
Por ejemplo, es técnicamente fácil reducir el tamaño del DOM:
uso:
<ul id="navigation-main">etc..</ul>en vez de:
<div id="navigation-main"><ul>etc..</ul></div>Básicamente, deshazte de todos los elementos HTML posibles. También puede usar Flexbox o Grid para reducir aún más el tamaño del DOM.
Pero como estás usando WordPress, ¡esto no te ayudará mucho!
¿Cómo reducir el tamaño del DOM en WordPress?
Dividir páginas grandes en varias páginas
¿Tienes una página con todo lo que hay en el sitio? ¿Te gustan los servicios, formularios de contacto, productos, publicaciones de blog, testimonios, etc.?
Intente dividirlos en varias páginas y vincularlos desde el encabezado/barra de navegación.
Lazy loading y paginación de todo lo posible
Lazy loading de todo tipo de elementos. Aquí hay unos ejemplos:
- Carga diferida de videos de YouTube - Use WP YouTube Lyte o Lazy Load de WP Rocket.
- Limite la cantidad de publicaciones de blog/productos por página – Por lo general, trato de mantener un máximo de 10 publicaciones de blog por página y paginar el resto.
- Publicaciones/productos de blog de carga diferida – Agregue un botón Cargar más o desplazamiento infinito para cargar más publicaciones de blog o productos.
- Comentarios de carga diferida - Estoy usando la carga condicional de Disqus ya que estoy usando Disqus . Si usa sus propios comentarios, use complementos como Lazy Load for Comments .
- paginación de comentarios - si tiene cientos de comentarios, esto también puede afectar el tamaño del DOM. Para paginar comentarios, vaya a Configuración -> Discusión -> Paginar comentarios.
- Limitar el número de publicaciones relacionadas – Intente limitar el número de publicaciones relacionadas a 3 o 4.
Nota: las imágenes de carga diferida no reducirán el tamaño del DOM
No ocultes elementos no deseados con CSS
En ocasiones, es posible que deba eliminar elementos introducidos por un tema/diseñador. Por ejemplo, agregar un botón al carrito en las páginas de productos, un botón de tarifa, información del autor, fecha de publicación, etc.
Una solución rápida es ocultarlos con CSS:
.cart-button {pantalla: ninguno;}Aunque esta solución parece simple, está exponiendo a los usuarios a código no deseado (que incluye marcado HTML y estilo CSS).
Verifique la configuración de su tema/complemento para ver si hay una opción para eliminarlo. De lo contrario, busque el código PHP relevante y elimínelo/coméntelo.
Use temas y creadores de páginas bien escritos
Un buen tema juega un papel importante en el tamaño del DOM. Use temas bien escritos comoGenerarPrensa oAstra .
Los creadores de páginas también introducen demasiados divs. Usa constructores comooxígeno, que no introducen bloques div no deseados y tienen más control sobre la estructura HTML.
Conclusión
Puede haber más complementos o configuraciones de temas que introduzcan demasiados divs. Un ejemplo serían los complementos de "megamenú" como UberMenu.
A veces son fundamentales para la experiencia del usuario de su sitio. Pero a veces nunca son utilizados por los usuarios.
Quizás nunca se hace clic en los enlaces de pie de página porque la mayoría de los visitantes solo se desplazan hasta el 75%.
Use herramientas como HotJar o Google Analytics Events para averiguar qué usan realmente los visitantes y qué no.Analiza, mide y repite.
