Cómo corregir el tamaño excesivo del DOM en WordPress (11 consejos de expertos)

La advertencia “Evite un tamaño DOM excesivo” puede aparecer en Google Lighthouse o en otras herramientas de comprobación de velocidad de sitios web. Básicamente significa que tu sitio web tiene demasiados elementos, lo que puede ralentizar los tiempos de carga y frustrar a los visitantes.

Por suerte, hay algunas cosas que puedes hacer para reducir el tamaño del DOM y mejorar el rendimiento de tu WordPress. Hemos probado un montón de métodos para acelerar nuestros propios sitios web, así que sabemos lo que realmente tiene un impacto en el rendimiento de WordPress.

Y en este artículo, le mostraremos nuestras formas probadas y comprobadas de cómo corregir un tamaño DOM excesivo en WordPress.

¿Qué significa la advertencia “Evite un tamaño excesivo del DOM”?

¿Alguna vez has realizado una prueba de velocidad de tu sitio web en WordPress y te has encontrado con una advertencia llamada “Evitar un tamaño excesivo del DOM”?

Esta advertencia aparece en herramientas de comprobación de velocidad como Google Lighthouse, Google PageSpeed Insights o GTMetrix. Indica que tu sitio web tiene demasiados elementos, lo que puede ralentizar su velocidad de carga.

Pero, ¿qué es exactamente DOM y por qué importa su tamaño? Desglosémoslo.

DOM son las siglas de Document Object Model. Piense en su sitio WordPress como en una gran estructura de árbol. Cada elemento de su página, como encabezados de texto, imágenes, menús y botones, es como una rama / hoja de este árbol. Estos elementos individuales se llaman nodos DOM.

El número total de nodos en la estructura de árbol de su sitio web es su tamaño DOM. Cuantos más elementos tenga en su página, mayor será el árbol DOM.

Por ejemplo, una página sencilla con sólo un encabezado y un párrafo puede tener un tamaño de DOM menor que una página compleja con varias secciones, imágenes, formularios de contacto y contenido incrustado.

¿Cómo afecta el tamaño excesivo del DOM al rendimiento de un sitio web?

Un DOM de gran tamaño puede afectar negativamente al rendimiento de su sitio web WordPress de varias maneras.

Piensa en cómo creas una nueva página en WordPress. Puede añadir elementos como encabezados, párrafos, imágenes, galerías, formularios, botones e iconos de medios sociales. Cada uno de estos elementos se traduce en un nodo DOM en la estructura de árbol.

Aunque cada elemento por separado pueda parecer pequeño, el número total puede añadirse rápidamente, creando un tamaño excesivo del DOM.

Si tus nodos DOM siguen aumentando, el navegador tardará más en leer, entender y cargar la estructura de tu sitio web. Esto se debe a que una estructura DOM compleja requiere un mayor uso de memoria y potencia de procesamiento por parte del dispositivo del usuario para mostrar la página.

Todo esto provoca tiempos de carga más lentos, lo que puede frustrar a los visitantes y hacer que abandonen el sitio antes incluso de ver el contenido.

Hoy en día, los usuarios esperan que los sitios web se carguen rápidamente. Un sitio web lento es como esperar en una larga cola: desanima a los usuarios.

Además, los motores de búsqueda como Google dan prioridad a los sitios web que ofrecen una buena experiencia de usuario, incluyendo velocidades de carga rápidas. Por lo tanto, un tamaño de DOM excesivo puede perjudicar indirectamente el SEO de WordPress y, en última instancia, las conversiones del sitio web.

¿Cuántos elementos del DOM son demasiados para Google?

Aunque no hay un límite estricto establecido en piedra, Google Lighthouse y otras herramientas de prueba señalan los sitios web con un tamaño DOM excesivo. Aquí tienes un desglose de lo que pueden indicar estos indicadores:

• Advertencia: Google Lighthouse muestra una advertencia cuando el elemento del cuerpo de la página tiene más de 800 nodos aproximadamente.
• Error: Si el elemento cuerpo supera los 1.400 nodos, Lighthouse lanza un error.

Pongamos esto en contexto para entender qué tipo de sitios web pueden entrar en estas categorías.

Sin una optimización adecuada, una sola página con contenido de texto, imágenes, un menú de navegación, elementos básicos de disposición y varios plugins para formularios o para compartir en redes sociales podría alcanzar fácilmente unos 800 nodos.

Por otro lado, las páginas que superan los 1.400 nodos son probablemente más complejas y pueden incluir un mayor número de elementos. Pueden incluir múltiples carruseles o deslizadores con imágenes grandes, disposiciones elaboradas con muchos elementos y secciones anidados, o múltiples contenidos incrustados.

Son sólo ejemplos generales. No deje que estas ilustraciones le asusten de construir un sitio web personalizado de la manera que usted desea. Dicho esto, si quieres asegurarte de que la gente se queda en tu sitio, entonces tendrás que evitar un tamaño DOM excesivo.

Afortunadamente, hemos elaborado una guía completa para reducir el tamaño del DOM en WordPress. Puede utilizar los enlaces rápidos que aparecen a continuación para obtener más información acerca de un método de optimización del rendimiento del DOM:

1. Utilice un plugin de optimización de la velocidad de WordPress

Nuestra primera recomendación es instalar un potente plugin de optimización de velocidad para WordPress. Estos plugins están diseñados para analizar su sitio web y hacerlo más rápido de diferentes maneras.

Un plugin de optimización de la velocidad puede encargarse de los aspectos técnicos necesarios para acelerar tu sitio web. De este modo, podrás centrarte en gestionar y crear tus contenidos.

Aquí en WPBeginner, recomendamos usar WP Rocket. De hecho, nosotros mismos lo usamos en el sitio web de WPBeginner, sobre el que puedes aprender más en nuestro artículo sobre cómo aumentamos la velocidad de carga de la página en WPBeginner.

Aunque WP Rocket es conocido principalmente como un plugin de almacenamiento en caché, tiene muchas características que pueden ayudar con el tamaño del DOM también. Estas características incluyen la optimización de archivos, la carga diferida y el aplazamiento de JavaScript.

Explicaremos todas estas características con más detalle más adelante en el artículo. También puedes leer nuestra reseña / valoración de WP Rocket para más información.

Pero por ahora, el uso de un plugin de refuerzo de velocidad como WP Rocket es un gran primer paso para corregir el tamaño DOM y hacer su sitio web más rápido, incluso si usted es nuevo en WordPress.

Puedes leer nuestra guía de instalación y configuración de WP Rocket para poner en marcha el plugin.

2. Marcar / comprobar su tema y plugins

Aunque los plugins y temas de WordPress son excelentes para añadir funcionalidad y estilo a su sitio web, a veces pueden contribuir a un tamaño excesivo del DOM.

En primer lugar, no todos los temas y plugins son iguales. Los plugins y temas mal codificados pueden dar lugar a un documento HTML hinchado con elementos innecesarios. Esto puede aumentar significativamente el tamaño de tu DOM.

Los temas y plugins de WordPress a menudo vienen con características adicionales que puede que no necesite. Estos pueden añadir elementos no deseados a la estructura de su sitio web, incluso si no los está utilizando activamente.

Echando un vistazo más de cerca a lo que está instalado en su sitio web, puede identificar a los posibles culpables que contribuyen al tamaño del DOM.

Si crees que un tema o plugin en particular puede estar causando problemas, intenta cambiar temporalmente a un tema por defecto de WordPress o desactivar los plugins de uno en uno.

A continuación, compruebe si la advertencia sobre el tamaño del DOM desaparece en las herramientas de prueba de velocidad después de realizar estos cambios. Esto puede ayudarte a localizar el elemento problemático.

A la hora de elegir temas y plugins, es preferible recurrir a fuentes fiables, como el directorio de WordPress o desarrolladores conocidos. Estos recursos tienen normas de codificación estrictas, lo que reduce la posibilidad de que el código hinchado pueda perjudicar el rendimiento de su sitio web.

Si quieres obtener recomendaciones de plugins y temas de confianza, entonces marca / comprueba el Centro de Soluciones WPBeginner. Aquí es donde probamos, reseñamos y recomendamos software para WordPress. Solo recomendamos soluciones que sabemos que serán útiles para nuestros lectores.

3. Utilice un maquetador de páginas optimizado

Los plugins maquetadores de páginas son editores WYSIWYG que se utilizan para crear sitios web WordPress bonitos y funcionales sin necesidad de código. Sin embargo, algunas de estas herramientas pueden contribuir a aumentar el tamaño del DOM.

Una de las razones es que suelen utilizar elementos HTML adicionales, como etiquetas div con clases o atributos personalizados, para dar estilo al contenido y controlar su estructura / disposición / diseño / plantilla. Aunque estos elementos aportan flexibilidad, también pueden añadir mucho volumen.

Además, los bloques o widgets integrados, como los carruseles / controles deslizantes o los elementos interactivos creados con un maquetador de páginas, se construyen a menudo utilizando estructuras HTML específicas.

Muchos maquetadores de páginas también se basan en shortcodes para insertar sus funcionalidades. Aunque es posible que estos shortcodes no se muestren visualmente en tu sitio web, pueden añadir código adicional a tu DOM entre bastidores.

Si crees que tu maquetador de páginas puede estar contribuyendo a los problemas de tamaño del DOM, puedes probar esta teoría en un sitio de prueba. Prueba a desactivar el maquetador de páginas y comprueba si desaparece la advertencia en las herramientas de comprobación de la velocidad del sitio web. Esto puede ayudarte a determinar si es la causa principal.

Si decide no utilizar más su antiguo maquetador de páginas, puede utilizar una de las herramientas integradas de WordPress para diseñar su sitio web (como el Editor de sitios completos o el Personalizador de temas).

Ofrecen control sobre el diseño de su sitio web sin necesidad de un plugin aparte. También suelen tener un menor impacto en el tamaño del DOM.

Dicho esto, estas herramientas no son las más flexibles. En este caso, recomendamos utilizar un maquetador de páginas optimizado como SeedProd.

Aquí en WPBeginner, hemos probado varios maquetadores de páginas, y SeedProd ha mostrado un rendimiento más rápido (93 en PageSpeed Insights) en comparación con competidores como Divi (91) y Elementor (90).

Puedes leer más acerca de ello en nuestra reseña / valoración de Elementor vs. Divi vs. SeedProd.

Más allá del rendimiento, SeedProd también cuenta con más de 350 kits de plantillas de temas profesionales, integraciones con herramientas populares de marketing por correo electrónico y un asistente de IA para ayudarle a acelerar el proceso de creación de su sitio web.

4. Optimice sus imágenes y vídeos

Las imágenes y los vídeos no optimizados pueden tener archivos de gran tamaño. Estos archivos grandes pueden contribuir al tamaño del DOM porque se convierten en elementos extra que el navegador necesita procesar.

Optimizar sus imágenes puede reducir significativamente el tamaño de sus archivos sin sacrificar la calidad. Esto ayuda a que su sitio web cargue más rápido y mejora la experiencia general del usuario.

Un plugin como Optimole puede ser una gran solución para optimizar tus imágenes. Optimole está diseñado para trabajar fuera de la caja, la optimización automática de imágenes de su sitio web a medida que los suben.

También puedes ajustar sus parámetros para ajustar la calidad de compresión o redimensionar las imágenes que superen un determinado tamaño, reduciendo aún más su tamaño de archivo y su huella DOM.

Si no quieres utilizar demasiados plugins, puedes utilizar herramientas gratuitas en línea como TinyPNG para comprimir tus imágenes antes de subirlas a tu sitio web WordPress.

Para obtener una guía detallada sobre la optimización de imágenes, marque / compruebe nuestro artículo sobre cómo optimizar las imágenes para el rendimiento web sin perder su calidad.

Cuando se trata de vídeos, no recomendamos subirlos directamente a WordPress. Los archivos de vídeo grandes pueden ralentizar considerablemente el tiempo de carga de tu sitio web.

Lo mejor es utilizar un servicio de alojamiento de vídeos como YouTube o Vimeo. Estos servicios se encargan de almacenar y transmitir tus vídeos, descargando el servidor de tu sitio web y reduciendo el tamaño del DOM.

A continuación, puede incrustar los vídeos directamente en sus páginas utilizando los códigos de incrustación proporcionados por el servicio de alojamiento.

Tenemos otro artículo útil sobre cómo optimizar vídeos para su sitio de WordPress que profundiza en las estrategias de optimización de vídeo.

5. Implementar la carga diferida

Cuando abres una página web larga y con mucho contenido, lo normal es que todos estos elementos se carguen a la vez. Este proceso puede tardar un poco, sobre todo en conexiones a Internet lentas.

La carga diferida es más inteligente. Retrasa la carga de elementos no críticos, como imágenes y vídeos. Solo se cargarán cuando el usuario los necesite realmente a medida que se desplaza por la página.

Esto significa que el contenido esencial que aparece primero (como el texto y la disposición) se carga más rápido. A su vez, esto se traduce en una carga inicial de la página más rápida y una experiencia de usuario más fluida.

Establecer la carga diferida es fácil, especialmente si ya estás utilizando un plugin de optimización de la velocidad de WordPress como WP Rocket.

Simplemente vaya a Ajustes ” WP Rocket en su escritorio de WordPress. A continuación, haga clic en la pestaña ‘Medios’.

Marque / compruebe todas las opciones para activar la carga diferida de imágenes, vídeos e iFrames.

Si desea mostrar una galería de imágenes, le recomendamos que utilice un plugin de galería con una característica de carga diferida.

Envira Gallery es un buen ejemplo de ello. Además de la carga diferida, puede establecer un retardo específico para la carga de las imágenes.

Además, puede cargar de forma diferida su sección de comentarios.

Para ello, puede utilizar Thrive Comments, que ofrece características para optimizar los comentarios de WordPress.

Una vez activado el plugin, ve a Thrive Escritorio “ Thrive Comments. A continuación, abre la pestaña ‘Ajustes avanzados’ y ve a la sección ‘Optimización de la velocidad de la página’.

Aquí, sólo tienes que marcar / comprobar las casillas que correspondan a tu sección de comentarios. Puede cargar la sección de comentarios hasta que el usuario se desplace hasta el final de la página, y/o cargar los comentarios progresivamente en las páginas a medida que los usuarios hacen clic en el botón “Cargar más comentarios”.

También puede optar por cargar las imágenes de avatar dentro de los comentarios hasta que aparezcan a la vista.

6. Paginar comentarios o entradas con mucho contenido

Las entradas o secciones de comentarios excesivamente largas suelen tener un tamaño de DOM grande que ralentiza los tiempos de carga de tu sitio web. Aquí es donde la paginación resulta útil.

Esencialmente, la paginación divide el contenido en fragmentos manejables, lo que facilita a los usuarios la navegación y la digestión de la información.

Si escribe artículos extensos, considere la posibilidad de dividirlos en secciones lógicas mediante la paginación. De este modo, los lectores podrán hacer pausas entre las secciones y evitarán sentirse intimidados por un gigantesco muro de texto.

Por suerte, puedes dividir fácilmente las entradas largas con el bloque “Salto de página” del editor de bloques.

Para obtener instrucciones paso a paso, puede comprobar nuestro artículo sobre cómo dividir entradas de WordPress en varias páginas.

También tenemos una guía útil sobre cómo paginar comentarios en WordPress. Pero esencialmente, todo lo que necesita hacer es acceder a su área de administración de WordPress e ir a la página Ajustes ” Discusiones.

A continuación, marque / compruebe la casilla situada junto a “Dividir los comentarios en páginas” y personalice el número de comentarios que desea ver en cada página.

Además, le sugerimos que evite los desplazamientos infinitos. Aunque pueden hacer que los usuarios permanezcan más tiempo en el sitio, ya que no tienen que cambiar manualmente de una página a otra, pueden causar problemas de rendimiento en el servidor.

7. Minimizar archivos CSS y JavaScript

La funcionalidad y el estilo visual de su sitio web dependen de archivos de código como CSS y JavaScript. Aunque son esenciales, estos archivos pueden contribuir a aumentar el tamaño del DOM si no se optimizan correctamente.

La minimización puede resolver esta incidencia quitando del código elementos innecesarios, como comentarios, espacios y saltos de línea. Este menor tamaño se traduce en tiempos de carga más rápidos y un menor tamaño del DOM.

Dicho esto, es importante tener en cuenta que la minimización a veces puede introducir problemas de compatibilidad con determinados temas o plugins.

Antes de minimizar el código, es aconsejable crear una copia de seguridad del sitio web y, si es posible, probar los cambios en un entorno local o de pruebas. Esto le permite identificar cualquier problema / conflicto / incidencia potencial antes de que afecte a su sitio web en vivo.

A continuación, puede leer nuestra guía sobre cómo minimizar archivos CSS y JavaScript en WordPress para obtener instrucciones paso a paso.

Como verás en la guía, minimizar tu código es fácil si ya estás usando un plugin como WP Rocket. Todo lo que tienes que hacer es ir a Ajustes ” WP Rocket y cambiar a la pestaña ‘Optimización de archivos’.

A continuación, active las características para minimizar los archivos CSS y JavaScript.

Algunos proveedores de alojamiento de WordPress también ofrecen características integradas para minimizar archivos CSS y JavaScript.

Por ejemplo, SiteGround (que es donde alojamos WPBeginner) ofrece el plugin Speed Optimizer para minimizar CSS.

Hostinger también ofrece una característica similar a través de su CDN integrado, disponible en su plan Business y niveles superiores.

8. Reducir JavaScript y CSS que bloquean el procesamiento / mostrar

Otro método para optimizar los archivos CSS y JavaScript consiste en reducir el bloqueo al procesar / mostrar.

Los recursos que bloquean el procesado / mostrado son como materiales de cimentación que impiden que la casa (el contenido de su sitio web) se construya hasta que esos recursos estén entregados y en su sitio. Cuanto más tarden en cargarse estos recursos, más tardarán los usuarios en ver el contenido de su sitio web.

WP Rocket tiene características incorporadas para reducir el bloqueo de procesar CSS y JavaScript.

Por ejemplo, puede combinar archivos CSS y JavaScript, lo que reducirá el número de peticiones HTTP que debe realizar su sitio web. Menos peticiones significa menos tiempo de espera para que el navegador cargue todo y procese / muestre su contenido.

También puede eliminar cualquier código CSS que no se utilice realmente en sus páginas.

Esto no solo reduce el bloqueo al procesar / mostrar, sino que también minimiza el tamaño total de la página y el número de peticiones HTTP.

Además, existe una característica llamada ‘Cargar JavaScript diferido’. Esto indica al navegador que espere para cargar algunos archivos JavaScript hasta que se haya mostrado el contenido principal de su sitio web (el HTML).

De este modo, los usuarios ven el contenido de su sitio web más rápidamente, aunque aún no se hayan cargado todas las funcionalidades de fondo.

Puede obtener más información acerca de cómo activar estas características en nuestro artículo sobre cómo reducir el CSS y JavaScript que procesan / muestran en WordPress.

9. Activar WordPress Caching

El almacenamiento en caché no reduce directamente el tamaño del DOM, pero mejora significativamente el rendimiento percibido de su sitio web.

Esto es lo que ocurre cuando la caché está activada: cuando un usuario vuelve a visitar tu sitio web, su navegador puede comprobar primero su caché. Si los archivos ya están almacenados localmente, pueden cargarse mucho más rápido, reduciendo significativamente los tiempos de carga de la página.

Esto hace que el DOM se cargue y muestre más rápido, lo que se traduce en una experiencia más fluida para los visitantes.

El almacenamiento en caché también ayuda a tu servidor a funcionar de forma más eficiente aligerando su carga de trabajo. Esto le permite centrarse en tareas importantes como el procesamiento del DOM, lo que en última instancia acelera el tiempo de carga.

Afortunadamente, establecer la caché del navegador es sencillo con un plugin como WP Rocket. Esto se debe a que el plugin activa automáticamente el almacenamiento en caché con ajustes óptimos para su sitio web.

Mejor aún, WP Rocket almacena continuamente en caché tu sitio web en todo momento. Cada vez que la caché se vacía (manual o automáticamente), WP Rocket genera automáticamente nuevos archivos de caché.

WP Rocket también te ofrece la posibilidad de vaciar la caché de WordPress en cualquier momento. Esto puede ser útil si haces cambios significativos en tu sitio web y quieres asegurarte de que los usuarios vean la última versión.

Para más acerca de las características de almacenamiento en caché de WP Rocket, puede consultar la sección estableciendo opciones de almacenamiento en caché de nuestra guía de instalación de WP Rocket.

10. Utilice una CDN de WordPress

Una CDN (Content Delivery Network) es una red de servidores repartidos por todo el mundo. Aunque una CDN no cambia directamente el tamaño del código de tu sitio web, hace que parezca que carga más rápido.

Esto se debe a que una CDN almacena copias del contenido estático de su sitio web (imágenes, scripts, hojas de estilos) en servidores de distintas ubicaciones. Cuando alguien visita su sitio web, su ordenador descarga el contenido del servidor CDN más cercano.

Esto reduce significativamente los tiempos de descarga en comparación con la obtención de todo desde su servidor original, que puede estar muy lejos. Esta entrega más rápida hace que el procesamiento del DOM sea mucho más rápido.

Además, una CDN ayuda a su servidor original a trabajar más rápido al compartir la carga de entrega de contenidos. Esto permite al servidor centrarse en lo más importante, como procesar el DOM. A su vez, esto hace que su sitio web procese / muestre más rápido en general.

Si necesitas recomendaciones de CDN, tenemos una guía de los mejores servicios de CDN para WordPress que te ayudará a elegir el más adecuado para tu sitio web.

Utilizamos la CDN de Cloudflare en nuestro sitio web aquí en WPBeginner. Funciona bien para nuestro blog grande con muchos visitantes.

Si estás interesado en saber más, puedes marcar / comprobar nuestra entrada sobre por qué WPBeginner cambió de Sucuri a Cloudflare. Este artículo explica lo que buscamos al elegir un proveedor de CDN.

11. Optimice su base de datos de WordPress

Su sitio web WordPress depende de una base de datos para almacenar toda su información importante, como entradas, comentarios, cuentas de usuario e incluso configuraciones.

Con el tiempo, esta base de datos puede contener demasiados datos innecesarios, como revisiones antiguas de entradas, comentarios de Spam o información sobrante de plugins borrados.

Aunque la base de datos en sí no forma parte del DOM, una base de datos hinchada puede ralentizar tu sitio web. Un sitio web más lento puede hacer que parezca que el tamaño del DOM es mayor porque todo tarda más en procesar / mostrar.

Optimizar su base de datos quitando / eliminando datos innecesarios ayuda a que su sitio web funcione mejor y puede mejorar indirectamente el tamaño percibido del DOM.

Compruebe nuestra útil guía sobre cómo optimizar su base de datos de WordPress en un clic. Esta guía te guía a través del proceso de uso de un plugin para limpiar tu base de datos y asegurarte de que funciona de forma eficiente.

Centrarse en el rendimiento general de WordPress, no sólo en el tamaño del DOM

Aunque la dirección de la advertencia “Evitar un tamaño DOM excesivo” en WordPress es importante para la velocidad del sitio web, no es el único factor a tener en cuenta.

Un sitio web con muchas funciones o un formato único puede tener naturalmente un DOM más grande, y eso está bien.

La clave está en encontrar el equilibrio adecuado entre el rendimiento del sitio y sus características. Por lo tanto, minientrada en el tamaño del DOM, es posible que desee prestar atención a otras métricas como Core Web Vitals. Se trata de métricas específicas que Google utiliza para medir la experiencia de usuario de un sitio web.

Si ha utilizado muchas técnicas de optimización diferentes y su sitio web sigue sintiéndose lento, entonces considere buscar ayuda de nuestros Servicios de Optimización de la Velocidad del Sitio.

Nuestro equipo de expertos puede analizar su sitio web e identificar las formas más eficaces de optimizar su rendimiento.

Todos los planes de servicio incluyen configuración experta de caché para las necesidades de su sitio web, optimización de imágenes sin reducir la calidad visual, optimización de carga automática de bases de datos y mucho más. Además, le garantizamos que su sitio web obtendrá una A o B+ en nuestra herramienta PageSpeed.

Esperamos que este tutorial te haya ayudado a aprender cómo corregir el tamaño excesivo del DOM en WordPress. También puedes marcar / comprobar nuestra guía sobre cómo acelerar el rendimiento de WooCommerce o nuestra guía completa de velocidad y rendimiento de WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.