Vediamo ora come gestire e ottimizzare al meglio i font di un sito web.

Il primo test che ti invito a fare è quello di verificare effettivamente quanti quante tipologie di fonte Quante varianti d S stai utilizzando all'interno del tuo sito web.

Puoi farlo sempre premendo F dodici, quindi aprendo la Cros andando sotto la voce network Font e aggiornando la pagina aggiornando la pagina vedrai le i font che stai utilizzando all'interno del tuo sito web.

In questo caso sono principalmente due font con um una fonte relativo al fatto che io sono loggato al momento all'interno del dell'area utente, quindi lo sto utilizzando per mostrarmi un font specifico per per un plugin.

In questo caso è tre total cash e un altro fonte invece relativo alle a una libreria icone, quindi vi fa vedere una serie di fonte e icone.

In questo caso abbiamo sostanzialmente tre varianti tre tipologie di fonte e hanno un peso totale di circa cento centosettanta kilobyte, che comunque è abbastanza rilevante su uno punto sette megabyte di peso totale della pagina.

Ripeto, in questo caso siamo loggati, quindi ci sono alcuni elementi che effettivamente poi non verranno caricati agli utenti che non sono loggati all'interno della pagina.

Comunque prendiamo questo questo caso di riferimento indicativamente occupano il dieci percento, che è un un peso abbastanza abbastanza importante.

Come possiamo ottimizzare questi font? Innanzitutto la prima cosa che possiam fare andando sempre su su hers andare sotto la voce font.

La prima ottimizzazione che possiamo applicare è quella di ospitare localmente i font di Google.

Cosa significa? Google offre come servizio quello di dare mettere a disposizione dei font agli agli utenti, agli sviluppatori di siti web e di conseguenza questi font molto spesso, soprattutto se li ha integrati tramite un tema, un plugin, sono presenti all'interno dei siti web tramite proprio il dominio di Google.

In questo caso, infatti, i primi due font che vedi sono non sono interni al sito web, ma fanno parte del dominio fonds punto g static punto com significa appunto che provengono da dai server di Google.

I server di Google utilizzano, um, utilizzano delle informazioni che raccolgono all'interno dei vari siti web all'interno dei quali sono ospitati questi font per eh, per per fini statistici principalmente.

E quello che è accaduto qualche anno fa in Germania, che è stato dichiarato illecito l'utilizzo di gole phones all'interno dei siti web per appunto per questa raccolta di dati da parte di Google.

Di conseguenza eh, chiaramente un po' tutti gli sviluppatori si sono preoccupati rispetto al fatto che sarebbe stato meglio ospitare i font di Google sul nostro sito web come semplicemente scaricandoli ospitando all'interno del nostro sito web.

Questa operazione, seppure sia semplice, la fa hers.

Quindi, abilitando questa funzione, noi andremo a far sì che i font non vengano più scaricati da dai server di Google, ma vengono ospitati sul nostro server oltre a um diciamo evitare potenziali um po potenziali complicanze a livello legale a livello legale.

Questo è anche un consiglio per diciamo evitare che ci sia un rischio di malfunzionamento sul server di Google, anche se è molto difficile se il server di Google dovesse avere un rallentamento, un malfunzionamento, i phone sul tuo sito web non verranno caricati perché dipendono proprio da quel server.

Quindi attiviamo questa funzione e facciamo Changes.

Okay, aggiorniamo sempre la cash.

Facciamo relativamente a buttare cash in modo tale che venga rigenerata la cash per questa pagina e quindi applichi correttamente le modifiche.

Aggiorniamo nuovamente la pagina e come vedi i due font che erano prima presenti sui server di Google ora sono sul nostro sul nostro dominio.

Quindi come vedi se faccio tasto destro o per il mio tab? In questo caso me l'ha direttamente scaricato è ospitato appunto sul sul nostro dominio.

Basta fare copy copy R l lo apriamo una nuova scheda senza incollarlo e come vedi è interno al al mio sito web.

Quindi questa è la prima operazione non è non ha chissà quale impatto in termini di prestazioni, però comunque è un'operazione consigliata.

La seconda funzione che ti consiglio di abilitare è il display app.

Per spiegarti questa funzionalità ti mostro questa immagine.

Queste sono quattro modalità di caricamento di dei font, quindi del display dei font, cioè di come vengono caricati i font.

Come vedi nel primo caso nel caso block, il font per durante il caricamento di pagina non viene mostrato, quindi invisibile non c'è per i primi supponiamo tre secondi, dopodiché c'è un font di back significa che c'è un font di anteprima che non è quello che abbiamo scelto per il nostro sito web e questo rimane fino a quando non è pronto il nostro font.

Quindi questa è la situazione un po', un po' peggiore la seconda è lo swap, quindi la situazione in cui sin da subito c'è un ck.

Quindi quello che è già integrato all'interno del nostro browser, quindi che il nostro browser subito può fornire all'utente in modo tale che l'utente possa subito immediatamente leggere il contenuto di quella pagina.

Quindi sin dal primo istante viene mostrato il font fino a quando non è pronto il nostro il nostro font.

Dopodiché c'è la la funzione fullback che fa sì che venga caricato ben presto c'è un minimo di latenza in cui il font non appare quindi invisibile.

Poi viene caricato un font di anteprima, quindi back e poi il nostro font e infine optional che è quello che fa sì che ci sia un attimo di latenza, appunto nel momento in cui il font non si vede invisibile per pochi, appunto decimi di secondo e dopodiché viene caricato il ck oppure, se è già pronto il il nostro font il font scelto da noi.

La soluzione ideale in termini di prestazioni o quanto meno in termini di esperienza utente è quella dello wap, in modo tale che se anche il nostro fond dovesse impiegarci tre secondi a caricare comunque l'utente sin da subito potrà leggere il contenuto della pagina una volta che il nostro font sarà pronto.

Quindi nel momento in cui diventa azzurro, um verrà caricato e di conseguenza verrà sostituito a quello che quindi ti consiglio di attivare.

Questa questa funzione grazie alla quale per Meers and a sostituire all'interno di tutti i tuoi font all'interno dei fogli di stile all'interno dei quali sono presenti i tuoi font.

Questa modalità di visualizzazione.

Quindi facciamo Changes okay in questo caso per verificare che effettivamente sia sia attiva o meno, dovremmo andare a cercare i fogli di stile all'interno dei quali sono presenti i nostri font oppure andare ad esempio a con grazie a questa tendina, simulare una connessione lenta, ricaricare la pagina e vedere che effettivamente sin da subito si veda un font, quindi non ci sia in questo caso trasparente, quindi non appaia niente, ma ci sia sin da subito un font che già vediamo e che poi venga caricato il nostro.

In questo caso chiaramente il sito web è già di per sé molto veloce, quindi ha direttamente caricato il nostro però nella situazione in cui abbiamo un sito web piuttosto lento, con tante varianti.

Anzi, eccolo qua, il font corretto che si è scaricato solo ora.

Mi ero sbagliato io a guardare comunque situazioni in cui abbiamo un sito web con molte varianti di fonte con pagine molto pesanti.

La differenza è veramente netta, quindi riproviamo, ricarichiamo la pagina, vedremo sin da subito il testo con un font di back, appunto il font che non abbiamo scelto noi per il nostro sito web.

Ma poco importa l'importante è che l'utente possa sin da subito leggere e poi non appena sarà pronto il nostro lo vedrai.

Tra poco questo verrà sostituito, quindi vedrai che occuperà più spazio.

Ad esempio, ora attendiamo che lo carichi chiaramente stiamo simulando una connessione molto lenta, quindi eccolo qua come vedi si è um ha ha sostituito il nostro con il nostro font che abbiamo scelto per il sito web.

In questo caso abbiamo la possibilità anche di specificare una r l per una c d n.

Qualora tu avessi una c d n da integrare per la gestione dei font, possiamo cancellare quelli che sono i font locali fa riferimento a quelli relativi a google phones, in questo caso l'operazione.

È consigliabile utilizzarla nel momento in cui ad esempio hai fatto delle modifiche ai font in qualche altra parte con qualche altro sistema di ottimizzazione e vuoi semplicemente rigenerarli e infine abbia la possibilità di disabilitare del tutto il Golfo.

Disabilitare del tutto significa, ad esempio, situazioni in cui hai un tema che integra GOP tu non sai come disattivarlo, non trovi il modo di disattivarlo, lo puoi fare da qui.

Quindi lui va in modo forzato a disattivare Google phones all'interno del tuo sito web.

Infine, l'ultima modalità di ottimizzazione relativa ai font che abbiamo già visto nella lezione precedente relativamente a i fogli di stile riguarda tutta la fase di quindi i così come il possono essere utilizzati per i font, quindi possiamo inserire un font che verrà pre caricato, quindi caricato per primo.

Proviamo, o meglio ho caricato prima di qualsiasi altra risorsa.

Proviamo subito, allora andiamo innanzitutto su Hal, quindi vediamo tutti, eh i tutte le risorse che vengono caricate per la pagina e l'ordine.

Come vedi prima i fogli di stile chiaramente i font nel nostro caso vengono caricati un po' troppo tardi, quindi in questo caso potrebbe essere utile per caricarli in modo tale che, come visto prima non ci sia quella latenza all'interno all'interno della quale l'utente vede un font che in realtà non è quello che vogliamo fargli vedere.

Quindi prendiamo ad esempio questo font qui, che è molto ha un nome molto lungo.

Facciamo um copy copy, andiamo sulla funzione load, inseriamo il collegamento al nostro font S.

Selezioniamo il fatto che è un font la tipologia di file e facciamo changes.

Come vedi finora questo font veniva scaricato come verso la fine del del della pagina.

Quindi tra gli ultimi elementi ora vediamo subito se viene scaricato per primo.

Quindi primo F cinque, vediamo se automaticamente ha rigenerato la cache, altrimenti lo facciamo noi manualmente.

No? Ecco l'ha già fatto.

Come vedi il primissimo elemento subito dopo il documento H T M L è proprio il nostro fonte.

Quindi è stato pre caricato chiaramente possiam vederlo anche facendo tasto destro visualizza sorgente pagina e andando a cercare proprio la funzione.

Eccolo qua.

E questo è il nostro font con la funzione che va a far sì che venga caricato.

Questa effettivamente è una funzione che anche nel nostro caso potremmo integrare appunto per far sì che l'utente sin da subito.

Veda il font il font corretto.

Chiaramente state a stabilire quanto prioritario è questo fonte rispetto alla visualizzazione dell'utente se lo reputi prioritario e soprattutto se il fonte non ha un peso troppo elevato, perché altrimenti facciam precaricare all'utente un font che comunque richiede un certo quantitativo di risorse, un certo quantitativo di tempo che poi magari l'utente non va neanche a apprezzare.

Quindi questo come sempre, va ponderato.

E la stessa cosa chiaramente è possibile farla con la funzione qualora volessimo aggiustare la priorità di caricamento dei vari font.