Shopify Evite document.write: corrija las advertencias de secuencias de comandos heredadas

Por qué document.write perjudica el rendimiento de Shopify

documento.escribir() es un método antiguo de JavaScript que escribe marcas directamente en la página mientras el navegador analiza HTML. Eso tenía sentido en fragmentos de anuncios y análisis más antiguos, pero es hostil al rendimiento de las tiendas modernas. Cuando el navegador encuentra un script de bloqueo que llama documento.escribir(), es posible que deba pausar el análisis, recuperar más JavaScript, inyectar nuevas marcas y continuar solo después de que finalice el trabajo.

La documentación de Lighthouse de Chrome advierte que documento.escribir() 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 móviles lentos son exactamente las personas a las que no puedes permitirte castigar. Si el script heredado aparece antes del héroe, el título del producto, el precio o el botón de agregar al carrito, puede resultar perjudicial. Shopify LCP, INPy 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

Comienza con el código de tu tema. Buscar tema.liquido, fragmentos, secciones y recursos para documento.escribir. Los temas antiguos a veces lo usan para insignias, sellos de confianza, rastreadores de afiliados, ventanas emergentes, incrustaciones sociales, widgets de localización de tiendas o respaldos de navegadores antiguos. Si ve un script pegado antes o cerca de la parte superior de <cuerpo>, 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í.

Finalmente, inspecciona Google Tag Manager y las etiquetas de marketing. Algunos proveedores de publicidad todavía ofrecen fragmentos antiguos que llaman documento.escribir() para insertar un iframe, un píxel de seguimiento o una dependencia de secuencia de comandos. Si GTM es parte del problema, utilice la guía dedicada en arreglando GTM que ralentiza Shopify antes de cambiar el 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 los scripts adivinando. En PageSpeed ​​Insights, expanda el diagnóstico y anote la URL del script. En Chrome DevTools, abra el panel Fuentes o busque todos los archivos cargados documento.escribir. Si la URL pertenece a tu tema, arregla el tema. Si pertenece a una aplicación o proveedor de etiquetas, busque la versión asíncrona actual del fragmento.

2. Reemplazar escrituras estáticas con Liquid o HTML

If the code writes markup that is always present, it should not be JavaScript at all. Render it in Liquid so the browser receives stable HTML from the server.

<!-- Avoid this old pattern -->
<script>
  documento.escribir('<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>

This is safer for layout stability because the element exists from the first HTML response. It also makes the section easier to manage in Shopify's theme editor.

3. Reemplazar escrituras dinámicas con inserción DOM

Si JavaScript realmente necesita crear marcas después de la carga, use las API DOM. Son explícitos, más fáciles de controlar y no interrumpen el análisis HTML de la misma manera que lo hace una escritura en tiempo de analizador.

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 documento.escribir() para cargar otro script. Reemplácelo con un cargador asíncrono y colóquelo después del contenido crítico o detrás de la intenció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

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