Guida alla velocità · Aggiornato il 10 giugno 2026

Eliminare le risorse che bloccano il rendering su Shopify: 5 correzioni comprovate (2026)

Come correggere le risorse che bloccano il rendering su Shopify

Le risorse che bloccano il rendering sono file CSS, JavaScript e font che impediscono al vostro negozio Shopify di mostrare i contenuti finché non hanno finito di caricarsi. In genere aggiungono 1-3 secondi al tempo di caricamento — e sono uno degli avvisi PageSpeed più comuni che i commercianti Shopify vedono.

La buona notizia? Potete correggerlo in meno di un minuto — oppure farlo da soli con il codice. Iniziate eseguendo un test di velocità gratuito per scoprire quante risorse bloccanti ha il vostro negozio.

~12 min di lettura · 3,200 parole · Esempi di codice inclusi

Cosa sono le risorse che bloccano il rendering?

Quando il browser carica una pagina Shopify, legge l'HTML dall'alto verso il basso. Quando incontra un tag <script> (senza async o defer), interrompe il rendering, scarica lo script, lo esegue e solo dopo continua. Lo stesso accade con i tag <link rel="stylesheet"> per il CSS esterno — il browser non renderizza nulla finché il CSS non è stato scaricato e analizzato.

Questo è il motivo per cui i visitatori vedono una pagina bianca vuota (o parzialmente caricata) per diversi secondi mentre il browser elabora questi file in background. Il browser è letteralmente bloccato dal renderizzare contenuti visibili.

Tre tipi di risorse che bloccano il rendering su Shopify

JS

File JavaScript — Script del tema, script delle app, tracker di analytics. Il colpevole principale nella maggior parte dei negozi Shopify. Ogni tag script senza defer mette in pausa completamente il rendering.

CSS

Fogli di stile CSS — Fogli di stile esterni caricati nell'<head>. Il browser deve scaricare e analizzare tutto il CSS prima di renderizzare qualsiasi cosa.

Font

Web font — Font personalizzati che devono essere scaricati prima che il testo venga mostrato. Senza font-display: swap, il browser mostra testo invisibile finché il font non arriva.

In un tipico negozio Shopify, l'avviso "Eliminate render-blocking resources" in PageSpeed Insights corrisponde a 1-4 secondi di ritardo. Più app avete installato, peggio è — ogni app può aggiungere più script bloccanti.

Perché è importante per il vostro negozio

Le risorse che bloccano il rendering non sono solo un problema tecnico — hanno un impatto diretto sulle vostre entrate:

7%

calo delle conversioni per ogni ritardo di 1 secondo

Fonte: Google/Deloitte

53%

dei visitatori mobile abbandona se una pagina impiega più di 3 secondi

Fonte: Google

SEO

I Core Web Vitals sono un fattore di ranking Google dal 2021

Fonte: Google Search Central

Se il vostro negozio impiega 5 secondi a mostrare i contenuti a causa delle risorse bloccanti, state perdendo visitatori prima ancora che vedano i vostri prodotti. Correggere questo problema è una delle ottimizzazioni di velocità con il ROI più alto che potete fare. Per una panoramica più ampia su ogni tecnica di ottimizzazione, consultate la nostra guida completa all'ottimizzazione della velocità.

🆕 Aggiornamento 2026: l'INP ha sostituito il FID come Core Web Vital

Da marzo 2024, Google usa l'INP (Interaction to Next Paint) al posto del FID per misurare la reattività. Gli script che bloccano il rendering danneggiano l'INP perché monopolizzano il thread principale — facendo sembrare poco reattivi tap, clic e scroll. Correggere le risorse bloccanti ora migliora due Core Web Vitals: LCP (rendering iniziale più veloce) e INP (interazioni più reattive). Se il vostro punteggio di velocità è calato di recente, gli script bloccanti ne sono probabilmente una causa. Leggete la nostra guida ai Core Web Vitals per il quadro completo.

La correzione semplice: ottimizzazione automatica con Thunder

Prima di passare alle correzioni manuali a livello di codice qui sotto — c'è un modo molto più semplice. Thunder Page Speed Optimizer rileva e corregge automaticamente le risorse che bloccano il rendering nel vostro negozio Shopify, senza bisogno di modificare il codice.

Cosa corregge automaticamente Thunder:

✅

Rinvio degli script

Rinvia automaticamente gli script delle app di terze parti — anche quelli che non potete controllare manualmente

✅

Inserimento inline del CSS critico

Estrae e inserisce inline il CSS above-the-fold così la pagina si renderizza istantaneamente

✅

Ottimizzazione dei font

Aggiunge font-display: swap e precarica automaticamente i font critici

✅

Mappatura intelligente delle dipendenze

Capisce quali script dipendono l'uno dall'altro — li rinvia in sicurezza senza rompere le app

✅

Minificazione del CSS

Rimuove il CSS inutilizzato e comprime il resto per file più piccoli

✅

Monitoraggio continuo

Monitora quotidianamente la velocità e vi avvisa se nuove app introducono risorse bloccanti

⚡

Miglioramento medio: +27 punti PageSpeed

Gli utenti di Thunder registrano un miglioramento medio di 27 punti nel punteggio Google PageSpeed. La maggior parte dei negozi passa da rosso/arancione a verde nel giro di pochi minuti dall'attivazione delle ottimizzazioni.

Correggete subito le risorse bloccanti →

Piano gratuito disponibile · Nessuna carta di credito richiesta · Configurazione in 30 secondi · Funziona con tutti i temi · Vedi tutti i piani

Perché usare un'app invece di correggere manualmente? Le correzioni manuali qui sotto richiedono di modificare i file Liquid del tema, capire le dipendenze tra gli script, generare il CSS critico e testare a fondo. Un solo errore può rompere il checkout o le app. Inoltre va rifatto ogni volta che installate una nuova app o aggiornate il tema. Thunder gestisce tutto questo automaticamente e in modo continuo.

Preferite farlo da soli? Continuate a leggere ↓

Come identificare le risorse che bloccano il rendering nel vostro negozio

⚡ Saltate questo passaggio: il piano gratuito di Thunder identifica automaticamente tutte le risorse che bloccano il rendering nel vostro negozio e mostra esattamente quali lo stanno rallentando — nessun test manuale necessario.

Metodo 1: Google PageSpeed Insights

Andate su pagespeed.web.dev, inserite l'URL del negozio e attendete l'analisi. Potete anche eseguire un test di velocità gratuito con il nostro strumento per una panoramica rapida. Nei risultati, scorrete fino alla sezione "Opportunities" e cercate "Eliminate render-blocking resources." Cliccate per espanderla — vedrete ogni file che blocca il rendering e il risparmio di tempo stimato.

Metodo 2: Coverage di Chrome DevTools

Aprite il negozio in Chrome, premete F12, poi Ctrl+Shift+P (o Cmd+Shift+P su Mac) e digitate "Coverage." Questo mostra quanto di ogni file CSS e JavaScript viene effettivamente utilizzato durante il caricamento. Le barre rosse = codice inutilizzato che il browser ha scaricato ma di cui non aveva bisogno.

Metodo 3: waterfall di rete

In Chrome DevTools → scheda Network, ricaricate la pagina e osservate il grafico waterfall. I file che si caricano presto con barre lunghe stanno bloccando il rendering. Concentratevi sui file JavaScript e CSS che si caricano prima della prima immagine.

💡 Consiglio: testate su mobile. Passate all'emulazione mobile di Chrome DevTools prima di analizzare. Le risorse che bloccano il rendering hanno un impatto molto maggiore su mobile a causa di processori e connessioni più lenti — consultate la nostra guida all'ottimizzazione della velocità mobile su Shopify per saperne di più.

Correzione manuale: JavaScript che blocca il rendering

⚠️ Difficoltà: da intermedia ad avanzata. Modificare il JavaScript del tema richiede di capire le dipendenze tra gli script, l'ordine di esecuzione e il templating Liquid di Shopify. Gli errori possono rompere il checkout, le app e il tracciamento. Fate sempre un backup del tema prima di apportare modifiche.

Il JavaScript è il principale colpevole del blocco del rendering nella maggior parte dei negozi Shopify. Ecco come affrontare manualmente ogni tipo:

1. Aggiungere defer agli script personalizzati

Se avete aggiunto tag script personalizzati nei file del tema (theme.liquid, file delle sezioni, ecc.), aggiungete l'attributo defer:

<!-- ❌ Before: render-blocking -->
<script src="https://example.com/custom-script.js"></script>

<!-- ✅ After: non-render-blocking -->
<script src="https://example.com/custom-script.js" defer></script>

defer indica al browser: "Scarica questo in background ed eseguilo dopo che l'HTML è stato completamente analizzato." Questo preserva l'ordine di esecuzione eliminando al contempo il comportamento di blocco del rendering.

2. Spostare gli script in fondo

Per gli script inline (codice tra i tag <script>), spostateli dall'<head> a subito prima di </body>:

<!-- ❌ Before: in <head>, blocks rendering -->
<head>
  <script>
    // analytics or tracking code
  </script>
</head>

<!-- ✅ After: before </body>, renders first -->
<body>
  <!-- ... page content ... -->
  <script>
    // analytics or tracking code
  </script>
</body>

3. Usare async per script indipendenti

Per gli script che non dipendono da altri script (come i tracker di analytics autonomi), async scarica ed esegue senza bloccare — ma non garantisce l'ordine di esecuzione:

<!-- ✅ Good for independent scripts like analytics -->
<script src="https://analytics.example.com/track.js" async></script>

<!-- ✅ Better for scripts with dependencies -->
<script src="https://cdn.example.com/library.js" defer></script>
<script src="https://cdn.example.com/app.js" defer></script>

Quando usare cosa: usate defer per la maggior parte degli script — preserva l'ordine di esecuzione. Usate async solo per script davvero indipendenti. In caso di dubbio, usate defer.

Correzione manuale: CSS che blocca il rendering

⚠️ Difficoltà: avanzata. L'estrazione del CSS critico è una delle ottimizzazioni di velocità più difficili da fare correttamente. Sbagliare causa un Flash of Unstyled Content (FOUC) — la pagina appare brevemente rotta prima che gli stili si carichino. Per questo la maggior parte degli sviluppatori usa strumenti automatici per questo compito.

Il CSS blocca il rendering per sua natura — il browser deve sapere come appaiono le cose prima di mostrarle. Non potete semplicemente rinviare tutto il CSS (la pagina lampeggerebbe senza stili). L'approccio corretto:

1. Inserire inline il CSS critico

Il CSS critico è il minimo CSS necessario per stilizzare il contenuto above-the-fold. Inseritelo inline direttamente nell'<head> così il browser renderizza istantaneamente, poi caricate il foglio di stile completo in modo asincrono:

<head>
  <!-- ✅ Critical CSS inlined for instant rendering -->
  <style>
    /* Only styles for above-the-fold content */
    header {display:flex;align-items:center;height:64px}
    .hero {padding:4rem 1rem;text-align:center}
    .hero h1 {font-size:2.5rem;font-weight:800}
  </style>

  <!-- ✅ Full CSS loaded asynchronously -->
  <link rel="preload" href="{{ "theme.css" | asset_url }}" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="{{ "theme.css" | asset_url }}"></noscript>
</head>

La parte difficile? Capire quale CSS è critico. È diverso per ogni pagina (homepage, collezione, prodotto) e per ogni tema. Strumenti come Critical di Addy Osmani possono aiutare, ma vanno eseguiti per ogni template di pagina e aggiornati ogni volta che cambiate tema.

2. Rimuovere il CSS inutilizzato

Molti temi Shopify includono CSS per ogni funzionalità possibile — mega menu, accordion, quickview — anche se non li usate. Usate la scheda Coverage di Chrome DevTools per misurare. Se viene usato meno del 50%, c'è un margine di ottimizzazione significativo. Ma rimuovere il CSS manualmente rischia di rompere funzionalità di cui non conoscevate l'esistenza.

3. Ridurre al minimo il CSS esterno

Ogni file CSS esterno (Google Fonts, fogli di stile delle app, widget) aggiunge una richiesta bloccante. Ospitate i font in locale, unite i piccoli fogli di stile e verificate quale CSS delle app è davvero necessario. Abbinare queste correzioni CSS a un corretto lazy loading garantisce che il browser carichi solo ciò che serve per il viewport iniziale.

Correzione manuale: font che bloccano il rendering

I web font causano due problemi: bloccano il rendering del testo (FOIT — Flash of Invisible Text) e caricarli da domini esterni aggiunge latenza di rete.

1. Usare font-display: swap

Mostra subito il testo con un font di riserva, poi passa al font personalizzato quando è pronto:

@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap; /* ✅ Shows fallback text immediately */
}

2. Precaricare i font critici

Avviate lo scaricamento del font più importante in anticipo:

<link rel="preload" href="/fonts/your-font.woff2" as="font" 
      type="font/woff2" crossorigin>

Precaricate solo 1-2 font critici. Precaricarne troppi spreca banda.

3. Ospitare in locale invece di Google Fonts

Caricare da fonts.googleapis.com richiede lookup DNS aggiuntivi. Ospitare in locale mette i font sul CDN di Shopify:

  • Scaricate i font da Google Webfonts Helper
  • Caricate i file .woff2 nella cartella Assets del tema
  • Aggiornate il CSS @font-face per fare riferimento ai file locali
  • Rimuovete il tag <link> di Google Fonts

4. Limitare i pesi dei font

Ogni peso (regular, bold, italic) è un download separato. La maggior parte dei negozi ha bisogno solo di regular (400) e bold (700). Caricare 4-6 pesi aggiunge inutilmente 200-600KB.

Il problema degli script di terze parti (perché le correzioni manuali non bastano)

Ecco la dura verità su tutto quanto sopra: le tecniche manuali funzionano benissimo per il codice che controllate — ma nella maggior parte dei negozi Shopify, i principali colpevoli del blocco del rendering sono gli script delle app di terze parti che non potete modificare.

Quando un'app Shopify inietta un tag <script> nel vostro negozio, non potete scegliere se ha defer o async. Questa decisione l'ha presa lo sviluppatore dell'app — e molti non aggiungono nessuno dei due, rendendo i loro script bloccanti per il rendering di default.

Un tipico negozio Shopify ha 5-15 app installate. Anche se ognuna aggiunge un solo script bloccante, sono comunque 5-15 file che il browser deve scaricare ed eseguire prima di mostrare qualsiasi contenuto. Approfondiamo l'argomento nella nostra guida sulla gestione degli script di terze parti su Shopify. E ogni volta che installate una nuova app, può annullare tutto il vostro lavoro di ottimizzazione manuale.

L'approccio manuale vs Thunder

Correzioni manuali Thunder
Script del tema ✅ Correggibile ✅ Automatico
Script delle app di terze parti ❌ Non controllabile ✅ Automatico
CSS critico ⚠️ Difficile da mantenere ✅ Automatico
Ottimizzazione dei font ✅ Correggibile ✅ Automatico
Nuova app installata ❌ Rifare tutto ✅ Si adatta automaticamente
Aggiornamento del tema ❌ Rifare tutto ✅ Si adatta automaticamente
Tempo richiesto 2-4 ore 30 secondi
Rischio di rompere il negozio ⚠️ Medio-alto ✅ Rollback sicuro

È esattamente per questo che abbiamo creato Thunder. Funziona a livello di tema — intercettando e ottimizzando il modo in cui si caricano tutti gli script, compresi quelli di terze parti che non potete toccare manualmente. E si adatta automaticamente quando aggiungete nuove app o aggiornate il tema. I piani partono da 19.99$/mese — molto meno che assumere uno sviluppatore per rinviare manualmente gli script. Se state anche valutando un cambio di tema, consultate la nostra guida ai temi Shopify più veloci — abbinare un tema veloce a Thunder vi dà la migliore base di partenza possibile.

Come verificare le correzioni

Che abbiate usato Thunder o corretto le cose manualmente, ecco come confermare che le risorse bloccanti sono state eliminate:

1

Rieseguite PageSpeed Insights

L'opportunità "Eliminate render-blocking resources" dovrebbe mostrare risparmi ridotti o sparire del tutto. Il vostro punteggio Performance dovrebbe migliorare.

2

Controllate LCP e TBT

L'LCP dovrebbe diminuire (i contenuti si renderizzano prima). Il TBT dovrebbe diminuire (meno script bloccano il thread principale).

3

Testate le funzionalità delle app

Verificate che widget di recensioni, popup, ricerca, carrello e checkout funzionino ancora. Rinviare gli script può causare problemi di tempistica — Thunder li gestisce automaticamente, ma le modifiche manuali richiedono test approfonditi.

4

Monitorate per 28 giorni

I dati di laboratorio cambiano immediatamente, ma le metriche degli utenti reali (dati CrUX in Search Console) richiedono 28 giorni. Continuate a monitorare per confermare che i miglioramenti si mantengano.

Aggiornamento di giugno 2026: cosa correggere per primo

PageSpeed Insights può elencare CSS, JavaScript, font e file di terze parti tutti sotto lo stesso avviso "Eliminate render-blocking resources". La risposta utile non è "correggere tutto", ma il giusto ordine di priorità.

  1. Correggete prima il JavaScript delle app se gli URL dei file includono app di recensioni, chat, popup, analytics o page builder. Questi script bloccano il primo rendering e in seguito competono per il tempo del thread principale.
  2. Correggete poi il CSS critico se il foglio di stile principale del tema compare in cima all'avviso. Inserite inline solo il CSS above-the-fold e caricate il resto in modo asincrono.
  3. Correggete infine i font precaricando il file del font principale e usando font-display: swap. I font raramente superano gli script delle app in termini di risparmio totale, ma possono evitare il testo invisibile.

Thunder automatizza i primi due passaggi per i negozi Shopify: rinvia gli script non critici delle app, preserva l'ordine degli script e inserisce inline il CSS critico senza modificare manualmente il tema. Per il quadro completo, abbinate questo articolo alla nostra guida all'ottimizzazione JavaScript per Shopify e alla guida all'ottimizzazione CSS per Shopify.

Risorse che bloccano il rendering su Shopify: i numeri del 2026

Sulla base dei dati di oltre 2,000 negozi Shopify analizzati da Thunder nel primo trimestre del 2026, ecco lo stato attuale delle risorse bloccanti sulla piattaforma:

17

Media di risorse bloccanti per negozio (in aumento rispetto a 14 nel 2025 — le app continuano a crescere)

2.3s

Ritardo medio causato dalle risorse bloccanti su mobile

68%

Delle risorse bloccanti proviene da app di terze parti, non dal tema stesso

91%

Dei negozi Shopify ha almeno un avviso "Eliminate render-blocking resources" in PageSpeed Insights

La tendenza è chiara: man mano che i commercianti installano più app per competere (il negozio Shopify medio ha ora oltre 10 app), le risorse bloccanti continuano a moltiplicarsi. Le correzioni manuali funzionano temporaneamente, ma le nuove installazioni di app reintroducono script bloccanti. Una soluzione automatica come l'ottimizzazione continua di Thunder individua le nuove risorse bloccanti non appena compaiono.

Per maggiori dettagli su come queste risorse bloccanti influiscono sui vostri Core Web Vitals, in particolare LCP e INP, consultate la nostra guida dedicata. E per scoprire esattamente quante risorse bloccanti ha il vostro negozio, eseguite un test di velocità gratuito.

Domande frequenti

Cosa sono le risorse che bloccano il rendering su Shopify?

Le risorse che bloccano il rendering sono file CSS, file JavaScript e font che impediscono al browser di mostrare il contenuto della pagina finché non sono stati scaricati ed elaborati completamente. Su Shopify, le risorse più comuni di questo tipo sono gli script delle app di terze parti, il JavaScript del tema, i fogli di stile CSS esterni e i web font. Costringono il visitatore a fissare una pagina vuota o parzialmente caricata mentre il browser le elabora.

Come trovo le risorse che bloccano il rendering nel mio negozio Shopify?

Il modo più semplice è installare Thunder Page Speed Optimizer — analizza automaticamente il negozio e identifica ogni risorsa che blocca il rendering, mostrandovi esattamente quali script e fogli di stile lo rallentano. Per un controllo manuale, inserite l'URL del negozio in Google PageSpeed Insights (pagespeed.web.dev) e cercate l'opportunità 'Eliminate render-blocking resources'.

Posso correggere le risorse che bloccano il rendering senza programmare?

Sì. Thunder Page Speed Optimizer corregge automaticamente le risorse che bloccano il rendering — senza bisogno di modificare il codice. Rinvia gli script di terze parti, inserisce inline il CSS critico e ottimizza il caricamento dei font con un clic. L'approccio manuale richiede di modificare i file Liquid del tema, con il rischio di rompere il negozio se fatto in modo scorretto.

Posso aggiungere defer o async agli script delle app Shopify?

Non direttamente — gli script delle app di terze parti vengono iniettati dalle app stesse e non controllate i loro tag script. Dovreste contattare ogni sviluppatore di app e chiedergli di aggiungere defer/async, cosa che raramente avviene in tempi brevi. Thunder risolve il problema intercettando e rinviando automaticamente gli script di terze parti senza modificare le app stesse.

Rinviare gli script romperà le mie app Shopify?

Può succedere se fatto manualmente. Un rinvio ingenuo degli script (aggiungere 'defer' a tutto senza criterio) può rompere le app che dipendono da uno specifico ordine di caricamento degli script. Thunder gestisce il problema in modo intelligente — mappa le catene di dipendenza tra gli script e li rinvia in sicurezza preservando l'ordine di esecuzione, così le app continuano a funzionare correttamente.

Qual è la differenza tra async e defer per gli script?

Entrambi scaricano gli script in background senza bloccare il rendering, ma li eseguono in modo diverso. 'async' esegue lo script non appena viene scaricato, indipendentemente dall'ordine — rischioso se gli script dipendono l'uno dall'altro. 'defer' attende che l'HTML sia completamente analizzato, poi esegue in ordine. Per la maggior parte delle ottimizzazioni Shopify, 'defer' è più sicuro. Thunder sceglie automaticamente la strategia giusta per ogni script.

Di quanto sarà più veloce il mio negozio dopo aver corretto le risorse che bloccano il rendering?

La maggior parte dei negozi Shopify registra un miglioramento di 1-3 secondi nel tempo di caricamento dopo aver corretto le risorse che bloccano il rendering. Il miglioramento esatto dipende da quante risorse bloccanti avete e dalle loro dimensioni. I negozi con molte app installate registrano di solito i guadagni maggiori. Gli utenti di Thunder segnalano un miglioramento medio del punteggio PageSpeed di oltre 27 punti.

Cosa significa 'la pagina contiene risorse CSS bloccanti'?

Questo avviso di PageSpeed Insights significa che la pagina ha fogli di stile CSS esterni nell'<head> che il browser deve scaricare e analizzare completamente prima di poter renderizzare qualsiasi contenuto visibile. Ogni file CSS esterno aggiunge un ritardo di andata e ritorno — in genere 50-200ms ciascuno. Su Shopify, questo include il foglio di stile principale del tema, il CSS iniettato dalle app e Google Fonts. La correzione consiste nell'inserire inline il CSS critico (gli stili necessari per il contenuto above-the-fold) e caricare il resto in modo asincrono.

Quante risorse che bloccano il rendering ha in genere un negozio Shopify?

Un tipico negozio Shopify con 8-12 app installate ha 10-25 risorse che bloccano il rendering: 3-5 dal tema (JavaScript e CSS), 5-15 dalle app installate (ogni app può aggiungere 1-3 script) e 2-5 da font e servizi esterni. Ogni risorsa bloccante aggiunge 50-200ms di ritardo. Thunder identifica automaticamente ogni risorsa che blocca il rendering nel negozio e mostra esattamente quali app ne sono responsabili.

Le risorse che bloccano il rendering influiscono sull'INP (Interaction to Next Paint)?

Sì. Il JavaScript che blocca il rendering non ritarda solo il primo rendering — occupa anche il thread principale, ritardando la capacità del browser di rispondere alle interazioni dell'utente. Da quando Google ha sostituito FID con INP come Core Web Vital nel marzo 2024, questo conta ancora di più. Gli script sincroni pesanti bloccano il thread principale per centinaia di millisecondi, facendo sembrare lenti tap e clic. Rinviare gli script che bloccano il rendering migliora sia la velocità di caricamento iniziale sia il punteggio INP.

La dashboard delle prestazioni integrata di Shopify mostra le risorse che bloccano il rendering?

La Web Performance Dashboard di Shopify mostra i Core Web Vitals complessivi (LCP, INP, CLS) ma non elenca le singole risorse che bloccano il rendering. Per vedere esattamente quali file bloccano il rendering, analizzate il negozio con Google PageSpeed Insights oppure usate Thunder Page Speed Optimizer, che elenca ogni script e foglio di stile bloccante insieme all'app che lo ha iniettato.

Dovrei correggere prima il JavaScript o il CSS che blocca il rendering su Shopify?

Iniziate dal JavaScript se avete molte app installate, perché gli script delle app di solito creano il ritardo maggiore e danneggiano anche l'INP. Iniziate dal CSS se PageSpeed Insights mostra grandi risparmi sui fogli di stile del tema o se la pagina lampeggia vuota prima del rendering. Thunder gestisce entrambi: rinvia gli script non critici e inserisce inline il CSS critico, così il primo rendering può avvenire prima.

Perché l'avviso sulle risorse bloccanti ricompare dopo averlo corretto?

Su Shopify, l'avviso spesso ricompare dopo aver installato una nuova app, aggiornato un tema, aggiunto un nuovo tag di tracciamento o attivato un widget che inietta nuovo CSS o JavaScript. Per questo le correzioni manuali una tantum si deteriorano nel tempo. Ritestate dopo ogni modifica di app o tema, oppure usate un'ottimizzazione continua in modo che le nuove risorse bloccanti vengano individuate automaticamente.

Fai da te

Piano gratuito · Installazione in 1 clic · Risultati immediati

Installa Thunder gratis →

Pensiamo a tutto noi

Garanzia Core Web Vitals · Consegna in 2 settimane · 6 mesi di Thunder gratis

Richiedi l’ottimizzazione professionale →

A partire da 1.500 €