Come ridurre il carico dei caratteri su Shopify senza interrompere il design del marchio

Correzione rapida con Thunder

If PageSpeed Insights shows font warnings, the fastest route is to install Thunder, test the same product and collection URLs, and watch whether LCP, FCP, and text rendering improve. Thunder is built from speed research across 20,000+ optimized Shopify stores and handles the common resource-loading work that most merchants should not be editing by hand.

Per un quadro più ampio delle prestazioni, abbinalo a guida completa all'ottimizzazione della velocità di Shopify, il Guida all'ottimizzazione dei caratteri Shopifye il Ripartizione delle funzionalità Thunder. I caratteri sono solo una parte dei Core Web Vitals, ma possono tranquillamente trattenere negozi altrimenti puliti.

Perché il caricamento dei caratteri danneggia Shopify Core Web Vitals

Fonts affect speed because text cannot be painted cleanly until the browser knows which typeface, file, and fallback behavior to use. If your theme requests multiple font families from an external domain, the browser has to open connections, download a stylesheet, discover the actual font files, and then fetch each WOFF2 file. On mobile, that chain can compete directly with the hero image that determines La più grande vernice ricca di contenuti.

Il modello comune di Shopify è pesante: un carattere di intestazione in normale e grassetto, un carattere del corpo in normale, medio, semigrassetto e grassetto, oltre a un carattere di icona lasciato da un generatore di pagine o da un'app di recensioni. Ciò può creare da sei a dieci richieste di caratteri prima che l'acquirente abbia letto il titolo di un prodotto. Il negozio può sembrare raffinato dopo che tutto è stato caricato, ma la prima impressione è ritardata.

Anche lo scambio di caratteri può causare spostamenti del layout. Se il carattere di riserva è molto più largo o più alto del carattere finale del marchio, i titoli dei prodotti, le righe dei prezzi, i pulsanti e le etichette di navigazione possono spostarsi. Ecco perché il lavoro sui caratteri appartiene a Correzioni CLS, non solo correzioni LCP.

Manuale passo passo: ridurre il caricamento dei caratteri in modo sicuro

1. Inventaria ogni richiesta di carattere

Apri Chrome DevTools, carica la tua home page e una pagina di prodotto, quindi filtra il pannello Rete per "carattere". Annota ogni famiglia, peso, provenienza e dimensione. Ripetere l'operazione sulla limitazione mobile. Stai cercando duplicati, pesi inutilizzati, caratteri di app e vecchi caratteri di icone.

2. Mantieni solo i pesi utilizzati dal tuo tema

Molti negozi caricano le varianti 300, 400, 500, 600, 700 e corsivo quando il design utilizza solo 400 e 700. Cerca il CSS del tuo tema peso del carattere prima di eliminare qualsiasi cosa. Se nessun elemento visibile utilizza 500 o 600, rimuovi quei file.

3. Caratteri importanti auto-ospitati come WOFF2

Shopify can serve assets from its CDN, which is usually faster than pulling CSS from a third-party font host on every page. Upload the exact WOFF2 files you need to theme assets, then define them in CSS:

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-regular.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-bold.woff2" | asset_url }}') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

In un articolo Astro possiamo mostrare Liquid direttamente, ma in un tema Shopify questo appartiene al tuo foglio di stile o in un piccolo snippet di carattere caricato da tema.liquid.

4. Precarica un font critico, non l'intero sistema tipografico

Preloading is useful when the first visible text needs a specific file. It is harmful when you preload every font weight because those downloads can steal bandwidth from your LCP image. Start with one font:

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

5. Abbina i caratteri di fallback per ridurre lo spostamento del layout

Utilizza uno stack di fallback con proporzioni simili. Se il carattere del tuo marchio è un sans-serif pulito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif di solito si comporta bene. Se il carattere dell'intestazione è ridotto o presenta un contrasto elevato, esegui un test prima e dopo con le pellicole WebPageTest o il pannello Prestazioni.

Correzione manuale vs. Correzione Thunder

Cosa non interrompere durante la riduzione del caricamento dei caratteri

Do not remove fonts used in the cart drawer, navigation, product badges, localization selector, or size guide without checking those states. Do not preload fonts that appear only below the fold. Do not stack multiple font optimization apps on top of a theme-level rewrite. And do not judge success from a single Lighthouse run; use before-and-after medians and real Shopify Web Performance Dashboard trends.

Se il tuo negozio ha anche script pesanti, correggi i caratteri a fianco Ottimizzazione JavaScript di Shopify e Pulizia CSS e JavaScript non utilizzata. Una configurazione pulita dei caratteri aiuta, ma script lenti di terze parti possono comunque ritardare il thread principale e far sembrare la pagina bloccata.

FAQ