Solución rápida con Thunder
Thunder Page Speed ayuda a las tiendas Shopify a reducir el daño de los scripts no críticos mejorando la temporización de recursos, la carga de scripts, la entrega de imágenes y la presión de Core Web Vitals. Es la solución base más rápida antes de que dedique tiempo de desarrollador a buscar código antiguo en archivos de tema, incrustaciones de aplicaciones y Google Tag Manager.
Por qué document.write perjudica el rendimiento de Shopify
document.write() es un método antiguo de JavaScript que escribe marcado directamente en la página mientras el navegador analiza el HTML. Tenía sentido en fragmentos publicitarios y de analítica antiguos, pero perjudica el rendimiento de las tiendas modernas. Cuando el navegador encuentra un script bloqueante que llama a document.write(), puede tener que pausar el análisis, descargar más JavaScript, insertar nuevo marcado y continuar solo cuando termina ese trabajo.
La documentación de Lighthouse de Chrome advierte que document.write() puede retrasar mucho el contenido visible de la página en conexiones lentas, y Chrome ha bloqueado algunos usos problemáticos en determinadas condiciones de red. En Shopify, los compradores con conexiones móviles lentas son precisamente quienes menos deberían sufrir estas demoras. Si el script heredado aparece antes del hero, el título del producto, el precio o el botón de añadir al carrito, puede perjudicar el LCP de Shopify, el INP y el tiempo total de bloqueo.
La advertencia también se superpone con reducir el tiempo de ejecución de JavaScript, JavaScript heredado, y JavaScript de terceros que bloquea Shopify. En la práctica, la solución no suele ser una configuración mágica. Debe identificar qué fragmento se escribe en la página, decidir si todavía es necesario y reemplazarlo con un patrón de carga más seguro.
De dónde viene document.write en los temas de Shopify
Empiece por el código del tema. Busque en theme.liquid, fragmentos, secciones y recursos cualquier uso de document.write. Los temas antiguos a veces lo usan para insignias, sellos de confianza, rastreadores de afiliados, ventanas emergentes, contenido social insertado, localizadores de tiendas o compatibilidad con navegadores antiguos. Si ve un script pegado antes de </head> o cerca del principio de <body>, inspecciónelo primero.
Luego verifique los restos de aplicaciones desinstaladas. Las aplicaciones de Shopify pueden dejar fragmentos, etiquetas de script o bloques de extensión de aplicaciones temáticas. Una tienda puede desinstalar la aplicación pero mantener el cargador heredado en el tema. Eso crea un doble problema: el guión perjudica el rendimiento y ya nadie es dueño de él. El flujo de trabajo de limpieza en eliminar CSS y JavaScript no utilizados se aplica aquí.
Por último, inspeccione Google Tag Manager y las etiquetas de marketing. Algunos proveedores de publicidad todavía ofrecen fragmentos antiguos que llaman a document.write() para insertar un iframe, un píxel de seguimiento o una dependencia de script. Si GTM forma parte del problema, consulte la guía específica para corregir el impacto de GTM en la velocidad de Shopify antes de cambiar un seguimiento crítico para los ingresos.
Manual paso a paso: arreglar Evitar document.write en Shopify
1. Confirme la fuente exacta del script
No elimine scripts a ciegas. En PageSpeed Insights, abra el diagnóstico y anote la URL del script. En Chrome DevTools, abra el panel Fuentes o busque document.write en todos los archivos cargados. Si la URL pertenece al tema, corrija el tema. Si pertenece a una aplicación o a un proveedor de etiquetas, busque la versión asíncrona actual del fragmento.
2. Reemplazar escrituras estáticas con Liquid o HTML
Si el código escribe marcado que siempre está presente, no debería ser JavaScript en absoluto. Renderícelo en Liquid para que el navegador reciba HTML estable del servidor.
<!-- Avoid this old pattern -->
<script>
document.write('<div class="trust-badge">Envío gratis a partir de $75</div>');
</script>
<!-- Use normal theme markup instead -->
<div class="trust-badge">
Envío gratis a partir de $75
</div>Esto mejora la estabilidad del diseño porque el elemento está presente desde la primera respuesta HTML. También facilita la gestión de la sección en el editor de temas de Shopify.
3. Reemplazar escrituras dinámicas con inserción DOM
Si JavaScript realmente necesita crear marcado después de la carga, use las API DOM. Son explícitas, más fáciles de controlar y no interrumpen el análisis HTML como lo hace una escritura durante el análisis.
const slot = document.querySelector('[data-promo-slot]');
if (slot) {
const badge = document.createElement('div');
badge.className = 'promo-badge';
badge.textContent = 'Today only: free shipping over $75';
slot.appendChild(badge);
}4. Reemplazar las escrituras de scripts con la creación de scripts asíncronos
Muchos fragmentos heredados utilizan document.write() para cargar otro script. Sustitúyalo por un cargador asíncrono y colóquelo después del contenido crítico o tras una interacción del usuario cuando el script no sea necesario de inmediato.
function loadVendorScript(src) {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.defer = true;
document.head.appendChild(script);
}
window.addEventListener('load', () => {
loadVendorScript('https://vendor.example.com/widget.js');
});5. Mover proveedores no críticos más tarde
Rara vez es necesario ejecutar widgets de revisión, herramientas de chat, mapas de calor, encuestas, ventanas emergentes, insignias de afiliados y algunas herramientas de personalización antes de la primera ventana gráfica. Retraselos hasta la carga, el tiempo de inactividad, el desplazamiento, el clic o la visibilidad de la sección. Para vídeos y mapas, utilice una fachada en lugar de cargar el iframe completo inmediatamente.
const schedule = window.requestIdleCallback || ((callback) => setTimeout(callback, 1200));
schedule(() => {
loadVendorScript('https://vendor.example.com/non-critical.js');
}, { timeout: 2500 });6. Pruebe el pago y la atribución antes de publicar
Tenga cuidado con el consentimiento, los análisis, los anuncios, los widgets de suscripción, la lógica de agregar al carrito y la transferencia de pago. Una página más rápida que pierde el seguimiento de conversiones o rompe la forma de un producto no es una ganancia. Pruebe la página de inicio, la página del producto, la página de colección, el cajón del carrito, la redirección de pago y todos los eventos de marketing después del cambio.
Solución manual frente a solución Thunder
| Problema | Corrección manual | Solución de Thunder |
|---|---|---|
| El fragmento de tema antiguo usa document.write | Reemplácelo con inserción Liquid, HTML o DOM. | Crea una línea de base más rápida, pero es posible que aún sea necesario eliminar el código heredado sin procesar. |
| El script del proveedor se carga sincrónicamente | Cambie al fragmento de proveedor asíncrono actual y pruebe el seguimiento. | Mejora automáticamente la sincronización de secuencias de comandos comunes no críticas. |
| La aplicación desinstalada dejó código atrás | Busque y elimine fragmentos, activos y etiquetas de script huérfanos. | Ayuda a reducir la presión de los recursos en el escaparate mientras limpias las sobras. |
| Las incrustaciones inyectan iframes temprano | Utilizar una fachada o cargar la interacción. | Combina bien con la priorización automatizada de recursos y el aplazamiento de scripts. |
Cómo verificar que la advertencia esté solucionada
Vuelva a probar la misma URL en PageSpeed Insights y el prueba de velocidad gratuita de Shopify. Compruebe si la advertencia desaparece o si cambia la fuente del script. Luego registre un seguimiento del rendimiento móvil y confirme que el script heredado ya no bloquea el análisis temprano ni crea tareas largas.
Observe también el flujo del negocio. Realice un pedido de prueba si es necesario. Confirme que agregar al carrito funciona, el consentimiento aún se activa, los eventos de análisis aún aparecen y los píxeles de los anuncios aún respetan la configuración de privacidad. Para una ruta de limpieza completa, siga las guía completa de optimización de velocidad de Shopify, compara la automatización en el la mejor guía de aplicaciones de velocidad de Shopify, o utilizar optimización de velocidad profesional para limpieza de temas riesgosos.
FAQ
¿Qué significa evitar document.write en Shopify?
Significa que un script está usando document.write() para inyectar marcado u otro script mientras la página se está cargando. En Shopify, esto generalmente proviene de fragmentos de aplicaciones antiguas, etiquetas de anuncios, píxeles de seguimiento, scripts de afiliados o código de tema personalizado.
¿Document.write seguirá siendo un problema de PageSpeed en 2026?
Sí, para las tiendas que aún ven la advertencia en informes antiguos de Lighthouse, herramientas de PageSpeed o auditorías de terceros. La documentación de Lighthouse de Chrome señala que la auditoría se eliminó de Lighthouse 13, pero document.write() sigue siendo un patrón de carga heredado arriesgado.
¿Por qué document.write es malo para la velocidad de Shopify?
document.write() puede bloquear el análisis, retrasar la representación y obligar al navegador a esperar scripts externos. Históricamente, Chrome ha intervenido en algunos casos de redes lentas porque document.write() puede retrasar gravemente la visualización de la página.
¿Puede Thunder solucionar las advertencias sobre document.write?
Thunder puede mejorar automáticamente la carga de secuencias de comandos de terceros comunes y la presión del rendimiento del escaparate, pero es posible que sea necesario eliminar o reemplazar el archivo raw document.write() dentro de un tema o fragmento de proveedor.
¿Qué debo usar en lugar de document.write?
Utilice HTML normal para contenido estático, Liquid para el marcado de Shopify renderizado por el servidor, métodos DOM para inyección del lado del cliente, creación de scripts asíncronos para cargadores de terceros y configuraciones de inserción de aplicaciones para scripts de proveedores cuando sea posible.