Sostenuto da Awesome Motive.
Per saperne di più sul nostro Blog Seahawk.

Come garantire che il testo rimanga visibile durante il caricamento dei font web su WordPress?

Come garantire che il testo rimanga visibile durante il caricamento dei font web su WordPress

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.

Assicurati che il testo rimanga visibile durante il caricamento del webfont, avviso di PageSpeed-Insights
Avviso di PageSpeed Insights

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.

font-display-swap-format
Lo scambio di caratteri risolverà il problema di FOIT.

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!

Nel nostro mondo interconnesso, la capacità di comunicare efficacemente in diverse lingue è sempre più cruciale.

Eseguire un test di usabilità sui siti WordPress è essenziale perché fornisce preziose informazioni su

I campi avanzati di WordPress sono utili per i proprietari dei siti perché permettono di memorizzare dati extra e di

Komal Bothra 21 marzo 2024

I migliori siti per assumere sviluppatori e designer WordPress nel 2024

Se state cercando di assumere il miglior sviluppatore di WordPress o un esperto di siti web WordPress, potete scegliere il vostro sito web.

WordPress
Komal Bothra 21 marzo 2024

Elementor bloccato nella schermata di caricamento? Ecco 25+ metodi per risolverlo!

Elementor semplifica il processo di sviluppo di pagine web in WordPress. Tuttavia, di tanto in tanto si può incontrare

WordPress
Komal Bothra 19 marzo 2024

Come impostare l'e-mail aziendale GoDaddy su Gmail (semplici passaggi)

Destreggiarsi tra più account di posta elettronica contemporaneamente può essere opprimente. Se state annegando nella

Tecnologia

Iniziare con Seahawk

Registratevi nella nostra app per visualizzare i nostri prezzi e ottenere sconti.