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 font-display 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 una regola CSS @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 è chiamato FOIT — Flash of Invisible Text. Peggiora il LCP, perché l’elemento di testo più grande può essere misurato solo dopo il caricamento del font. Quando il font web sostituisce quello di riserva, i cambiamenti nelle interruzioni di riga possono anche causare spostamenti del layout (CLS).

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: usare font-display per evitare il testo invisibile

Per evitare il testo invisibile, aggiungi font-display: swap alle dichiarazioni @font-face. Il browser mostra subito il testo con un font di sistema e passa al font web appena è caricato.

/* 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 font-display in Shopify

Nella maggior parte dei temi Shopify, i font sono dichiarati nel file CSS del tema o nel file di layout theme.liquid. Ecco come trovarli e correggerli:

1. Vai a Negozio online → Temi → Modifica codice
2. Cerca @font-face su tutti i file (controlla base.css, theme.csse theme.liquid)
3. Aggiungi font-display: swap; a ogni dichiarazione @font-face.
4. Se utilizzi Google Fonts tramite un URL, aggiungi &display=swap 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 font-display: swap, 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 i file nella cartella assets del tema Shopify.

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 — Se utilizzate solo 10 icone da Font Awesome (180KB), passate invece agli SVG inline.

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 è comodo, ma ospitare direttamente i font sulla CDN di Shopify è più veloce per due motivi:

1. Nessuna ricerca DNS aggiuntiva — Il caricamento da fonts.googleapis.com richiede una ricerca DNS e una connessione TLS ai server di Google. Ospitando i font nella cartella assets del tema, si utilizza il CDN di Shopify, al quale il browser è già connesso.
2. Nessun CSS che blocca il rendering — Il tag di Google Fonts <link> carica un file CSS che blocca il rendering. Con i font ospitati nel tema, puoi inserire le dichiarazioni @font-face direttamente nel CSS ed eliminare la richiesta aggiuntiva.

Come ospitare autonomamente i caratteri Google su Shopify

1. Usa Google Webfonts Helper per scaricare i file WOFF2.
2. Carica i file dei font nella cartella assets del tema.
3. Rimuovi il tag di Google Fonts <link> da theme.liquid.
4. Aggiungi dichiarazioni @font-face usando il filtro Shopify che genera gli URL dei file del tema.

<!-- In theme.liquid or base.css -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('{{ "inter-v12-latin-regular.woff2" | asset_url }}') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter';
    src: url('{{ "inter-v12-latin-700.woff2" | asset_url }}') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
</style>

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

Con font-display: swap, il browser mostra prima il testo con un font di sistema e poi con il font web. Se le loro dimensioni differiscono, la sostituzione modifica le interruzioni di riga e sposta gli elementi della pagina, peggiorando il punteggio CLS.

Usa le proprietà CSS size-adjust, ascent-override e descent-override per avvicinare il più possibile le dimensioni del font di riserva a quelle del font 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 calcolano i valori di override esatti per qualsiasi combinazione di caratteri web + fallback. Questa tecnica può ridurre il CLS di font-swap da 0.05-0.15 a quasi 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 attributi aria-label.

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 queste modifiche, esegui un altro test di velocità per misurare il miglioramento. I risultati tipici sono un LCP più veloce di 200-800 ms e una riduzione misurabile del CLS. In una strategia completa di ottimizzazione della velocità di Shopify, i font sono un elemento da curare insieme alle immagini, agli script di terze parti e al 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 font-display: swap, 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.