Perché il tuo tema PrestaShop sta caricando 15 font di cui non hai bisogno

Il costo nascosto del sovraccarico di font nei temi PrestaShop

Apri i DevTools del tuo browser, passa alla scheda Network, filtra per "Font" e ricarica il tuo negozio PrestaShop. Se vedi più di tre o quattro file font in fase di download, hai un problema che sta silenziosamente facendoti perdere clienti. La maggior parte dei temi PrestaShop include un numero impressionante di risorse font che il negozio medio non utilizza mai, e ciascuna di esse ritarda il momento in cui i visitatori possono effettivamente leggere i tuoi contenuti.

Il sovraccarico di font è uno dei problemi di prestazioni più trascurati in PrestaShop. I proprietari di negozi dedicano ore a ottimizzare le immagini, abilitare il CCC (Combine, Compress, Cache) e regolare le configurazioni del server, eppure ignorano il fatto che il loro tema sta caricando 800KB o più di file font ad ogni singolo caricamento di pagina. Questo articolo spiega esattamente perché questo accade, come verificare il caricamento dei font e cosa fare per risolvere il problema.

Come i temi PrestaShop includono i font

I temi PrestaShop vengono distribuiti come pacchetti autonomi. Quando uno sviluppatore di temi costruisce un tema, vuole che funzioni immediatamente per il maggior numero possibile di negozi. Questo significa che include ogni variante di font e libreria di icone di cui potrebbe ipoteticamente avere bisogno. Il risultato è un tema che include molte più risorse font di quante un singolo negozio potrà mai utilizzare.

Un tipico tema PrestaShop include tre categorie di font. Primo, ci sono i font di visualizzazione utilizzati per intestazioni, corpo del testo ed elementi dell'interfaccia utente. Questi sono solitamente Google Fonts come Roboto, Open Sans, Lato o Montserrat. Secondo, ci sono i font di icone come FontAwesome, Material Icons o set di icone specifici del tema. Terzo, ci sono font decorativi o di fallback che il tema utilizza per componenti specifici come banner, badge o sezioni promozionali.

Il problema si amplifica perché ogni famiglia di font viene tipicamente fornita in più pesi e stili. Un singolo font come Roboto potrebbe includere Regular (400), Medium (500), Bold (700) e le loro varianti corsivo, ciascuna come file WOFF2 separato. Moltiplicato per due o tre famiglie di font più una libreria di icone, si raggiungono rapidamente da 12 a 15 file font individuali che vengono caricati su ogni pagina.

Il problema FontAwesome

FontAwesome merita una sezione dedicata perché è il singolo maggior responsabile dei problemi di prestazioni legati ai font nei temi PrestaShop. La libreria completa di FontAwesome 5 pesa circa 150KB per il solo file webfont, più altri 60-80KB per il suo CSS. FontAwesome 6 è ancora più grande. La libreria contiene oltre 1.600 icone, ma il negozio PrestaShop medio ne utilizza forse 20 o 30.

Questo significa che stai costringendo ogni visitatore a scaricare oltre 200KB di dati font e CSS solo per poter visualizzare un'icona del carrello, una lente di ricerca e qualche logo dei social media. Questo è un compromesso assurdo, e accade perché gli sviluppatori di temi trovano più facile includere l'intera libreria piuttosto che creare un sottoinsieme per le esigenze specifiche di ogni negozio.

Il tema Classic in PrestaShop 1.7 e 8.x include FontAwesome 4.7, che è leggermente più piccolo ma contiene comunque centinaia di icone che non utilizzerai mai. Il tema Hummingbird in PrestaShop 8.x ha abbandonato FontAwesome a favore delle icone SVG, il che rappresenta un miglioramento significativo, ma molti temi e moduli di terze parti si basano ancora su FontAwesome e caricano la propria copia in aggiunta a quanto già fornito dal tema.

Google Fonts e la tassa sulle prestazioni

Google Fonts è il servizio di web font più popolare, e i temi PrestaShop ne fanno ampio uso. Tuttavia, caricare Google Fonts nel modo predefinito crea una catena di richieste che penalizzano le prestazioni.

Quando il tuo tema carica Google Fonts tramite il tag link standard, il browser deve prima connettersi a fonts.googleapis.com per scaricare il file CSS. Quel file CSS dice poi al browser di scaricare i file font effettivi da fonts.gstatic.com. Ciascuna di queste connessioni richiede risoluzione DNS, handshake TCP e negoziazione TLS. Su connessioni mobili, questa catena può aggiungere 300-500ms di ritardo prima che un singolo carattere di testo venga renderizzato sullo schermo.

Peggio ancora, il CSS di Google Fonts utilizza il descrittore font-display impostato su "swap" per impostazione predefinita dal 2019, ma molti temi più vecchi fanno ancora riferimento a URL CSS di Google Fonts che precedono questa modifica. Senza font-display: swap, il browser può nascondere tutto il testo sulla pagina fino al download del font, creando il temuto Flash of Invisible Text (FOIT) in cui i visitatori vedono una pagina bianca per uno o tre secondi.

C'è anche una preoccupazione sulla privacy. Caricare font dal CDN di Google significa che Google riceve informazioni su ogni visitatore del tuo negozio, incluso il suo indirizzo IP e le pagine che visita. Secondo il GDPR, questo richiede il consenso esplicito, e un tribunale tedesco ha stabilito a gennaio 2022 che l'utilizzo di Google Fonts senza consenso viola il GDPR, con conseguenti sanzioni.

Come verificare il caricamento dei font

Prima di poter risolvere il problema, devi capire esattamente quali font il tuo tema sta caricando e quali ti servono effettivamente. Ecco un approccio sistematico.

Apri Chrome DevTools (F12), vai alla scheda Network e seleziona la casella "Disabilita cache". Ricarica la pagina e filtra per "Font" nella barra del filtro. Vedrai ogni file font che il browser scarica. Annota i nomi dei file, le dimensioni e la colonna Initiator che ti dice quale file CSS ha richiesto ogni font.

Successivamente, utilizza la scheda Coverage nei DevTools (Ctrl+Shift+P, poi digita "Coverage"). Avvia una registrazione della copertura e naviga nel tuo negozio. La scheda Coverage ti mostra esattamente quanto di ogni file CSS viene effettivamente utilizzato. Per il CSS di FontAwesome, vedrai tipicamente il 90% o più contrassegnato come inutilizzato.

Puoi anche utilizzare l'audit Lighthouse nei DevTools. Esegui un audit delle prestazioni e cerca le opportunità "Riduci CSS non utilizzato" e "Assicurati che il testo rimanga visibile durante il caricamento dei webfont". Lighthouse segnalerà specificamente i problemi di prestazioni legati ai font.

Per un'analisi più approfondita, utilizza WebPageTest (webpagetest.org) per eseguire un test da una connessione mobile. Guarda il grafico a cascata e trova le richieste dei font. Nota quando iniziano a caricarsi rispetto alle altre risorse e quanto tempo impiegano. Su una connessione 3G, i ritardi nel caricamento dei font diventano dolorosamente evidenti.

Rimozione dei font inutilizzati passo dopo passo

Una volta che sai quali font il tuo tema carica e quali effettivamente ti servono, è il momento di rimuovere l'eccesso. L'approccio varia a seconda dell'architettura del tuo tema.

Per i temi che caricano Google Fonts tramite un tag link nel template dell'header, trova il file template che contiene il riferimento a Google Fonts. Nella maggior parte dei temi, questo si trova in templates/layout/head.tpl o in un file simile. Se stai utilizzando un tema figlio, copia questo template nella directory del tuo tema figlio prima di modificarlo. Rimuovi o modifica il link di Google Fonts per includere solo i pesi e le famiglie che utilizzi effettivamente.

Per FontAwesome, controlla se il tuo tema lo carica tramite un file CSS nella directory assets/css oppure tramite un link CDN. Se è un file locale, hai due opzioni. Puoi sostituire il pacchetto completo di FontAwesome con un sottoinsieme che contiene solo le icone che utilizzi, oppure puoi sostituire completamente l'utilizzo del font di icone con SVG inline.

Per creare un sottoinsieme di FontAwesome, utilizza uno strumento come IcoMoon (icomoon.io) o Fontello (fontello.com). Questi strumenti ti permettono di selezionare solo le icone specifiche di cui hai bisogno e generano un file font personalizzato che potrebbe pesare 5-10KB invece di 150KB. Dovrai aggiornare i nomi delle classi CSS se lo strumento ne genera di diversi, ma la maggior parte permette di mantenere i nomi delle classi originali di FontAwesome.

Per Google Fonts, controlla ogni file CSS nel tuo tema per le dichiarazioni @font-face. Gli sviluppatori di temi a volte importano i font direttamente nel CSS anziché attraverso il template dell'head. Utilizza la ricerca dei DevTools (Ctrl+Shift+F) per cercare tra tutte le risorse caricate "@font-face" e "fonts.googleapis.com".

Implementazione di font-display: swap

Se mantieni dei web font, assicurati assolutamente che utilizzino il descrittore font-display: swap. Questo dice al browser di mostrare immediatamente il testo utilizzando un font di sistema di fallback mentre il web font viene scaricato in background. Una volta che il web font è pronto, il browser lo sostituisce. Questo elimina il FOIT e garantisce che i tuoi contenuti siano leggibili istantaneamente.

Per Google Fonts caricati tramite CDN, aggiungi il parametro display=swap all'URL. Ad esempio, cambia fonts.googleapis.com/css2?family=Roboto:wght@400;700 in fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap. Nota che Google ha aggiunto questo parametro per impostazione predefinita nel 2019, ma molti temi PrestaShop utilizzano ancora formati URL più vecchi.

Per i font self-hosted con dichiarazioni @font-face nel tuo CSS, aggiungi font-display: swap a ogni blocco @font-face. Apri il file CSS del tuo tema che contiene le regole @font-face e aggiungi la proprietà. Va all'interno del blocco @font-face insieme a font-family, src e font-weight.

Tieni presente che font-display: swap può causare un Flash of Unstyled Text (FOUT) in cui il testo appare brevemente nel font di fallback prima di passare al web font. Questa è un'esperienza molto migliore rispetto al testo invisibile, ma puoi minimizzare l'effetto visivo scegliendo font di fallback che corrispondano strettamente alle metriche del tuo web font. Le proprietà CSS size-adjust, ascent-override e descent-override aiutano in questo.

Self-hosting dei font vs caricamento da CDN

Ospitare i font sul proprio server anziché caricarli dal CDN di Google offre diversi vantaggi significativi per i negozi PrestaShop.

Le prestazioni migliorano perché elimini la risoluzione DNS aggiuntiva e la connessione ai server di Google. I tuoi font vengono caricati dallo stesso dominio delle altre risorse, il che significa che il browser può riutilizzare le connessioni esistenti. Con HTTP/2 o HTTP/3, tutti i file font possono essere scaricati simultaneamente tramite un'unica connessione.

La conformità alla privacy diventa più semplice perché i dati dei visitatori non vengono più inviati a Google. Questo elimina completamente una preoccupazione relativa al GDPR, e non è necessario aggiungere Google Fonts al banner del consenso ai cookie.

L'affidabilità migliora perché non dipendi da un servizio esterno. Se il CDN di Google ha un problema (raro ma succede), i tuoi font continuano a caricarsi.

Per ospitare Google Fonts in proprio, utilizza lo strumento google-webfonts-helper (gwfh.mranftl.com/fonts) che fornisce un'interfaccia semplice per scaricare qualsiasi Google Font in formato WOFF2 con il CSS @font-face corretto. Scarica solo i pesi e gli stili di cui hai bisogno, posiziona i file nella directory assets/fonts del tuo tema e aggiungi il CSS @font-face al foglio di stile del tema.

L'unico potenziale svantaggio del self-hosting è la perdita della possibilità di un cache hit se il visitatore ha già caricato lo stesso font dal CDN di Google su un altro sito. Tuttavia, i browser hanno in gran parte eliminato questo caching tra siti per motivi di privacy dal 2020, quindi questo vantaggio non esiste più nella pratica.

Font subsetting: l'opzione radicale

Il font subsetting significa rimuovere i caratteri di cui non hai bisogno da un file font. Un tipico web font latino include caratteri per dozzine di lingue, molte delle quali il tuo negozio non utilizza. Creando un sottoinsieme con solo i caratteri necessari al tuo negozio, puoi ridurre le dimensioni dei file font del 50-70%.

Lo strumento pyftsubset della libreria Python fonttools è il modo più affidabile per creare sottoinsiemi di font. Puoi specificare esattamente quali intervalli Unicode includere. Per un negozio che opera solo in italiano, potresti creare un sottoinsieme con Latin di base (U+0020-007F) più Latin-1 Supplement (U+00A0-00FF) per i simboli di valuta e i caratteri accentati.

Per i negozi che operano in più lingue, devi essere più attento. Includi gli intervalli Unicode per tutte le lingue supportate dal tuo negozio. Il CSS di Google Fonts in realtà fa questo automaticamente con i descrittori unicode-range, caricando sottoinsiemi di caratteri su richiesta, ma i font self-hosted necessitano di subsetting manuale.

Un approccio più semplice è utilizzare esclusivamente il formato WOFF2 e abbandonare il supporto per i formati più vecchi. WOFF2 utilizza la compressione Brotli e produce file del 30% più piccoli rispetto a WOFF. Ogni browser moderno supporta WOFF2, quindi a meno che tu non debba supportare Internet Explorer 11, non c'è motivo di includere formati WOFF, TTF o EOT. Molti temi PrestaShop includono ancora tutti e quattro i formati per una retrocompatibilità che non è più necessaria.

Stack di font di sistema: l'alternativa a costo zero

La soluzione più radicale ai problemi di prestazioni dei font è non utilizzare affatto web font. I sistemi operativi moderni includono font di alta qualità che hanno un aspetto eccellente sullo schermo. Uno stack di font di sistema utilizza qualunque font fornito dal sistema operativo, il che significa zero file font da scaricare e rendering istantaneo del testo.

Lo stack moderno di font di sistema appare così: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Questo ti fornisce San Francisco sui dispositivi Apple, Segoe UI su Windows e Roboto su Android. Tutti questi sono font sans-serif puliti, moderni e altamente leggibili.

GitHub, Bootstrap 5 e molti siti web ad alte prestazioni utilizzano stack di font di sistema. La differenza visiva tra un font di sistema e un Google Font come Open Sans o Roboto è minima, specialmente per il corpo del testo. La maggior parte dei tuoi clienti non noterà né si preoccuperà se il tuo negozio utilizza Roboto caricato da un server o Roboto già installato sul loro telefono Android.

Per implementare uno stack di font di sistema in PrestaShop, devi modificare il CSS del tuo tema per sostituire le dichiarazioni font-family esistenti, rimuovere le regole @font-face e i tag link di Google Fonts, e cancellare i file font dalla directory assets del tema. Se stai utilizzando un tema figlio, puoi sovrascrivere le dichiarazioni font del tema genitore senza modificare i file del tema genitore.

E i font di icone?

Se rimuovi FontAwesome o un altro font di icone, hai bisogno di un'alternativa per visualizzare le icone. L'approccio moderno migliore è l'SVG inline. Le icone SVG vengono renderizzate in modo nitido a qualsiasi dimensione, possono essere stilizzate con CSS e aggiungono peso solo per le icone specifiche che utilizzi, invece di caricare un'intera libreria di icone.

Il tema Hummingbird di PrestaShop utilizza nativamente le icone SVG, ed è una delle ragioni per cui offre prestazioni migliori rispetto a Classic. Se il tuo tema utilizza FontAwesome, puoi sostituire le singole icone con SVG provenienti da fonti come Heroicons, Feather Icons, o anche dai file SVG di FontAwesome stesso (che sono disponibili separatamente dalla versione font).

Per un negozio PrestaShop, hai tipicamente bisogno di meno di 30 icone uniche: carrello, ricerca, account utente, cuore/lista dei desideri, frecce, logo dei social media e alcune icone specifiche per le categorie. Come SVG inline, queste potrebbero totalizzare 10-15KB, rispetto ai 150-200KB dell'intero font e CSS di FontAwesome.

Misurare l'impatto

Dopo aver rimosso i font inutilizzati, misura il miglioramento. Esegui Lighthouse prima e dopo, confrontando il punteggio Performance, il First Contentful Paint (FCP) e il Largest Contentful Paint (LCP). L'ottimizzazione dei font migliora tipicamente l'FCP di 200-500ms sulle connessioni mobili.

Controlla la dimensione totale del trasferimento nella scheda Network dei DevTools. Un negozio PrestaShop ben ottimizzato dovrebbe trasferire meno di 50KB di dati font in totale. Se passi ai font di sistema, quel numero scende a zero.

Verifica anche che il tuo negozio abbia ancora l'aspetto corretto. Controlla ogni tipo di pagina: homepage, categoria, prodotto, carrello e checkout. Alcuni temi utilizzano font specifici per elementi specifici, e la rimozione di un font potrebbe causare un rendering di fallback inaspettato. Testa sempre accuratamente prima di distribuire le modifiche ai font in produzione.

Riepilogo: checklist per il caricamento dei font

Verifica il caricamento attuale dei font con la scheda Network dei DevTools filtrata per i font. Identifica quali font vengono effettivamente utilizzati controllando la copertura CSS. Rimuovi qualsiasi famiglia o peso di Google Fonts che non utilizzi. Sostituisci i font di icone completi con versioni sottoinsieme o SVG inline. Aggiungi font-display: swap a tutte le dichiarazioni @font-face rimanenti. Ospita i font in proprio invece di caricarli dal CDN di Google. Considera l'utilizzo esclusivo di WOFF2 per eliminare i formati più vecchi e pesanti. Valuta se i font di sistema potrebbero sostituire completamente i tuoi web font. Misura prima e dopo con Lighthouse e WebPageTest. L'obiettivo è semplice: carica solo ciò di cui hai bisogno, caricalo in modo efficiente e non far mai aspettare i tuoi visitatori per font che non possono vedere.