Shopify Evita document.write: correggi gli avvisi sugli script legacy

Perché document.write danneggia le prestazioni di Shopify

documento.write() è un vecchio metodo JavaScript che scrive il markup direttamente nella pagina mentre il browser analizza l'HTML. Ciò aveva senso negli snippet pubblicitari e di analisi più vecchi, ma è ostile alle prestazioni delle vetrine moderne. Quando il browser incontra uno script di blocco che chiama documento.write(), potrebbe essere necessario sospendere l'analisi, recuperare altro JavaScript, inserire nuovo markup e continuare solo al termine del lavoro.

La documentazione di Lighthouse di Chrome lo avverte documento.write() può ritardare notevolmente il contenuto visibile della pagina su connessioni lente e Chrome ha bloccato alcuni usi problematici in determinate condizioni di rete. Su Shopify, gli acquirenti mobili lenti sono esattamente le persone che non puoi permetterti di punire. Se lo script precedente viene visualizzato prima dell'eroe, del titolo del prodotto, del prezzo o del pulsante Aggiungi al carrello, può essere dannoso Shopify LCP, INPe tempo di blocco totale.

L'avviso si sovrappone anche a riduce il tempo di esecuzione di JavaScript, JavaScript legacye Blocco JavaScript di terze parti Shopify. In pratica, la soluzione di solito non è un'impostazione magica. Devi identificare quale snippet scrive sulla pagina, decidere se è ancora necessario e sostituirlo con un modello di caricamento più sicuro.

Da dove proviene document.write nei temi Shopify

Inizia con il codice del tema. Cerca tema.liquid, snippet, sezioni e risorse per documento.scrivi. I vecchi temi a volte lo utilizzano per badge, sigilli di fiducia, tracker di affiliazione, popup, incorporamenti social, widget di localizzazione di negozi o vecchi fallback del browser. Se vedi uno script incollato prima o vicino alla parte superiore <corpo>, ispezionalo prima.

Quindi controlla i residui delle app disinstallate. Le app di Shopify possono lasciare snippet, tag di script o blocchi di estensioni di app a tema. Uno store può disinstallare l'app ma mantenere il caricatore legacy nel tema. Ciò crea un doppio problema: lo script danneggia le prestazioni e nessuno lo possiede più. Il flusso di lavoro di pulizia in rimuove CSS e JavaScript non utilizzati si applica qui.

Infine, controlla Google Tag Manager e i tag di marketing. Alcuni fornitori di annunci forniscono ancora vecchi snippet che chiamano documento.write() per inserire una dipendenza iframe, pixel di tracciamento o script. Se GTM rientra nel problema, utilizza la guida dedicata su correzione del rallentamento di GTM Shopify prima di modificare il monitoraggio critico per le entrate.

Manuale passo dopo passo: correzione di Evita document.write su Shopify

1. Conferma l'esatta fonte dello script

Non rimuovere gli script indovinando. In PageSpeed ​​Insights, espandi la diagnostica e prendi nota dell'URL dello script. In Chrome DevTools, apri il pannello Sorgenti o cerca tutti i file caricati documento.scrivi. Se l'URL appartiene al tuo tema, correggi il tema. Se appartiene a un fornitore di app o tag, trova la versione asincrona corrente dello snippet.

2. Sostituisci le scritture statiche 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.write('<div class="trust-badge">Spedizione gratuita per importi superiori a $75</div>');
</script>

<!-- Use normal theme markup instead -->
<div class="trust-badge">
  Spedizione gratuita per importi superiori a $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. Sostituisci le scritture dinamiche con l'inserimento DOM

Se JavaScript ha davvero bisogno di creare markup dopo il caricamento, utilizza le API DOM. Sono espliciti, più facili da controllare e non interrompono l'analisi HTML nello stesso modo in cui può farlo una scrittura in fase di parser.

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. Sostituisci le scritture di script con la creazione di script asincroni

Molti snippet legacy utilizzano documento.write() per caricare un altro script. Sostituiscilo con un caricatore asincrono e posizionalo dopo il contenuto critico o dietro l'intento dell'utente quando lo script non è immediatamente necessario.

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. Sposta i fornitori non critici in un secondo momento

Widget di revisione, strumenti di chat, mappe di calore, sondaggi, popup, badge di affiliazione e alcuni strumenti di personalizzazione raramente devono essere eseguiti prima della prima visualizzazione. Ritardali fino al caricamento, al tempo di inattività, allo scorrimento, al clic o alla visibilità della sezione. Per video e mappe, utilizza una facciata invece di caricare immediatamente l'iframe completo.

const schedule = window.requestIdleCallback || ((callback) => setTimeout(callback, 1200));

schedule(() => {
  loadVendorScript('https://vendor.example.com/non-critical.js');
}, { timeout: 2500 });

6. Testare il checkout e l'attribuzione prima della pubblicazione

Fai attenzione al consenso, ai dati analitici, agli annunci, ai widget di abbonamento, alla logica di aggiunta al carrello e al trasferimento del pagamento. Una pagina più veloce che perde il monitoraggio delle conversioni o interrompe la forma di un prodotto non è una vittoria. Testa la home page, la pagina del prodotto, la pagina della collezione, il cassetto del carrello, il reindirizzamento del checkout e tutti gli eventi di marketing dopo la modifica.

Correzione manuale vs. Correzione Thunder

Come verificare che l'avviso sia stato corretto

Testa nuovamente lo stesso URL in PageSpeed Insights e il Test di velocità Shopify gratuito. Controlla se l'avviso scompare o se l'origine dello script cambia. Quindi registra una traccia delle prestazioni mobili e verifica che lo script legacy non blocchi più l'analisi anticipata o la creazione di attività lunghe.

Osserva anche tu il flusso degli affari. Effettua un ordine di prova, se necessario. Conferma che l'aggiunta al carrello funziona, che il consenso viene ancora attivato, che gli eventi di analisi vengono ancora visualizzati e che i pixel degli annunci rispettano ancora le impostazioni sulla privacy. Per un percorso di pulizia completo, seguire il guida completa all'ottimizzazione della velocità di Shopify, confronta l'automazione nel migliore guida alle app veloci di Shopifyo utilizzare ottimizzazione della velocità professionale per la pulizia del tema rischioso.

FAQ