Potresti aver visualizzato di PageSpeed Insights "assicurati che il testo rimanga visibile durante il caricamento dei web font" durante il test della velocità del tuo sito web. Il tuo sito web potrebbe essere pronto per essere visualizzato dal browser anche prima che i web font siano stati completamente scaricati. Pertanto, gli utenti non saranno in grado di vedere o accedere ai tuoi contenuti finché i web font non saranno stati scaricati. Durante questo periodo, il testo sarà nascosto. Questo problema è noto come " Flash of Invisible Text" (FOIT) .
Per migliorare l'esperienza utente, è possibile assicurarsi che il testo rimanga visibile durante il caricamento del web font. Questo aiuta a eliminare pagine vuote e modifiche indesiderate al layout.
In che modo i caricamenti dei font Web influiscono sulle prestazioni della pagina?
Ha i seguenti effetti:
- Impatti sul punteggio PageSpeed Insights
- Influisce sul grado di spostamento cumulativo del layout
- Gradi di First Contentful Paint e Largest Contentful Paint (Core Web Vitals)
- Esperienza utente e tassi di conversione
L'assenza di testo influisce anche sull'esperienza 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 improvvisi cambiamenti di layout causati dai web font per ottimizzare e migliorare il punteggio di Cumulative Layout Shift. Assicurare che il testo rimanga visibile durante il caricamento consente di prevenire spostamenti imprevisti del contenuto (senza interazione dell'utente). I web font possono causare cambiamenti 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 è noto come 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 del suo aspetto.
Visualizzazione dei caratteri: scambia
La proprietà font-display è un descrittore CSS accessibile in tutti i browser web moderni. Il descrittore font-display verifica se il font è stato scaricato o meno e la data di download per decidere come visualizzarlo. Ad esempio, una regola che utilizza @font-face utilizza l'attributo font-display.
Esistono molte variabili distinte per la visualizzazione dei font, tra cui blocco, swap, fallback e facoltativo. Utilizza il valore swap per impedire che si verifichi FOITe per garantire che il testo appaia sullo schermo il più rapidamente possibile.
Utilizza il plugin Swap Google Fonts Display di WordPress per automatizzare questa operazione. Elementor ha una funzionalità integrata per lo scambio di Google Fonts. Altri plugin di ottimizzazione come WP Rocket, Flyingpress e Perfmatters offrono questa funzionalità già pronta all'uso.
Per un caricamento più rapido dei font, utilizzare preconnects e preload:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Ciò ridurrà anche il CLS.
Conclusione
Questa guida spiega come risolvere il problema del "lampeggio del testo invisibile" su Page Speed Insight assicurandosi che il testo rimanga visibile durante il caricamento di Webfont.
Il tempo di caricamento e la velocità di caricamento delle pagine sono fattori importanti per offrire una buona esperienza utente e risolvere questo problema può migliorarla significativamente. Se una pagina non mostra tutto ciò che la circonda, non è considerata caricata. Pertanto, per evitare timeout e offrire agli utenti l'equilibrio, la velocità e la stabilità che desiderano, è necessario ridurre il tempo di caricamento dei contenuti sulla pagina.
Aumenta le prestazioni di WordPress con i nostri servizi di ottimizzazione del sito WordPress!
