- Home
- Categorie
- Digital Marketing
- Posizionamento Nei Motori di Ricerca
- Google fonts blocca il render
-
@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!
A 1 Risposta -
@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!
? 1 Risposta -
@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!
A 2 Risposte -
@seowebcoach quindi in definitiva il codice sarebbe
<link rel='dns-prefetch' href='//fonts.googleapis.com'/>
-
@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!
? 1 Risposta -
@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!
A 1 Risposta -
@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!!!
? 1 Risposta -
-
@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...
A 1 Risposta -
@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!
-
Quando ti piace parlare con il tuo telefono, allora c'è un'altra cosa sul web: https://schriftarten.io/