Optimizarea performanței fonturilor Google

Este corect să spunem că fonturile Google sunt populare. În momentul în care scriem, acestea au fost vizualizate de peste 29 de trilioane de ori pe web și este ușor de înțeles de ce - colecția vă oferă acces la peste 900 de fonturi frumoase pe care le puteți utiliza gratuit pe site-ul dvs. web. Fără Google Fonts, ai fi limitat la câteva „fonturi de sistem” instalate pe dispozitivul utilizatorului tău.

Fonturile de sistem sau „Fonturile sigure pentru web” sunt fonturile cel mai frecvent preinstalate în sistemele de operare. De exemplu, Arial și Georgia sunt ambalate cu distribuții Windows, macOS și Linux.

Ca toate lucrurile bune, fonturile Google au un cost. Fiecare font are o greutate pe care browserul web trebuie să o descarce înainte de a putea fi afișate. Cu configurarea corectă, timpul suplimentar de încărcare nu este vizibil. Cu toate acestea, înțelegeți greșit și utilizatorii dvs. ar putea aștepta până la câteva secunde înainte ca orice text să fie afișat.

Fonturile Google sunt deja optimizate

API-ul Google Fonts face mai mult decât să furnizeze fișierele cu fonturi către browser, de asemenea, efectuează o verificare inteligentă pentru a vedea cum poate livra fișierele în cel mai optimizat format.

Să ne uităm la Roboto, GitHub ne spune că varianta obișnuită cântărește 168 kb.

Cu toate acestea, dacă solicit aceeași variantă de font de la API, mi se oferă acest fișier. Care este doar 11 kb. Cum poate fi asta?

Când browserul face o solicitare către API, Google verifică mai întâi ce tipuri de fișiere acceptă browserul. Folosesc cea mai recentă versiune de Chrome, care, la fel ca majoritatea browserelor, acceptă WOFF2, așa că fontul îmi este oferit în acel format foarte comprimat.

Dacă îmi schimb user-agent la Internet Explorer 11, mi se oferă fontul în format WOFF.

În cele din urmă, dacă îmi schimb agentul utilizator la IE8, primesc fontul în format EOT (Embedded OpenType).

Google Fonts menține peste 30 de variante optimizate pentru fiecare font și detectează și furnizează automat varianta optimă pentru fiecare platformă și browser.

— Ilya Grigorik, Optimizarea fonturilor web

Aceasta este o caracteristică excelentă a Fonturilor Google, prin verificarea agentului utilizator, acestea sunt capabile să ofere cele mai performante formate browserelor care le acceptă, afișând în același timp fonturile în mod constant pe browserele mai vechi.

Memorarea în cache a browserului

O altă optimizare încorporată a fonturilor Google este memorarea în cache a browserului.

Datorită naturii omniprezente a fonturilor Google, browserul nu trebuie să descarce întotdeauna fișierele cu fonturi complete. SmashingMagazine, de exemplu, folosește un font numit „Mija”, dacă este prima dată când browserul dvs. vede acel font, va trebui să îl descarce complet înainte ca textul să fie afișat, dar data viitoare când vizitați un site web folosind acel font , browserul va folosi versiunea stocată în cache.

Pe măsură ce API-ul Google Fonts devine din ce în ce mai utilizat, este posibil ca vizitatorii site-ului sau a paginii dvs. să aibă deja fonturi Google folosite în designul dvs. în memoria cache a browserului.

— Întrebări frecvente, Fonturi Google

Cache-ul browserului Google Fonts este setat să expire după un an, cu excepția cazului în care memoria cache este șters mai devreme.

Notă: Mija nu este un font Google, dar principiile stocării în cache nu sunt specifice furnizorului.

Optimizarea suplimentară este posibilă

În timp ce Google depune eforturi mari în optimizarea livrării fișierelor cu fonturi, există încă optimizări pe care le puteți face în implementarea dvs. pentru a reduce impactul asupra timpilor de încărcare a paginii.

1. Limitați familiile de fonturi

Cea mai ușoară optimizare este pur și simplu să folosiți mai puține familii de fonturi. Fiecare font poate adăuga până la 400 kb la greutatea paginii dvs., înmulțiți-o cu câteva familii diferite de fonturi și dintr-o dată fonturile dvs. cântăresc mai mult decât întreaga pagină.

Recomand să nu folosiți mai mult de două fonturi, unul pentru titluri și altul pentru conținut este de obicei suficient. Folosind corect dimensiunea fontului, greutatea și culoarea, puteți obține un aspect grozav chiar și cu un singur font.

2. Excludeți variante

Datorită standardului de înaltă calitate al fonturilor Google, multe dintre familiile de fonturi conțin spectrul complet de greutăți de font disponibile:

• subțire (100)
• Cursiv subțire (100i)
• Lumină (300)
• Cursiv deschis (300i)
• obișnuit (400)
• Cursiv normal (400i)
• Medie (600)
• Italică medie (600i)
• Îndrăzneț (700)
• Cursiv aldine (700i)
• Negru (800)
• Negru cursiv (800i)

Acest lucru este grozav pentru cazurile de utilizare avansate care ar putea necesita toate cele 12 variante, dar pentru un site web obișnuit, înseamnă să descărcați toate cele 12 variante atunci când este posibil să aveți nevoie doar de 3 sau 4.

De exemplu, familia de fonturi Roboto cântărește ~144 kb. Dacă, totuși, utilizați doar variantele Regular, Regular Italic și Bold, acest număr scade la ~36kb. O economie de 75%!

Codul implicit pentru implementarea fonturilor Google arată astfel:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Dacă faceți asta, va încărca doar varianta „400 obișnuită”. Ceea ce înseamnă că tot textul ușor, aldin și cursiv nu va fi afișat corect.

În schimb, pentru a încărca toate variantele de font, trebuie să specificăm greutățile în URL astfel:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Este rar ca un site web să folosească toate variantele unui font de la Thin (100) la Black (900), strategia optimă este să specificați doar ponderile pe care intenționați să le utilizați:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Acest lucru este deosebit de important atunci când utilizați mai multe familii de fonturi. De exemplu, dacă utilizați Lato pentru titluri, este logic să solicitați doar varianta aldină (și eventual cursiv aldine):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Combină cereri

Fragmentul de cod cu care am lucrat mai sus efectuează un apel către serverele Google ( fonts.googleapis.com ), care se numește cerere HTTP. În general, cu cât pagina dvs. web trebuie să facă mai multe solicitări HTTP, cu atât va dura mai mult pentru încărcare.

Dacă doriți să încărcați două fonturi, puteți face ceva de genul acesta:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Acest lucru ar funcționa, dar ar avea ca rezultat browserul să facă două solicitări. Putem optimiza acest lucru combinându-le într-o singură solicitare, astfel:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

Nu există limită pentru câte fonturi și variante poate conține o singură solicitare.

4. Sugestii de resurse

Sugestiile de resurse sunt o caracteristică acceptată de browserele moderne care poate crește performanța site-ului. Vom arunca o privire la două tipuri de indicii de resurse: „DNS Prefetching” și „Preconnect”.

Notă: dacă un browser nu acceptă o caracteristică modernă, o va ignora pur și simplu. Deci pagina dvs. web se va încărca normal.

Preluare DNS

Preluarea DNS permite browserului să înceapă conexiunea la API-ul Fonts Google ( fonts.googleapis.com ) imediat ce pagina începe să se încarce. Aceasta înseamnă că, în momentul în care browserul este gata să facă o solicitare, o parte din muncă este deja făcută.

Pentru a implementa preîncărcarea DNS pentru fonturi Google, pur și simplu adăugați această linie în paginile dvs. web <head> :

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

Preconectare

Dacă te uiți la codul de încorporare Google Fonts, se pare că este o singură solicitare HTTP:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Cu toate acestea, dacă vizităm acea adresă URL, putem vedea că există încă trei solicitări către o adresă URL diferită, https://fonts.gstatic.com. O solicitare suplimentară pentru fiecare variantă de font.

Problema cu aceste solicitări suplimentare este că browserul nu va începe procesele pentru a le face până când prima solicitare către https://fonts.googleapis.com/css nu este completă. Aici intervine Preconnect.

Preconectarea ar putea fi descrisă ca o versiune îmbunătățită a preluării. Este setat pe adresa URL specifică pe care browserul o va încărca. În loc să efectueze doar o căutare DNS, completează și negocierea TLS și strângerea de mână TCP.

La fel ca DNS Prefetching, poate fi implementat cu o singură linie de cod:

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

Doar adăugarea acestei linii de cod poate reduce timpul de încărcare a paginii cu 100 ms. Acest lucru este posibil prin începerea conexiunii alături de cererea inițială, mai degrabă decât așteptarea ca aceasta să se finalizeze mai întâi.

5. Găzduiește fonturi local

Fonturile Google sunt licențiate în baza unei licențe „Libre” sau „software liber”, care vă oferă libertatea de a utiliza, schimba și distribui fonturile fără a solicita permisiunea. Asta înseamnă că nu trebuie să utilizați găzduirea Google dacă nu doriți - puteți găzdui singur fonturile!

Toate fișierele cu fonturi sunt disponibile pe Github. Este disponibil și un fișier zip care conține toate fonturile (387 MB).

În cele din urmă, există un serviciu de ajutor care vă permite să alegeți ce fonturi doriți să utilizați, apoi vă oferă fișierele și CSS necesare pentru a face acest lucru.

Există un dezavantaj în a găzdui fonturi local. Când descărcați fonturile, le salvați așa cum sunt în acel moment. Dacă sunt îmbunătățite sau actualizate, nu veți primi acele modificări. În comparație, atunci când solicitați fonturi din API-ul Google Fonts, vi se oferă întotdeauna cea mai recentă versiune.

Notați lastModified parametru modificat din API. Fonturile sunt modificate și îmbunătățite în mod regulat.

6. Afișare font

Știm că este nevoie de timp pentru ca browserul să descarce Google Fonts, dar ce se întâmplă cu textul înainte ca acestea să fie gata? Pentru o lungă perioadă de timp, browser-ul arăta un spațiu liber unde ar trebui să fie textul, cunoscut și sub numele de „FOIT” (Flash of Invisible Text).

Lectură recomandată : „FOUT, FOIT, FOFT” de Chris Coyier

Arătarea nimicului poate fi o experiență tulburătoare pentru utilizatorul final, o experiență mai bună ar fi să afișați inițial un font de sistem ca alternativă și apoi să „schimbați” fonturile odată ce sunt gata. Acest lucru este posibil folosind proprietatea CSS font-display .

Prin adăugarea font-display: swap; la declarația @font-face, îi spunem browserului să arate fontul alternativ până când Fontul Google este disponibil.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

În 2019, Google a anunțat că va adăuga suport pentru font-display: swap. Puteți începe să implementați acest lucru imediat adăugând un parametru suplimentar la adresa URL a fonturilor:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Utilizați parametrul Text

O caracteristică puțin cunoscută a API-ului Google Fonts este parametrul text . Acest parametru rar folosit vă permite să încărcați doar caracterele de care aveți nevoie.

De exemplu, dacă aveți un text-logo care trebuie să fie un font unic, puteți utiliza parametrul text pentru a încărca doar caracterele utilizate în logo.

Funcționează așa:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Evident, această tehnică este foarte specifică și are doar câteva aplicații realiste. Cu toate acestea, dacă îl puteți folosi, poate reduce greutatea fontului cu până la 90%.

Notă: Când utilizați parametrul text , numai greutatea „normală” a fontului este încărcată implicit. Pentru a utiliza o altă greutate, trebuie să o specificați în mod explicit în adresa URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Încheierea

Cu aproximativ 53% din primele 1 milion de site-uri web care folosesc Fonturi Google, implementarea acestor optimizări poate avea un impact uriaș.

Câte dintre cele de mai sus ați încercat? Anunță-mă în secțiunea de comentarii.