Richieste chiave di precarico Shopify: correzione di caratteri e risorse Hero

Cosa significa PageSpeed per richieste chiave di precaricamento

Un precaricamento dice al browser: questa risorsa è importante a breve, iniziate a recuperarla presto. PageSpeed evidenzia le opportunità di precaricamento quando il browser scopre una richiesta importante in ritardo nella cascata. Su Shopify, i candidati abituali sono un font auto-ospitato, un'immagine hero referenziata da Liquid o CSS, o un file CSS richiesto per dipingere la prima visualizzazione.

Questo avviso si sovrappone a Core Web Vitals perché la scoperta tardiva può ritardare il Largest Contentful Paint. Le linee guida LCP di Google affermano che un buon LCP è di 2,5 secondi o più veloce per almeno il 75% delle visite e uno dei principali sottoparagrafi LCP è il ritardo nel caricamento delle risorse. Il precaricamento può ridurre tale ritardo se la risorsa è veramente critica.

Può anche ritorcersi contro. Se precarichi cinque caratteri, tre immagini, CSS dell'app, recensioni e uno script di scorrimento, non hai stabilito la priorità. Hai fatto una coda più rumorosa. Per un contesto più ampio, leggere il Guida ai suggerimenti sulle risorse di Shopify e il guida alle catene di richieste critiche.

Candidati precaricati Shopify buoni e cattivi

Manuale passo passo: correggi le richieste chiave di precaricamento su Shopify

1. Conferma che la risorsa viene utilizzata sopra la piega

Apri PageSpeed Insights, identifica la risorsa suggerita e chiedi se gli acquirenti ne hanno bisogno nella prima finestra. Se la risposta è no, non precaricarlo. Considera invece il caricamento lento o ritardarlo. Se la risorsa è l'immagine hero o il carattere principale, continua.

2. Precarica la probabile immagine dell'eroe

Per un'immagine hero controllata da Liquid, posiziona il precarico nell'intestazione del documento o nella logica della sezione solo quando quella sezione appare sopra la piega. Renderizza anche l'immagine reale con caricamento rapido e priorità alta.

<!-- In theme.liquid or a hero section rendered first -->
<link
  rel="preload"
  as="image"
  href="{{ section.settings.hero_image | image_url: width: 1600 }}"
  imagesrcset="
    {{ section.settings.hero_image | image_url: width: 750 }} 750w,
    {{ section.settings.hero_image | image_url: width: 1100 }} 1100w,
    {{ section.settings.hero_image | image_url: width: 1600 }} 1600w"
  imagesizes="100vw"
  fetchpriority="high"
>

Se questo è il tuo problema LCP, il Guida al precarico dell'immagine hero e Guida all'individuazione delle richieste LCP approfondisci.

3. Precarica solo i caratteri critici ospitati autonomamente

I precaricamenti dei caratteri sono utili solo quando il file del carattere viene utilizzato immediatamente e l'URL corrisponde al carattere richiesto dai CSS. Utilizzare origine incrociata per i file di caratteri. Abbinalo a visualizzazione carattere: scambia quindi il testo non rimane invisibile durante il caricamento del carattere.

<link
  rel="preload"
  href="{{ 'brand-regular.woff2' | asset_url }}"
  as="font"
  type="font/woff2"
  crossorigin
>

@font-face {
  font-family: 'Brand';
  src: url('{{ 'brand-regular.woff2' | asset_url }}') format('woff2');
  font-display: swap;
}

Per maggiori dettagli vedere Ottimizzazione dei caratteri Shopify, riduce il carico dei caratterie scambio di caratteri-visualizzazione.

4. Non precaricare risorse dell'app non critiche

Le risorse delle app spesso sembrano importanti perché appaiono nella cascata, ma recensioni, chat, raccomandazioni, popup, personalizzazione e heatmap sono raramente necessarie prima del primo rendering. Precaricarle può peggiorare il punteggio sottraendo larghezza di banda e CPU all'LCP. Utilizzate la Guida JavaScript di terze parti per ritardare invece il funzionamento delle app non critiche.

5. Fare attenzione agli avvisi di precarico inutilizzato

I browser avvisano quando una risorsa precaricata non viene utilizzata subito dopo il caricamento. Ciò significa che il precaricamento è probabilmente troppo ampio, la logica condizionale è sbagliata, l'URL non corrisponde o la risorsa non è effettivamente critica. Rimuovi i precarichi che non dimostrano valore nei test.

Correzione manuale vs. Correzione Thunder

Come il precarico si connette a LCP, CSS e script

Il precarico non è una strategia di velocità autonoma. Funziona quando accorcia il percorso critico. Se la tua immagine LCP inizia in ritardo perché è nascosta nei CSS, inserita da JavaScript o caricata in modo lento, un precaricamento può aiutare. Se LCP è lento perché il file immagine è enorme, è necessario anche formati di immagine moderni e sorgenti di giuste dimensioni. Se i CSS che bloccano il rendering ritardano la verniciatura, leggi corretto il CSS che blocca il rendering.

Se gli script rappresentano il collo di bottiglia, precaricare uno script è solitamente la mossa sbagliata. Potrebbe essere necessario ridurre i tempi di esecuzione, posticipare gli script non critici o rimuovere il codice dell'app inutilizzato. Il riduce la guida al tempo di esecuzione di JavaScript è il passo successivo migliore.

Come verificare che la correzione abbia funzionato

Prova con PageSpeed Insights e il Test di velocità Shopify gratuito. Nella cascata, la risorsa precaricata dovrebbe iniziare prima. In termini di parametri, LCP dovrebbe migliorare o almeno rimanere stabile. Negli avvisi non dovresti vedere i messaggi "precaricato ma non utilizzato". Prova anche su dispositivi mobili, perché gli errori di precarico sono più visibili quando la larghezza di banda è ridotta.

Per l'approccio completo a livello di negozio, utilizzare il file guida completa all'ottimizzazione della velocità di Shopify e confronta le opzioni di automazione nel migliori app per l'ottimizzazione della velocità di Shopify guida.

FAQ