Correzione rapida con Thunder
Thunder Page Speed aiuta i negozi Shopify a ridurre i danni causati dagli script non critici migliorando la tempistica delle risorse, il caricamento degli script, la consegna delle immagini e la pressione sui Core Web Vitals. È la soluzione di base più veloce prima di dedicare tempo agli sviluppatori per cercare vecchio codice tra i file del tema, gli incorporamenti delle app e Google Tag Manager.
Perché document.write danneggia le prestazioni di Shopify
document.write() è un vecchio metodo JavaScript che inserisce il markup direttamente nella pagina mentre il browser analizza l’HTML. Poteva avere senso nei vecchi snippet pubblicitari o di analisi, ma penalizza le prestazioni delle vetrine moderne. Quando il browser incontra uno script bloccante che chiama document.write(), può dover interrompere l’analisi, scaricare altro JavaScript, inserire il nuovo markup e riprendere solo al termine di queste operazioni.
La documentazione Lighthouse di Chrome avverte che document.write() può ritardare notevolmente la comparsa dei contenuti visibili sulle connessioni lente; Chrome blocca infatti alcuni usi problematici in determinate condizioni di rete. Su Shopify, è essenziale non penalizzare proprio gli acquirenti su rete mobile lenta. Se lo script legacy viene eseguito prima della sezione principale, del titolo del prodotto, del prezzo o del pulsante Aggiungi al carrello, può peggiorare il LCP di Shopify, l’INP e il 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 dal codice del tema. Cerca in theme.liquid, negli snippet, nelle sezioni e negli asset ogni occorrenza di document.write. I vecchi temi a volte lo usano per badge, sigilli di fiducia, tracker di affiliazione, popup, contenuti social incorporati, localizzatori di negozi o vecchi fallback del browser. Se trovi uno script prima di </head> o vicino all’inizio di <body>, ispezionalo per primo.
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 pubblicitari distribuiscono ancora vecchi snippet che chiamano document.write() per inserire un iframe, un pixel di tracciamento o una dipendenza di script. Se GTM contribuisce al problema, consulta la guida dedicata alla correzione del rallentamento di Shopify causato da GTM prima di modificare un tracciamento essenziale per le entrate.
Guida passo passo: correggere l’avviso «Avoid document.write» su Shopify
1. Conferma l'esatta fonte dello script
Non rimuovere gli script alla cieca. In PageSpeed Insights, espandi la diagnostica e annota l’URL dello script. In Chrome DevTools, apri il pannello Sorgenti oppure cerca document.write in tutti i file caricati. Se l’URL appartiene al tema, correggi il tema. Se appartiene a un’app o a un fornitore di tag, cerca la versione asincrona più recente dello snippet.
2. Sostituisci le scritture statiche con Liquid o HTML
Se il codice scrive markup che è sempre presente, non dovrebbe essere JavaScript affatto. Renderizzatelo in Liquid in modo che il browser riceva HTML stabile dal server.
<!-- Avoid this old pattern -->
<script>
document.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>Questa soluzione tutela meglio la stabilità del layout, perché l’elemento è presente già nella prima risposta HTML. Inoltre, rende la sezione più facile da gestire nell’editor del tema di Shopify.
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 document.write() per caricare un altro script. Sostituiscilo con un caricatore asincrono e posizionalo dopo il contenuto critico, oppure attivalo in seguito a un’azione dell’utente quando non è necessario caricarlo subito.
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 o soluzione con Thunder
| Problema | Correzione manuale | Correzione di Thunder |
|---|---|---|
| Il vecchio snippet del tema utilizza document.write | Sostituiscilo con l'inserimento Liquid, HTML o DOM. | Crea una linea di base più veloce, ma potrebbe comunque essere necessario rimuovere il codice legacy non elaborato. |
| Lo script del fornitore viene caricato in modo sincrono | Passa allo snippet del fornitore asincrono corrente e verifica il monitoraggio. | Migliora automaticamente i tempi comuni degli script non critici. |
| L'app disinstallata ha lasciato del codice | Trova e rimuovi snippet, risorse e tag di script orfani. | Aiuta a ridurre la pressione sulle risorse del negozio mentre pulisci gli avanzi. |
| Gli incorporamenti iniettano iframe in anticipo | Usa una facciata o carica l'interazione. | Si abbina bene alla definizione automatica delle priorità delle risorse e al differimento degli script. |
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
Cosa significa evitare document.write su Shopify?
Significa che uno script sta usando document.write() per iniettare markup o un altro script mentre la pagina si sta caricando. Su Shopify, questo di solito proviene da vecchi snippet di app, tag pubblicitari, pixel di tracciamento, script di affiliazione o codice tema personalizzato.
Document.write è ancora un problema di PageSpeed nel 2026?
Sì, per i negozi che vedono ancora l'avviso nei report Lighthouse più vecchi, negli strumenti PageSpeed o negli audit di terze parti. La documentazione di Lighthouse di Chrome rileva che l'audit è stato rimosso da Lighthouse 13, ma document.write() rimane un modello di caricamento legacy rischioso.
Perché document.write è dannoso per la velocità di Shopify?
document.write() può bloccare l'analisi, ritardare il rendering e forzare il browser ad attendere script esterni. Chrome è storicamente intervenuto in alcuni casi di rete lenta perché document.write() può ritardare notevolmente la visualizzazione della pagina.
Thunder può correggere gli avvisi di document.write?
Thunder può migliorare automaticamente il caricamento di script comuni di terze parti e la pressione sulle prestazioni del negozio, ma document.write() non elaborato all'interno di un tema o di uno snippet del fornitore potrebbe dover essere rimosso o sostituito manualmente.
Cosa dovrei usare al posto di document.write?
Utilizza HTML normale per contenuto statico, Liquid per markup Shopify renderizzato dal server, metodi DOM per l'iniezione lato client, creazione di script asincroni per caricatori di terze parti e impostazioni di incorporamento dell'app per gli script del fornitore, ove possibile.