Google fonts blocca il render

Antonio95

Google fonts blocca il render

Ciao a tutti, vorrei un consiglio nel mio sito internet uso due google fonts Open Sans e Oswald. Ho integrato l'url indicato da google:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@400;700&display=swap" rel="stylesheet">

Facendo il test con page speed risulta che google fonts blocca il render della pagina, ho fatto diverse ricerche ed ho modificato così:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Il risultato non è ancora soddisfacente, oltre a scaricare i fonts e caricarli localmente c'è qualche altra soluzione che non prevede l'uso di script?

Grazie mille!

@antonio95 Ciao!
hai già aggiunto "display:swap" al font-family nel tuo foglio di stile?

Attributo PRELOAD?
<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" as="font">

Attributo DNS_PREFETCH?
<link rel=”dns-prefetch” href=”https://fonts.gstatic.com”>

Hai valutato la possibilità di caricare i font localmente?

Spero di averti aiutato...

Antonio95

@seowebcoach Grazie per la risposta!

Il foglio di stile è hostato su google quindi non posso modificarlo, aprendo l'url

https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@400;700&display=swap

Vedo che google ha già implementanto font-display: swap;

Ho letto in alcuni forum che consigliavano di usare il preload però volevo un Vostro consiglio.

Ho pensato di caricarli localmente, ma in molti forum lo sconsigliano perchè i fonts sono regolarmente aggiornati da google e caricandoli localmente non sarebbero più aggiornati. Volevo qualche consiglio da voi

@antonio95 Bè, il tuo sito web ha i suoi CSS dove vengono richiamati i font attraverso il font-family... inserisci display:swap anche lì così che i caratteri di testo rimangano visibili durante il rendering della pagina...

Per quanto riguarda il caricamento locale dei font, è vero che in realtà il CDN di google risulta essere più veloce del caricamento locale ma poi puoi lavorare sul caching, la compressione, il keep alive ecc..ecc.. se utilizzi questa soluzione.

Antonio95

@seowebcoach Quindi mi consigli di aggiungere nel mio css ad esempio:

body{font-family:'Open Sans',Arial, Helvetica, sans-serif;font-display: swap;font-size: 14px;line-height: 24px;}

e lo aggiungo a tutti i richiami font-family del css giusto?

Ne approfitto per due domande:

Per il preload mi consigli di usarlo?
Per il caricamento locale mi consigli di usare per scaricare i fonts visto che google non da questa possibilita?

@antonio95 Prima ho modificato il post dove ti consigliavo anche di utilizzare l'attributo dns-prefetch ma non lo vedo aggiornato... eccolo

DNS_PREFETCH
<link rel=”dns-prefetch” href=”https://fonts.gstatic.com”>

Non è che l'utilizzo del display:swap lo consiglio io... è un suggerimento ufficiale di Google che indica l'utilizzo del display swap per farsì che il carattere rimanga visibile durante il rendering quindi si.. apporta la modifica.

Il PRELOAD non è però cross browser quindi si, io lo inserirei tenendo in considerazione questo passaggio....

Il Caricamento locale dei font, è, lasciatemi passare il termine, una supercaxxola... ma tienilo in considerazione...

Ti invito a leggere un ottimo articolo su prefetch, prerender, preload e dns-prefetch così da chiarirti per bene la questione

Antonio95

@seowebcoach Allora ho aggiunto font-display: swap; al css e anche agli style nel codice html.

Ti chiedo solo un'ultima conferma è corretto così?

<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@400;700&display=swap" as="style">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@400;700&display=swap" rel="stylesheet">

Nel Preload devo mettere as="style" o as="font">?
Dopo il preload è corretto inserire lo stylesheet di richiamo come ho fatto?

Grazie mille per l'aiuto

@antonio95 ha detto in Google fonts blocca il render:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Si corretto... io inserisco sul preload as="style"
ma su questo punto sarebbe bello avere l'impressione degli amici della community...

Tempo fa lessi sul sito di Herry Roberts un articolo dove viene spiegato bene anche come ottimizzare ulteriormente le performance di caricamento dei google font con una tecnica semplice legata al display:swap.

A presto!

Antonio95

@seowebcoach Fatto tutto! In effetti non visualizza più l'errore del blocco del render! Grazie mille

Chiedo se possibile due ulteriori info per mia curiosità:

Ho notato che molti siti usano il prefetch su fonts.googleapis in questo modo:

<link rel='dns-prefetch' href='//fonts.googleapis.com'/>

Mi chiedevo che differenza c'è tra l'impostare il prefetch tra fonts.gstatic e fonts.googleapis?

Come mai il w3c validator mi segna errore dicendo La proprietà font-display non esiste : swap?
Per le icon font voi cosa mi consigliate? Sto usando icomoon perchè da la possibilità di scegliere quali icone scaricare sempre per la velocità del sito solamente che non genera il woff2. Conoscete qualche generatore simile?

Grazie mille!

@antonio95 ha detto in Google fonts blocca il render:

icomoon

Devi integrare anche quello... richiamando il Google web font, l'url in questione, attiva altre chiamate... "prefetchando" anche quell'url riesci a guadagnare qualche altra briciola di velocità...

Per le icone non saprei consigliarti anche se a rigor di logica un icon pack con poche icone sarebbe, penso, meglio. Ad esempio ionicons o simili.

Contento di averti aiutato!

Antonio95

@seowebcoach quindi in definitiva il codice sarebbe

<link rel='dns-prefetch' href='//fonts.googleapis.com'/>

Antonio95

@seowebcoach quindi in definitiva il codice sarebbe

<link rel='dns-prefetch' href='//fonts.googleapis.com'/>
<link rel="dns-prefetch" href="https://fonts.gstatic.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@400;700&display=swap" as="style">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@400;700&display=swap" rel="stylesheet">

Giusto?
Aggiungendo a font-family il font-display swap non mi passa la validazione w3c. Non è riconosciuto?

Grazie mille per tutte le info e i suggerimenti!

@antonio95 Direi di si... non me ne volere ma io il w3c non lo guardo più... mi manda in paranoia di più di un bug da fixare su PHP (che non conosco egregiamente) e ad oggi non ho mai visto un sito che rispetta tutte le regole che impone..

Ok quindi risolto? top!

Antonio95

@seowebcoach sisi domani implemento anche l ultimo prefetch che mi hai consigliato comunque già cosi non mi segnala più il problema!!!!!!! Grazie mille!!!!!

Per quanto riguarda il font-display forse ho capito male io perchè l ho applicato dopo tutti i font-family presenti nel css e nel html, però mi sa che va applicato a @font-face. Io nel mio css non l ho copiato perche è già presente nel url di google. Non so se bisogna copiarlo pure nel css? Comunque nel css di google @font-face ha gia il display swap
un ultima info delle volte il page speed mi suggerisce di usare il preload anche per le icon fonts secondo te ha senso?

Comunque grazie ancora per l aiuto!!!

@antonio95 il display swap va applicato a tutti i webfont che vengono caricati... in questo modo fornisci il testo, interpretato da un open sans, con il font di default del browser.

a questo punto ti linko ad un mio articoletto sulla questione Preload, Prefetch, Prerender, Subresources e Preconnect vanno usati su diverse cosettine...

Antonio95

@seowebcoach Applicata anche l'ultima modifica, non è cambiato nulla con il prefetch su googleapis però il problema è stato è risolto, grazie mille! ho letto anche l'articolo utile per avere qualche info in più! grazie mille!

schriftartenio

Quando ti piace parlare con il tuo telefono, allora c'è un'altra cosa sul web: https://schriftarten.io/