Evitar el exceso de DOM

Por supuesto, un sitio web debe cargarse lo más rápidamente posible: para lograrlo, es imprescindible evitar un DOM sobredimensionado. ¿Qué es Evitar la DOM excesiva y cómo se consigue? En esta página discuto y doy estos consejos.
¿Qué es Evitar la DOM excesiva?
Evitar un DOM excesivamente grande es una sugerencia que Google PageSpeed Insights puede darte al analizar tu sitio web. Reducir el tamaño del DOM puede mejorar la velocidad de carga de un sitio web.
Funcionamiento del DOM
El DOM es la forma en que los navegadores convierten el HTML en objetos. Existe una estructura específica que consta de varios nodos. Cada nodo representa un objeto. Cuanto mayor sea esta estructura, mayor será el DOM y más tardará en cargarse una página.(1)
Un análisis con un programa como Google PageSpeed Insights es una forma interesante de saber cómo está el DOM. ¿Su página supera el tamaño DOM? Entonces te dan el consejo anterior. Reducir el número de nodos es entonces importante, una forma de hacerlo es cambiando los temas en WordPress. Un estilo complicado en un tema requiere mucho tiempo de carga.
El impacto de Evitar DOM excesivamente grande en SEO
Evitar un DOM excesivamente grande impacta potencialmente en el SEO de un sitio web o página. Es una sugerencia de PageSpeed Insights y se recomienda seguirla. Mejora potencialmente el tiempo de carga de su página. Esto, a su vez, tiene implicaciones positivas para la optimización de los motores de búsqueda. Aún así, es importante saber que evitar un DOM excesivamente grande no es lo único que afecta a la velocidad de tu página. Puede que haya que hacer más ajustes antes de notar un cambio positivo. (2)
Mi consejo
Mejorar la velocidad de carga de su sitio web es una de las formas de optimizarlo para los motores de búsqueda. Aun así, es importante no centrarse en esto porque no hay certezas.
Recomendamos utilizar Google PageSpeed Insights. Esto le dará una idea del estado actual de su sitio web y le permitirá realizar cambios importantes.
El libro más completo sobre la velocidad de los sitios web
He escrito tanto sobre la aceleración de sitios web y todo lo que implica, que me gusta dividirlo en diferentes secciones; general, herramientas, puntos de mejora de la velocidad y consejos. No dude en ver y consultar todos los enlaces que aparecen a continuación para obtener más información sobre herramientas y consejos para acelerar su sitio web.
General
- ¿Cuál es la velocidad del sitio web?
- Velocidad del sitio web: la división entre marketing y desarrollo
- La influencia del SEO en la UX
- La influencia del diseño web en el SEO
- SPA y SEO
- ¿Qué son las Google Core Web Vitals?
Herramientas
- Autoptimize
- Pagespeed.Compare
- W3 Total Cache
- Herramientas Pingdom
- Google Pagespeed Insights
- GTMetrix
Mejoras en la velocidad
- First Contentful Paint (FCP)
- Tiempo hasta el primer byte (TTFB)
- Tiempo para interactuar (TTI)
- Imagen de la vista más grande con contenido (LCP) precargado
- Activar la compresión de texto
- Reducir el CSS
- Tiempo total de bloqueo (TBT)
- Índice de velocidad
- Reducir JavaScript
- El mayor contenido de pintura
- Borrar CSS no utilizado
- Eliminar JavaScript no utilizado
- Imágenes en diseños modernos
- Conéctese con antelación a los orígenes necesarios
- Evite que JavaScript obsoleto llegue a los navegadores modernos
- Utilizar una política de caché eficaz para los elementos estáticos
- Eliminar módulos duplicados de JavaScript
- Evitar redireccionamientos múltiples
- Codificar imágenes con eficacia
- Utilizar la carga lenta
- Cargar las solicitudes importantes con antelación
Consejos generales
- Consejos para cargar rápidamente un vídeo
- Usar Edge SEO para un sitio web más rápido
- Instalación de una red de distribución de contenidos para SEO
- Optimización de imágenes para SEO
- El impacto del alojamiento en el SEO
- Construcción del modelo de objetos. (2014, 31 de marzo). web.dev. https://web.dev/articles/critical-rendering-path/constructing-the-object-model
- Empieza a ver y cambiar el DOM. (2019, 1 de marzo). Chrome para desarrolladores. https://developer.chrome.com/docs/devtools/dom