Tamaño DOM excesivo de Shopify: Cómo solucionar la advertencia de PageSpeed (2026)

Solución rápida con Thunder

Qué significa PageSpeed con tamaño DOM excesivo

El DOM es el modelo en vivo de su HTML en el navegador. Cada sección, tarjeta de producto, elemento de menú, insignia de aplicación, contenedor de ventana emergente y plantilla oculta se convierte en un nodo que el navegador debe analizar, diseñar, diseñar y, a veces, actualizar con JavaScript.

La guía Lighthouse de Google comúnmente señala tres umbrales: más de 1500 nodos DOM en total, una profundidad máxima mayor que 32 elementos anidados, o un padre con más de 60 elementos secundarios. Shopify Community threads are full of merchants seeing 3,000, 5,000, or even 7,000+ elements and asking whether they need a Shopify expert. The honest answer: sometimes yes, but you can remove a surprising amount from the theme editor first.

Un DOM grande no siempre perjudica a LCP directamente, pero hace que el navegador sea más lento en todo lo relacionado con LCP: cálculo de estilo, diseño, consultas de JavaScript, delegación de eventos y representación de interacciones. Es por eso que la hinchazón DOM a menudo aparece junto a minimizar el trabajo del hilo principal, Ejecución de JavaScripty advertencias INP.

Las causas específicas de Shopify

Paso 1: Mida el DOM antes de editar

Abra la página, luego ejecute esto en Chrome DevTools Console:

document.querySelectorAll('*').longitud

Luego inspecciona las secciones más grandes. PageSpeed ​​te dice los totales, pero DevTools te dice dónde vive la hinchazón. Utilice el panel Elementos, contraiga las secciones y cuente los infractores obvios: cuadrículas de productos, mega menús, bloques de creación de páginas y raíces de aplicaciones inyectadas. Combina esto con nuestro Lista de verificación de auditoría de velocidad de Shopify para que no corrija el tamaño del DOM y se pierdan problemas de secuencias de comandos más importantes.

Paso 2: Limitar las cuadrículas de recopilación y resultados de búsqueda

Las páginas de colección son la forma más rápida de crear un DOM grande. Una ficha de producto rara vez es un elemento. Puede incluir dos imágenes, proveedor, título, precio, precio de comparación, insignia de oferta, muestras de color, formulario de adición rápida, botón de lista de deseos, estrellas de reseña y contenedores de aplicaciones.

En una plantilla de colección, reduzca el tamaño de paginación inicial:

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {% render 'card-product', product: product %}
  {% endfor %}
{% endpaginate %}

Para la mayoría de las tiendas, de 16 a 24 productos por página es suficiente. Si usa desplazamiento infinito, muestre solo la primera página y busque el resto después de la interacción. Nuestro guía de velocidad de la página de colección cubre esto con más detalle.

Paso 3: Eliminar marcas duplicadas en dispositivos móviles y de escritorio

Muchos temas muestran dos versiones completas del mismo contenido: un bloque de escritorio y un bloque móvil, y luego ocultan uno con CSS. El visitante ve una versión, pero el navegador aún analiza ambas.

{%- comment -%}Avoid this pattern when the content is identical{%- endcomment -%}
<div class="hidden md:block">{% render 'mega-menu-desktop' %}</div>
<div class="md:hidden">{% render 'mega-menu-mobile' %}</div>

{%- comment -%}Prefer one semantic menu and change layout with CSS{%- endcomment -%}
<nav class="site-menu">
  {% render 'menu-items', menu: section.settings.menu %}
</nav>

Haz esto con cuidado. Algunos menús móviles necesitan un comportamiento diferente, pero los carruseles de productos duplicados, las barras de anuncios duplicados y los árboles de menús duplicados suelen ser fáciles de conseguir.

Paso 4: Auditar aplicaciones incrustadas y fragmentos huérfanos

In Shopify Admin, go to Online Store -> Themes -> Customize -> La aplicación se integra. Deshabilite todo lo que no necesite cargarse en cada página. Luego busque en los archivos de su tema nombres de aplicaciones, dominios de secuencias de comandos y fragmentos antiguos. Las aplicaciones eliminadas hace meses pueden dejar envoltorios tema.liquido o plantillas de productos.

Si aún se necesita una aplicación, cárguela solo donde sea importante. Un widget de revisión pertenece a las páginas de productos, no a las páginas de políticas. Un widget de paquete pertenece cerca de las secciones de compra, no de todas las tarjetas de colección. Para conocer el impacto en la velocidad de la aplicación, compare su pila con nuestra investigación sobre el impacto en la velocidad de la aplicación y aplicaciones que ralentizan las tiendas Shopify.

Solución manual frente a solución Thunder

El orden de prioridad práctico

1. Ejecutar una prueba de velocidad y PageSpeed Insights en su plantilla de mayor tráfico.
2. Instale Thunder o posponga manualmente los scripts no críticos si JavaScript también está bloqueando el hilo principal.
3. Reduzca las cuadrículas de colección a entre 16 y 24 productos por página inicial.
4. Eliminar contenido duplicado oculto en dispositivos móviles/escritorio.
5. Deshabilite las aplicaciones incrustadas no utilizadas y elimine los fragmentos de aplicaciones huérfanas.
6. Simplifica los mega menús y las secciones del creador de páginas.
7. Vuelva a realizar la prueba con la misma URL y compare los nodos DOM, TBT, INP y LCP.

Si necesita un plan más amplio, utilice nuestro guía completa de optimización de velocidad de Shopify. Para conocer las advertencias de PageSpeed relacionadas, consulte las guías para reducir el tiempo total de bloqueo de Shopify, arreglar las cadenas de solicitudes críticas de Shopify, y reducir las cargas útiles de la red Shopify. Para una limpieza práctica, nuestro Servicio de optimización de velocidad de Shopify puede manejar correcciones a nivel de tema de forma segura.

Referencias y Validación

Para el diagnóstico subyacente, compare su informe con Guía de tamaño DOM de Chrome Lighthouse. Los umbrales no son arbitrarios; reflejan la memoria adicional, el cálculo de estilo y el costo de diseño que asume el navegador cuando una página crece demasiado.

Shopify Community threads on DOM size usually come down to the same pattern: merchants see a scary PageSpeed number, then discover that the actual cause is a pile-up of sections, app embeds, duplicated menus, and collection cards. Treat the warning as a cleanup map, not as proof that Shopify itself is broken. The winning move is to reduce markup where it changes nothing for the customer, then use Thunder to keep the remaining app JavaScript from blocking the page.