Ottimizzazione dei caratteri Shopify: Correggi i caratteri che bloccano la visualizzazione in 5 passaggi

La soluzione più rapida per i caratteri che bloccano il rendering

Prima di immergerci nell'ottimizzazione manuale dei caratteri, c'è un percorso più semplice. Thunder Page Speed Optimizer gestisce automaticamente l'ottimizzazione del caricamento dei caratteri: non sono necessarie modifiche al codice del tema:

• Rinvia i download di caratteri non critici in modo che non blocchino il rendering
• Si applica in modo ottimale Visualizzazione dei caratteri Comportamento per visibilità immediata del testo
• Gestisce la priorità di caricamento dei caratteri insieme a tutte le altre risorse
• Funziona con qualsiasi tema Shopify: Dawn, Debut, personalizzato o su misura

I commercianti in genere vedono un miglioramento della velocità di oltre 27 punti che include l'ottimizzazione dei caratteri come parte del pacchetto. I piani partono da $ 19,99 al mese con una prova gratuita. Metti alla prova gratuitamente la velocità del tuo negozio per vedere come i caratteri influenzano attualmente i tuoi punteggi.

Perché i caratteri Web bloccano il rendering su Shopify

Quando il tuo negozio Shopify carica un carattere web, il browser segue un processo specifico che crea un collo di bottiglia nel rendering:

1. Il browser analizza l'HTML e incontra un CSS Regola @font-face
2. Il browser rileva che necessita di un file di caratteri che non è memorizzato nella cache locale
3. Il browser avvia il download del file del carattere (50-150 KB per peso)
4. Il browser nasconde tutto il testo che utilizza quel carattere fino al completamento del download
5. Una volta scaricato, il browser esegue il rendering del testo, provocando un "flash" visibile

Il problema è il passaggio 4. Su una connessione mobile 3G, il download di un carattere da 120 KB può richiedere da 1 a 3 secondi. Durante tutto questo tempo, il titolo, i titoli dei prodotti e il corpo del testo lo sono invisibile. Gli utenti vedono una pagina vuota con immagini ma senza testo leggibile.

Questo testo invisibile si chiama FOIT — Flash of Invisible Text. Ti fa male direttamente Punteggio Pittura con contenuti più grande (LCP) Punteggio perché l'elemento di testo più grande non può essere misurato finché il carattere non viene caricato. Può anche causare Spostamento cumulativo del layout (CLS) quando il carattere di fallback passa al carattere Web e il testo si adatta.

Quanto sono pesanti i caratteri del tema Shopify?

La maggior parte dei temi Shopify carica più dati sui caratteri di quanto i commercianti si rendano conto:

L'ultima riga? Lo vediamo regolarmente. Memorizza il caricamento di Google Fonts con più famiglie, oltre a un carattere di marca personalizzato e un carattere di icona. Ogni file è una richiesta HTTP separata che blocca il rendering.

Correzione n. 1: utilizzare la visualizzazione dei caratteri per interrompere il testo invisibile

L'ottimizzazione dei caratteri di maggior impatto è l'aggiunta Dichiarazioni visualizzazione carattere: scambia al tuo @font-face . Questo dice al browser: "Mostra immediatamente il testo con un carattere di sistema, quindi sostituisci il carattere web quando è pronto".

/* Before — browser hides text until font loads */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* After — text visible immediately, swaps when ready */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* ← This one line fixes FOIT */
}

Spiegazione dei valori font-display

Dove aggiungere la visualizzazione dei caratteri in Shopify

Nella maggior parte dei temi Shopify, i caratteri sono dichiarati nel file CSS del tema o nel Disposizione tema.liquid . Ecco come trovarli e risolverli:

1. Vai a Negozio online → Temi → Modifica codice
2. Cerca @font-face su tutti i file (controlla base.css, tema.csse tema.liquid)
3. Aggiungi visualizzazione carattere: scambia; a ciascuno @font-face
4. Se utilizzi Google Fonts tramite un URL, aggiungi &display=scambia al parametro URL

<!-- Google Fonts: add &display=swap -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Correzione n. 2: precaricare il carattere più critico

Anche con visualizzazione carattere: scambia, c'è ancora un ritardo prima che il carattere web sostituisca il fallback. Il precaricamento dei caratteri indica al browser di avviare il download del file dei caratteri immediatamente — prima ancora di analizzare il CSS.

<!-- Add to theme.liquid <head> section -->
<link rel="preload" 
      href="{{ 'mybrandfont-regular.woff2' | asset_url }}" 
      as="font" 
      type="font/woff2" 
      crossorigin="anonymous">

Precaricare il carattere principale del corpo in genere riduce il ritardo di scambio dei caratteri di 200-500 ms perché il browser avvia il download durante l'analisi HTML invece di attendere finché non incontra la regola CSS. Per ulteriori informazioni su come funzionano il precarico, la preconnessione e il precaricamento su Shopify, consulta il nostro guida ai suggerimenti sulle risorse.

Correzione n. 3: sottoinsieme di caratteri per rimuovere caratteri inutilizzati

Un carattere web standard include glifi per latino, latino esteso, cirillico, greco, vietnamita e vari simboli: oltre 600 caratteri. Se il tuo negozio Shopify è in inglese, ti servono meno di 100 di questi caratteri.

Il sottoinsieme dei caratteri rimuove i glifi inutilizzati, riducendo drasticamente le dimensioni del file:

Come creare sottoinsiemi di caratteri

Se utilizzi Google Fonts, il sottoinsieme avviene automaticamente quando utilizzi l'URL di incorporamento standard: Google fornisce solo i sottoinsiemi di caratteri necessari al browser. Per i caratteri self-hosted, utilizzare questi approcci:

Opzione 1: Google Webfonts Helper (il più semplice)

1. Visita Assistente Google Webfonts
2. Cerca il tuo carattere
3. Seleziona solo i set di caratteri che ti servono (solitamente "latino")
4. Seleziona solo i pesi che utilizzi
5. Scarica i file WOFF2 ottimizzati
6. Carica sul tuo tema Shopify asset

Opzione 2: pyftsubset (per caratteri personalizzati)

# Install fonttools
pip install fonttools brotli

# Subset to Latin characters only
pyftsubset MyFont.ttf \
  --output-file=MyFont-subset.woff2 \
  --flavor=woff2 \
  --layout-features='kern,liga' \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD"

Opzione 3: intervallo Unicode nei CSS (sottoimpostazione a livello di browser)

Anche senza sottoinsiemi a livello di file, puoi indicare al browser quali caratteri copre un file di font. Il browser quindi scarica il file solo se sulla pagina compaiono questi caratteri:

@font-face {
  font-family: 'MyBrandFont';
  src: url('mybrandfont-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

Correzione n. 4: conversione nel formato WOFF2

WOFF2 è il formato di carattere web più compresso, offrendo file più piccoli del 30-50% rispetto a WOFF e più piccoli del 70% rispetto a TTF/OTF. Ogni browser moderno supporta WOFF2 (98%+ supporto globale).

Controlla il tema Shopify per i file di caratteri nei formati precedenti:

• .ttf / .otf — Non compresso, 2-3 volte più grande di WOFF2. Converti immediatamente.
• .woff — Algoritmo compresso ma più vecchio. WOFF2 è più piccolo del 20-30%.
• .eot : formato solo IE. Rimuovi completamente: IE è morto.
• .woff2 — Già ottimale. Mantienilo così com'è.

Molti temi Shopify includono ancora formati di caratteri di riserva per compatibilità. Nel 2026, puoi utilizzare in sicurezza solo WOFF2 ed eliminare i download di file aggiuntivi:

/* Old approach (unnecessary in 2026) */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
       url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

/* Modern approach — WOFF2 only */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Correzione n. 5: ridurre il peso e le famiglie dei caratteri

Ogni peso del carattere è un download di file separato. L'ottimizzazione più rapida è spesso la più semplice: usa meno caratteri.

Controlla l'utilizzo attuale dei caratteri

Apri il tuo negozio in Chrome DevTools (F12) → scheda Rete → filtra per "Carattere". Vedrai tutti i file di caratteri caricati. Risultati comuni:

• Caricamento pesi non utilizzati — Il tema carica 300, 400, 500, 600, 700, 800 pesi ma ne utilizza solo 400 e 700. Rimuovi il resto.
• Varianti corsive che nessuno usa - A meno che il tuo progetto non utilizzi specificamente testo in corsivo, non caricare file di caratteri corsivi.
• Famiglie di caratteri duplicate — Alcuni temi caricano sia il carattere ospitato da Shopify sia una versione Google Fonts dello stesso carattere.
• Caratteri delle icone — If you only use 10 icons from Font Awesome (180KB), switch to inline SVGs instead.

Il minimo pratico

Per la maggior parte dei negozi Shopify, hai bisogno di:

• Corpo del testo: 1 carattere, 2 pesi (normale 400 + grassetto 700)
• Intestazioni: Stesso carattere o 1 carattere aggiuntivo, 1 peso (grassetto o semigrassetto)
• Totale: 2-3 file di caratteri = 30-60 KB

Questo è tutto. Tre file di caratteri che coprono l'intero progetto. Confrontalo con gli 8-12 file caricati da molti negozi: puoi ridurre il carico utile dei caratteri del 70% semplicemente eliminando ciò che non usi effettivamente.

Caratteri self-hosting e Google Fonts su Shopify

Google Fonts is convenient, but self-hosting your fonts from Shopify's CDN is faster for two reasons:

1. Nessuna ricerca DNS aggiuntiva — Caricamento da fonts.googleapis.com La cartella requires a DNS lookup + TLS connection to Google's servers. Self-hosting from your theme's asset utilizza il CDN di Shopify, a cui il tuo browser è già connesso.
2. Nessun CSS che blocca il rendering — I caratteri Google Il tag Tag carica un file CSS che blocca il rendering. Ospitato autonomamente Le dichiarazioni @font-face possono essere integrate direttamente nel CSS del tema, eliminando la richiesta aggiuntiva.

Come ospitare autonomamente i caratteri Google su Shopify

1. Utilizzare Assistente Google Webfonts per scaricare i file WOFF2
2. Carica i file dei caratteri sul tuo tema asset
3. Rimuovi i caratteri Google Tag da Dichiarazioni tema.liquid
4. Aggiungi @font-face utilizzando il filtro URL delle risorse di Shopify

Questo elimina 2-3 richieste di rete (DNS + CSS + reindirizzamento dei caratteri) e rimuove una risorsa che blocca il rendering. In combinazione con il precaricamento, i caratteri ospitati autonomamente possono caricarsi 300-500 ms più velocemente di Google Fonts. Per ulteriori ottimizzazioni a livello CSS, consulta il nostro Guida all'ottimizzazione CSS di Shopify.

Caratteri variabili: un file per tutti i pesi

I caratteri variabili sono un formato più recente che racchiude tutti i pesi (e talvolta le larghezze e gli stili) in un unico file. Invece di caricare file separati per normale, semi-grassetto e grassetto, un file di caratteri variabili gestisce tutto.

I caratteri variabili sono particolarmente utili quando si utilizzano più di 3 pesi della stessa famiglia. La singola richiesta HTTP è spesso più veloce del download di più file di piccole dimensioni, in particolare su connessioni mobili con latenza elevata.

@font-face {
  font-family: 'Inter';
  src: url('inter-variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Supports all weights */
  font-style: normal;
  font-display: swap;
}

I Google Fonts più popolari ora offrono versioni di caratteri variabili. Controllo fonts.google.com e filtra per il supporto dei caratteri variabili.

Riduci CLS con la corrispondenza dei caratteri di fallback

Durante l'utilizzo visualizzazione carattere: scambia, il browser mostra prima il testo in un carattere di fallback del sistema, quindi passa al carattere web. Se i due caratteri hanno dimensioni diverse, lo scambio fa sì che il testo rifluisca, modificando il layout e danneggiando il tuo Punteggio CLS.

La soluzione: usa i CSS regolazione della dimensione, esclusione salitae esclusione discesa Le proprietà per far sì che il tuo carattere di fallback corrisponda il più possibile alle dimensioni del carattere web:

/* Create a size-adjusted fallback that matches Inter */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Use both in your font stack */
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

Strumenti come Generatore di caratteri di riserva calculate the exact override values for any web font + fallback combination. This technique can reduce font-swap CLS from 0.05-0.15 down to near zero.

Sostituisci i caratteri delle icone con SVG

Font Awesome, Material Icons e caratteri di icone simili sono uno dei peggiori trasgressori dell'ingrossamento dei caratteri. Un tipico carattere di icona contiene oltre 700 icone da 150-300 KB, ma la maggior parte dei negozi ne utilizza solo 10-20.

Sostituisci i caratteri delle icone con gli SVG incorporati:

• Risparmio di dimensioni: 10 icone SVG in linea = file di caratteri icona da ~5KB contro 180KB
• Nessun blocco del rendering: Gli SVG vengono visualizzati immediatamente con l'HTML: non è necessario scaricare caratteri
• Nessun FOIT: Le icone sono visibili al primo disegno, non dopo il caricamento di un carattere
• Migliore accessibilità: Gli SVG possono avere un file corretto etichetta-aria

La maggior parte dei temi Shopify moderni (Dawn, Sense, Craft) utilizzano già SVG incorporati invece dei caratteri delle icone. Se il tuo tema carica ancora una libreria di caratteri icona, il passaggio agli SVG è una delle ottimizzazioni di maggiore impatto che puoi apportare. Controlla se il tuo tema viene caricato Risorse che bloccano il rendering come i file CSS dei caratteri delle icone.

Elenco di controllo per l'ottimizzazione dei caratteri Shopify

Esegui questo elenco di controllo per ottimizzare completamente i caratteri sul tuo negozio Shopify:

Dopo aver implementato queste modifiche, esegui un altro test di velocità per misurare il miglioramento. Risultati tipici: LCP più veloce di 200-800 ms e una riduzione misurabile del CLS. Per un approccio completo al Ottimizzazione della velocità di Shopify, i caratteri sono un pezzo del puzzle accanto immagini, script di terze partie CSS che blocca il rendering.

Domande frequenti

I caratteri sono una soluzione veloce che si nasconde in bella vista

L'ottimizzazione dei caratteri Shopify è uno dei miglioramenti delle prestazioni più trascurati. La maggior parte dei negozi carica 4-8 file di caratteri per un totale di 200-400 KB quando necessitano solo di 2-3 file da 30-60 KB. La natura di blocco della visualizzazione dei caratteri implica che ciò influisca direttamente sul tuo punteggio LCP e sull'esperienza di caricamento visibile per i clienti.

L'approccio manuale funziona: aggiungi visualizzazione carattere: scambia, sottoinsieme di WOFF2, self-host e precaricamento. Ma se preferisci saltare le modifiche al codice, Thunder Page Speed Optimizer gestisce l'ottimizzazione dei caratteri come parte dei miglioramenti automatizzati della velocità, insieme al differimento degli script, CSS critici e altro ancora.

Inizia misurando la tua posizione. Esegui il tuo test di velocità Shopify gratuito e controlla in che modo i caratteri influiscono sulle tue prestazioni. Quindi segui l'elenco di controllo sopra oppure installa Thunder e lascia che sia lui a gestire il lavoro pesante. Per un approccio completo, vedere il nostro le migliori app di ottimizzazione della velocità per il 2026.