Vi sarà capitato di vedere l'avviso di PageSpeed Insights "Assicurati che il testo rimanga visibile durante il caricamento dei webfont" durante il test della velocità del vostro sito web. Il vostro sito web potrebbe essere pronto per essere visualizzato dal browser anche prima che i font web siano stati interamente scaricati. Pertanto, gli utenti non saranno in grado di vedere o accedere al vostro contenuto fino a quando il font web non sarà stato scaricato. Durante questo periodo, il font sarà nascosto alla vista. Questo è il cosiddetto problema del Flash of Invisible Text (FOIT) .
È possibile migliorare l'esperienza dell'utente garantendo che il testo continui a essere visibile durante il processo di caricamento del carattere web. Questo aiuta a eliminare le pagine vuote e i cambiamenti indesiderati nel layout.
In che modo il caricamento dei font web influisce sulle prestazioni della pagina?
Agisce nei seguenti modi:
- Impatto sul punteggio di PageSpeed Insights
- Influisce sul grado di spostamento del layout cumulativo
- I voti del primo Contentful Paint e del più grande Contentful Paint (Core Web Vitals)
- Esperienza utente e tassi di conversione
L'assenza di testo influisce anche sull'esperienza dell'utente durante il caricamento del Webfont: a nessuno piace accedere a un sito web con una pagina vuota. In pochi secondi, gli utenti possono capire se un sito contiene o meno le informazioni che stanno cercando leggendo il titolo principale e il testo.
È essenziale evitare gli spostamenti improvvisi del layout causati dai font web per ottimizzare e migliorare il voto di spostamento cumulativo del layout. Garantire che il testo rimanga visibile durante il caricamento consente di evitare spostamenti imprevisti del contenuto (senza l'interazione dell'utente). I font Web possono causare spostamenti di layout se il testo invisibile lampeggia durante il download e il rendering.
Come assicurarsi che il testo rimanga visibile durante il caricamento dei font web
Questo particolare istante viene definito Flash of Invisible Text (FOIT). Il messaggio di errore "Assicurarsi che il testo rimanga visibile durante il caricamento del Webfont" appare a causa di questo FOIT, che è responsabile della sua comparsa.
Visualizzazione dei caratteri: swap
La proprietà font-display è un descrittore CSS accessibile in tutti i browser web contemporanei. Il descrittore font-display considera se il font è stato scaricato o meno e la data in cui è stato scaricato per decidere come il font deve essere visualizzato. Ad esempio, una regola che utilizza @font-face fa uso dell'attributo font-display.
Esistono molte variabili distinte per la visualizzazione dei font, tra cui blocco, swap, fallback e opzionale. Usate il valore swap per evitare che si verifichi il FOIT e usate il valore swap per garantire che il testo appaia sullo schermo il più rapidamente possibile.
Per automatizzare questa operazione, utilizzare il plugin Swap Google Fonts Display di WordPress. Elementor ha una funzione integrata per lo scambio dei font di Google. Altri plugin di ottimizzazione, come WP Rocket, Flyingpress e Perfmatters, offrono questa funzione in modo automatico.
Per un caricamento più rapido dei font, utilizzare preconnessione e precaricamento :
<link rel='preload' href='/font.woff2' as='font' crossorigin>
In questo modo si ridurrà anche il CLS.
Conclusione
Questa guida spiega come risolvere il problema del "lampo di testo invisibile" nel page speed insight, assicurando che il testo rimanga visibile durante il caricamento dei Webfont.
Il tempo di caricamento e la velocità della pagina sono fattori importanti per fornire una buona esperienza all'utente e la risoluzione di questo problema può migliorarla in modo significativo. Se una pagina non mostra tutto quello che c'è sopra, non è considerata caricata. Pertanto, per evitare i timeout e fornire agli utenti l'equilibrio, la velocità e la stabilità che desiderano, è necessario ridurre il tempo di caricamento dei contenuti della pagina.
Accelerate le prestazioni di WordPress con i nostri servizi di ottimizzazione del sito WordPress!
