Catene di richieste critiche di Shopify: Correggi l'avviso PageSpeed (2026)

Correzione rapida con Thunder

Cosa significa PageSpeed per catene di richieste critiche

Una richiesta critica è una risorsa che il browser considera importante per il rendering della pagina corrente. Una catena appare quando una risorsa critica ne ritarda un'altra: l'HTML scopre il CSS, il CSS scopre un carattere, uno script di blocco ritarda il markup dell'immagine o uno script carica un altro script prima che la pagina possa diventare utile.

I rapporti più recenti del Lighthouse lo chiamano " Albero delle dipendenze di rete. I rapporti più vecchi e molti thread della community di Shopify lo chiamano ancora evitare di concatenare richieste critiche. In ogni caso, la domanda pratica è la stessa: quale risorsa fa attendere la prima finestra?

Questa diagnostica non è una metrica del campo Core Web Vitals, ma spesso spiega una debolezza Rapporto Core Web Vitals. Le catene lunghe aumentano il ritardo di caricamento per LCP, ritardano First Contentful Paint e fanno oscillare selvaggiamente i punteggi dei dispositivi mobili perché i telefoni lenti avvertono ogni dipendenza in modo più netto.

La catena specifica per Shopify che vedi di solito

Un tema Shopify pulito può comunque creare una catena critica come questa:

document
  -> theme.css
    -> storefront font file
  -> theme.js
    -> app embed script
      -> widget script
  -> Immagine dell'eroe scoperta tardi

Il browser non può dipingere la pagina visibile finché non è disponibile abbastanza CSS. Non può dare priorità a un'immagine che non ha scoperto. Non può rispondere rapidamente se JavaScript dell'app acquisisce il thread principale mentre la pagina è ancora in caricamento. Questo è il motivo per cui il lavoro sulla catena delle richieste si sovrappone a Risorse che bloccano il rendering, lavoro del filo principalee Ottimizzazione JavaScript.

Passaggio 1: identificare il percorso critico effettivo

Run PageSpeed Insights, open the Network Dependency Tree or critical request chain section, and write down the deepest chain. Then open Chrome DevTools -> Rete, disabilita la cache, ricarica con limitazione mobile e ordina per ora di inizio.

Non correggere tutti i file nella cascata. Cerca risorse ad alta priorità che blocchino la prima finestra: CSS globale, caratteri, immagini hero, script di temi nell'intestazione, script di app e richieste di terze parti che iniziano prima che la pagina sia utile. Se l'avviso indica 30 file ma solo uno è sopra la piega, correggi prima quello.

Per un flusso di lavoro più ampio, utilizza il nostro Guida al controllo della velocità di Shopify before touching code. It keeps you from spending an hour on request chains when the bigger problem is oversized images or an app stack.

Passaggio 2: rinviare temi non critici e script di app

Gli script in testa possono bloccare l'analisi e creare nuove richieste critiche. Se non è necessario uno script per eseguire il rendering della prima finestra, rinvialo:

<script src="{{ 'theme.js' | asset_url }}" defer></script>

Utilizzare differire per gli script che necessitano dell'ordine dei documenti. Utilizzare asincrono Attributi only for independent scripts such as simple analytics beacons. For app scripts you do not control, Thunder is safer because dependency-aware deferral prevents common breakage from blindly moving files.

Passaggio 3: precaricare solo la vera risorsa Above-the-Fold

Il precarico è potente perché cambia l'ordine di rilevamento. È anche facile abusarne. Precarica l'immagine hero solo se è l'effettivo elemento LCP oppure precarica il carattere critico solo se il rendering del testo è bloccato da una richiesta tardiva del carattere.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="{{ settings.hero_image | image_url: width: 800 }} 800w, {{ settings.hero_image | image_url: width: 1600 }} 1600w"
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

Non precaricare mai tutte le diapositive del carosello. Non precaricare mai un'immagine desktop che i visitatori mobili non utilizzeranno. L'obiettivo è una catena più breve, non una coda più rumorosa. Se la tua immagine LCP è caricata in modo lento, risolvi anche questo con caricamento="ansioso" e fetchpriority="alta".

Passaggio 4: ridurre i CSS che bloccano il rendering

I temi Shopify spesso forniscono un file CSS di grandi dimensioni per ogni modello. Ciò crea una catena semplice ma costosa: l'HTML attende i CSS prima del rendering, anche se la maggior parte dei CSS appartiene alle sezioni Below the Fold.

Il percorso manuale sicuro è mantenere il CSS del layout globale nel file principale, quindi spostare la sezione CSS pesante più vicino alla sezione che ne ha bisogno. Se il tuo tema supporta risorse specifiche per sezione, usale per slider, lookbook, sezioni video e gallerie di prodotti complesse.

{%- comment -%}Load section CSS only where the section appears{%- endcomment -%}
{{ 'featured-collection.css' | asset_url | stylesheet_tag }}

Per una pulizia più profonda, segui il nostro Guida all'ottimizzazione CSS di Shopify e Pulizia CSS e JavaScript non utilizzata.

Passaggio 5: spostare gli incorporamenti dell'app fuori dalla prima finestra

Recensioni, pacchetti, abbonamenti, chat, popup e strumenti di analisi spesso creano catene di dipendenza aggiuntive. Caricano un piccolo script di avvio, quindi un altro script, quindi CSS, quindi una chiamata API, quindi un widget. Quella catena può andare bene sotto la piega ma dolorosa nella testa.

In Shopify Admin, open Online Store -> Themes -> Customize -> Incorporamento dell'app. Disabilita tutto ciò che non necessita di ogni pagina. Quindi controlla i modelli di prodotto, raccolta e carrello per i vecchi snippet di app. Se un'app è necessaria solo sulle pagine dei prodotti, non caricarla a livello globale da tema.liquid.

Questo è anche un buon momento per confrontare il tuo stack con il nostro Ricerca sull'impatto della velocità dell'app e app che rallentano i negozi Shopify.

Correzione manuale vs. Correzione Thunder

Testare nuovamente la catena di richieste

Dopo ogni modifica, esegui nuovamente lo stesso URL sul dispositivo mobile. Controlla se la catena più profonda è più breve, se la richiesta LCP inizia prima e se il tempo di blocco totale diminuisce. Se un numero migliora e un altro peggiora, ispeziona la cascata prima di mantenere la modifica.

Per un piano completo, utilizzare il file Guida all'ottimizzazione della velocità di Shopify. Se desideri l'automazione anziché la modifica manuale del codice del tema, confronta Funzionalità di ottimizzazione di Thunder o controlla prezzi attuali.

Riferimenti e validazione

Per la diagnostica sottostante, confronta il tuo rapporto con Guida alla catena di richieste critiche di Chrome e il nuovo linguaggio Lighthouse Network Dependency Tree. Per il precarico, utilizzare Guida al precarico delle immagini reattive di web.dev.

Gli esempi della community di Shopify di solito mostrano lo stesso schema: i commercianti inseguono l'avviso dopo aver aggiunto app, page builder, slider o pesanti hero media. La soluzione vincente non sono più i tag precaricati. Sta rimuovendo le dipendenze non necessarie, rinviando gli script e rendendo ovvia la prima risorsa visibile al browser.