Le icone sono ovunque: nel menu, nei pulsanti, nel carrello, nei collegamenti ai social network, nelle schede dei servizi, nel piè di pagina. Sono elementi piccoli, e per questo raramente vengono considerati quando si parla di prestazioni. Eppure il modo in cui vengono inserite può costare centinaia di kilobyte, richieste aggiuntive, testo invisibile e spostamenti del layout. In molti siti WordPress convivono due o tre librerie di icone diverse, portate dal tema, dal costruttore di pagine e dai plugin, ognuna caricata per intero per mostrare poche decine di simboli.
In questo articolo confrontiamo i modi principali di inserire le icone, vediamo i problemi tipici e come risolverli, con un’attenzione particolare ai siti WordPress.
Il problema delle librerie complete
Le librerie di icone più diffuse contengono centinaia o migliaia di simboli. Sono comode: basta aggiungere una classe a un elemento per mostrare l’icona desiderata. Ma per offrire questa comodità, la libreria viene di solito caricata per intero: un foglio di stile con una regola per ogni icona e uno o più file di font, o in alternativa un grande file JavaScript. Un sito che usa dodici icone scarica così i dati di tutte le altre.
Il costo non è solo il peso. Il foglio di stile della libreria è spesso caricato nella parte iniziale della pagina e blocca il rendering come ogni altro foglio di stile, con migliaia di regole che il browser deve analizzare. Il file del font viene scaricato quando il browser scopre che serve, cioè dopo aver analizzato il CSS, e aggiunge una richiesta alla catena del caricamento. Se la libreria è servita da un dominio esterno, si aggiungono una connessione e i relativi tempi, come visto nell’articolo sul caricamento dei font.
I font di icone
Per molti anni il modo più diffuso di inserire icone è stato il font di icone: un file di font in cui ogni carattere è un simbolo invece di una lettera. Ha alcuni vantaggi reali: l’icona si colora e si ridimensiona come il testo, il file viene messo in cache e riutilizzato su tutte le pagine. Ma ha anche svantaggi importanti per le prestazioni e per l’esperienza.
Finché il font non è arrivato, le icone non possono essere mostrate. Con il comportamento predefinito dei font di icone, il browser le nasconde per un breve periodo; se il font tarda, compaiono quadrati vuoti o caratteri casuali, e al loro arrivo le icone possono cambiare larghezza e spostare il testo vicino, per esempio in un pulsante o in una voce di menu. È lo stesso meccanismo descritto nell’articolo sui web font senza CLS, con l’aggravante che per un’icona non esiste un ripiego sensato. Per questo i font di icone usano di solito font-display: block, che nasconde le icone invece di mostrare simboli sbagliati.
Ci sono poi problemi di accessibilità: un lettore di schermo può leggere il carattere usato per l’icona, e se l’utente ha impostato un proprio font o se il font viene bloccato, le icone scompaiono. Sono ragioni per cui i font di icone sono oggi considerati una soluzione superata, anche se restano molto diffusi.
Le alternative in SVG
L’alternativa moderna sono le icone in formato SVG, un formato vettoriale leggibile da tutti i browser. Si possono inserire in diversi modi, ciascuno con i propri compromessi.
SVG in linea. Il codice dell’icona viene inserito direttamente nell’HTML. Non richiede richieste aggiuntive, l’icona è visibile appena l’HTML viene letto, si colora con il CSS tramite currentColor e non può causare spostamenti se ha dimensioni esplicite. Lo svantaggio è che l’icona fa parte dell’HTML di ogni pagina e non viene riutilizzata dalla cache; se la stessa icona complessa si ripete molte volte, per esempio in una lunga lista di prodotti, l’HTML cresce e il DOM si appesantisce. È la scelta migliore per poche icone semplici, come quelle dell’intestazione e dei pulsanti.
<button class="carrello" aria-label="Carrello">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 4h2l2.4 10h10.2L20 7H6.2" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="9" cy="19" r="1.6" fill="currentColor"/>
<circle cx="17" cy="19" r="1.6" fill="currentColor"/>
</svg>
</button>Sprite SVG. Tutte le icone del sito sono raccolte in un unico file SVG, e ogni icona viene richiamata con l’elemento use. Il file viene scaricato una volta e messo in cache, l’HTML resta leggero e le icone si colorano con il CSS. Se lo sprite contiene solo le icone effettivamente usate, generato automaticamente durante lo sviluppo, è una soluzione molto efficiente per i siti con molte icone ripetute. Va ricordato che lo sprite deve essere servito dallo stesso dominio della pagina.
<svg width="24" height="24" aria-hidden="true">
<use href="/wp-content/themes/tema/icone.svg#carrello"></use>
</svg>SVG come immagine. Ogni icona è un file separato, inserito con un elemento img o come sfondo nel CSS. È semplice e sfrutta la cache, ma richiede una richiesta per ogni icona diversa, e non si può cambiare il colore dell’icona con il CSS, se non usando la proprietà mask. È adatto a icone decorative o a illustrazioni più complesse.
Un caso a parte sono le librerie che inseriscono le icone SVG tramite JavaScript: il codice cerca nella pagina gli elementi con le classi delle icone e li sostituisce con il disegno corrispondente. Uniscono gli svantaggi dei due mondi: un grande file JavaScript da eseguire, spesso nella parte iniziale della pagina, e icone che compaiono solo dopo l’esecuzione dello script, con possibili spostamenti. Conviene evitarle.
Ottimizzare i file SVG
Un file SVG esportato da un programma di grafica contiene spesso molto più del necessario: metadati dell’editor, commenti, gruppi vuoti, coordinate con molte cifre decimali, stili ripetuti. Per un’icona, il codice utile può essere un decimo di quello esportato. Strumenti di ottimizzazione come SVGO eliminano il superfluo senza cambiare l’aspetto, e andrebbero applicati sempre, sia alle icone sia ai loghi e alle illustrazioni. Conviene anche disegnare le icone su una griglia coerente, per esempio 24 per 24 unità, con un attributo viewBox corretto e dimensioni esplicite negli attributi width e height: il browser conosce subito lo spazio da riservare, e l’icona non può spostare il layout. Il logo nell’intestazione, spesso un SVG, merita la stessa cura: inserito in linea e ottimizzato, compare con il primo HTML senza richieste aggiuntive.
Icone e accessibilità
Passare agli SVG è anche l’occasione per rendere le icone accessibili, un tema che si intreccia con le prestazioni come visto nell’articolo su accessibilità e prestazioni. Un’icona puramente decorativa, accanto a un testo che ne spiega il significato, va nascosta ai lettori di schermo con aria-hidden="true". Un’icona che da sola rappresenta un’azione, come il carrello o la ricerca senza testo visibile, deve avere un nome accessibile, di solito sul pulsante o sul collegamento che la contiene, come nell’esempio precedente. Con i font di icone queste regole erano spesso ignorate, e i lettori di schermo annunciavano caratteri senza senso.
Se il font di icone resta
Non sempre è possibile sostituire subito un font di icone, per esempio quando è parte integrante del tema o del costruttore di pagine. In questi casi si possono comunque ridurre i danni:
- creare un sottoinsieme: strumenti dedicati e alcuni servizi delle librerie permettono di generare un font con le sole icone usate, riducendo il file del font e il foglio di stile a una frazione;
- ospitarlo sul proprio dominio, evitando la connessione a un dominio esterno, e precaricarlo se le icone sono nella parte visibile della pagina;
- riservare lo spazio: dare agli elementi delle icone una larghezza e un’altezza fisse, così che l’arrivo del font non sposti il testo vicino;
- eliminare i duplicati: se il tema, il costruttore e un plugin caricano ciascuno la propria versione della stessa libreria, o librerie diverse con icone simili, conviene sceglierne una e disattivare le altre.
In WordPress
In WordPress le icone arrivano da molte parti. Alcune fonti tipiche:
- Dashicons, il font di icone dell’amministrazione, viene caricato sul sito pubblico quando è visibile la barra di amministrazione, cioè per gli utenti collegati. Alcuni temi e plugin lo caricano però per tutti i visitatori, per usare poche icone;
- le emoji: WordPress aggiunge per impostazione predefinita uno script e alcuni stili per mostrare le emoji anche nei browser che non le supportano. Oggi i browser moderni le supportano quasi tutti, e lo script si può disattivare con poche righe di codice o con un plugin di ottimizzazione;
- i costruttori di pagine includono spesso una o più librerie di icone per i propri widget; alcuni offrono un’opzione per inserire le icone come SVG in linea al posto del font, che conviene attivare, come visto nell’articolo sul costo dei costruttori di pagine;
- i temi, soprattutto quelli commerciali multiuso, caricano talvolta una libreria completa per le icone del menu, dei social e del piè di pagina. I temi a blocchi e i blocchi del nucleo di WordPress, come quello delle icone social, usano invece SVG in linea.
Il primo passo è fare l’inventario: quante librerie di icone carica il sito, da dove, su quali pagine, e quante icone vengono effettivamente usate. Spesso emergono librerie caricate da plugin non più usati o da widget presenti solo in una pagina.
Come verificare
Nel pannello Rete dei DevTools, filtrando per tipo di risorsa, si vedono i file di font e i fogli di stile caricati: i nomi delle librerie di icone sono di solito riconoscibili. Il pannello Coverage mostra quanta parte del loro CSS viene usata, spesso una percentuale minima, come discusso nell’articolo sul CSS inutilizzato. Per verificare gli spostamenti, si può bloccare il file del font di icone e osservare come cambia la pagina, oppure registrare il caricamento con la rete rallentata nel pannello Performance e controllare la traccia degli spostamenti di layout.
Un esempio concreto
Un sito di un’agenzia di viaggi, costruito con un tema multiuso e un costruttore di pagine, carica tre librerie di icone: una completa dal tema, per le icone del menu e dei social; una dal costruttore, per i riquadri dei servizi; e Dashicons, caricato da un plugin di recensioni per mostrare le stelle. In tutto, tre fogli di stile e cinque file di font, per una ventina di icone effettivamente usate. Nei dati reali, il menu su smartphone mostra un piccolo spostamento quando le icone arrivano. L’intervento sostituisce le icone del menu, dei social e delle stelle con SVG in linea, attiva nel costruttore l’opzione per gli SVG in linea, e disattiva il caricamento delle librerie non più necessarie. Le richieste si riducono di otto unità, il foglio di stile bloccante si alleggerisce e lo spostamento scompare.
In sintesi
Le icone sembrano un dettaglio, ma il modo in cui vengono inserite può costare molto: librerie complete scaricate per usarne pochi simboli, fogli di stile bloccanti, font che nascondono o spostano le icone, script che le disegnano in ritardo. Le icone SVG, in linea per poche icone semplici o raccolte in uno sprite per molte icone ripetute, sono la scelta più efficiente. Dove un font di icone deve restare, un sottoinsieme ospitato sul proprio dominio, con dimensioni riservate, limita i danni. In WordPress, il lavoro comincia dall’inventario delle librerie caricate da tema, costruttore e plugin, e spesso si conclude eliminando quelle che nessuno usa più.
