Correzione rapida con Thunder
Thunder improves common Shopify resource loading patterns automatically, including Core Web Vitals pressure from images, scripts, fonts, and render-blocking assets. Use it for the baseline, then reserve manual preload tags for the few assets that are truly critical on a specific template.
Cosa significa PageSpeed per richieste chiave di precaricamento
A preload tells the browser: this resource matters soon, start fetching it early. PageSpeed surfaces preload opportunities when the browser discovers an important request late in the waterfall. On Shopify, the usual candidates are a self-hosted font, a hero image referenced from Liquid or CSS, or a CSS file required to paint the first view.
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
| Risorsa | Precarico? | Motivo |
|---|---|---|
| Immagine eroe della home page | Spesso sì | Immagine LCP probabile e necessaria nella prima finestra. |
| Immagine principale del prodotto | A volte | Utile quando è l'elemento LCP e scoperto tardi. |
| Carattere principale Above-the-fold | A volte | Utile per i caratteri self-hosted che influiscono sul testo visibile. |
| Immagini della raccolta Below the fold | No | Di solito dovrebbero essere caricati in modo lento, non precaricati. |
| Esamina lo script del widget | No | Di solito non è necessario prima del primo rendering. |
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
App assets often look important because they appear in the waterfall, but reviews, chat, recommendations, popups, personalization, and heatmaps are rarely needed before the first paint. Preloading them can make the score worse by stealing bandwidth and CPU from LCP. Use the 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
| Problema di precarico | Correzione manuale | Correzione del tuono |
|---|---|---|
| Immagine dell'eroe scoperta tardi | Aggiungi precarico condizionale, caricamento impaziente e priorità di recupero alta. | Migliora automaticamente i modelli LCP comuni e di priorità delle immagini. |
| Carattere scoperto tardi | Precarica il file WOFF2 esatto e utilizza lo scambio di visualizzazione dei caratteri. | Aiuta a ridurre la pressione di caricamento dei caratteri come parte della linea di base della vetrina. |
| Troppi precarichi | Rimuovi i precaricamenti generali e mantieni solo le risorse della prima visualizzazione. | Evita di considerare ogni risorsa come critica. |
| La cascata delle risorse dell'app è rumorosa | Ritarda gli script delle app non critici invece di precaricarli. | Ottimizza i tempi delle risorse dell'app per i problemi comuni di prestazioni di Shopify. |
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
Cosa significano le richieste chiave di precaricamento su Shopify?
Significa che una risorsa critica viene scoperta più tardi di quanto dovrebbe essere. Su Shopify, tale risorsa è spesso un font, un'immagine hero, un file CSS critico o una dipendenza da script che influisce sul primo rendering.
Devo precaricare ogni risorsa importante di Shopify?
No. Precarica solo le risorse necessarie per la visualizzazione iniziale. Troppi tag di precaricamento possono escludere l'immagine LCP, i CSS e i caratteri effettivi, peggiorando le prestazioni.
Quali risorse Shopify sono buoni candidati al precarico?
I buoni candidati includono la probabile immagine dell'eroe LCP, un file di caratteri outside-the-fold self-hosted e occasionalmente un file CSS critico. Immagini Below the Fold, widget di app, script di revisione e JavaScript di temi generali sono generalmente scarsi candidati.
Thunder può aiutarti con le richieste di chiavi di precaricamento?
Thunder può migliorare automaticamente la priorità delle risorse del negozio e i modelli di caricamento comuni dei Core Web Vitals. I precaricamenti manuali possono comunque essere utili per immagini hero o configurazioni di caratteri altamente personalizzate.
Come faccio a sapere se un precarico ha funzionato?
Testare nuovamente lo stesso URL e verificare se la risorsa critica viene rilevata prima, LCP migliora o rimane stabile e non viene visualizzato alcun avviso relativo al mancato utilizzo delle risorse precaricate subito dopo il caricamento.
Fissare la priorità delle risorse in modo pratico
Precarica le richieste chiave su Shopify solo quando la risorsa è fondamentale per la prima visualizzazione. Thunder gestisce la linea di base automatizzata comune e i precaricamenti manuali possono ottimizzare i casi di eroi e caratteri personalizzati.
Installa Thunder