Optimizarea performanței fonturilor Google

Design-urile bune de site-uri web sunt împodobite de imagini și fonturi uimitoare. Din păcate, aceste două elemente web contribuie în mare măsură la motivele pentru care multe site-uri web prezintă o latență enervantă. Desigur, doar fonturile web pot oferi ceva revigorant, neașteptat și nou.

Cu toate acestea, există modalități de a limita acest fenomen oribil. SVG ajută dezvoltatorii să gestioneze unele dintre provocările redării imaginilor. Iar pentru Google Fonts, care este cel mai folosit font web, îmbunătățirea timpului de randare a unei pagini înseamnă doar implementarea mai multor trucuri disponibile pentru optimizarea performanței Fontului Google.

Ce sunt fonturile Google?

Fonturile Google sunt o colecție special reglată de glife care alcătuiesc fonturi pentru a fi utilizate pe site-uri web. Sunt concepute special pentru a fi utilizate pe internet, de unde și numele fonturilor web.

Lansat ca Google Web Fonts în 2010, cu doar aproximativ 30 de fonturi, Google Fonts are acum aproximativ 17 miliarde de fonturi și în prezent alimentează aproximativ 57% din toate site-urile web. Google Fonts, care este complet gratuit, înregistrează aproximativ 500.000 de vizualizări în fiecare secundă la momentul scrierii acestui articol și a acumulat peste 37 de trilioane de vizualizări din 2010.

Utilizarea fonturilor Google pe site-ul dvs. web vă permite să renunțați la a fi limitat la fonturi de sistem sau „fonturi sigure pentru web”, cum ar fi Arial și Georgia, care sunt în mare parte preinstalate pe toate sistemele de operare.

Cum să implementați fonturile Google

Implementarea fonturilor Google pe un site web se face folosind interfața de programare a aplicației (API), făcând referire la alegerea fontului(lor) de către utilizator. Acest API oferit de Google ar putea fi încorporat în documentul dvs. HTML utilizând eticheta standard de link CSS sau sintaxa pentru import. Mai jos este un exemplu de API-uri pentru implementarea Baloo Chettan 2.

Folosind eticheta standard de link CSS

Folosind sintaxa de import
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

Cu oricare dintre API-urile de mai sus în documentul dvs. HTML, puteți utiliza familia de fonturi în documentul dvs. CSS făcând referință la aceasta, așa cum se vede în exemplul de mai jos.

font-family : 'Baloo Chettan 2', cursiv;

Importanța optimizării performanței fonturilor Google

Implementarea și utilizarea fonturilor Google, la fel ca și alte fonturi web, nu reprezintă o mare problemă, dar furnizarea fonturilor vizitatorilor site-ului dvs. Amintiți-vă, utilizatorii nu au aceste fonturi pe dispozitivele lor. Cu alte cuvinte, browserele lor trebuie să le descarce înainte de a putea vedea conținutul site-ului dvs.

Grosimea fontului

Fiecare font vine cu o greutate care poate afecta negativ latența site-ului dvs. De exemplu, fontul Google Baloo Chettan 2 are o dimensiune totală de 720 KB. Aceasta înseamnă că trebuie să luați în considerare aproximativ 9 MB în încărcarea site-ului dvs. dacă trebuie să utilizați întreaga familie de fonturi Baloo (19), cu toate limbile și variantele disponibile pe site-ul dvs. Desigur, asta este ideal și nu este nimic apropiat de optimizarea fonturilor web. Cu toate acestea, greșit înseamnă să-i păstrați pe vizitatorii site-ului dvs. să aștepte câteva secunde înainte ca aceștia să poată vedea orice text pe site-ul dvs.

Format de font

Din păcate, niciunul dintre aceste formate nu este considerat un format universal care funcționează în toate browserele.

EOT este acceptat numai de IE. Chrome și Opera au cel mai mult suport pentru majoritatea formatelor, în timp ce aproximativ 86% din toate browserele acceptă formatul WOFF. Acest lucru poate necesita să includeți toate formatele de font pentru fiecare font pe care doriți să îl utilizați. Ideea este de a oferi o experiență consistentă, asigurându-se că toate browserele pot afișa fiecare font.

Aceste probleme fac parte din numeroasele motive pentru care există o nevoie crucială de a optimiza performanța fonturilor Google.

Optimizarea performanței fonturilor Google

Optimizarea fontului Google începe cu plasarea Font API și formatul de solicitare, până la randare. Iată trucuri simple despre cum să optimizați fonturile Google.

Preîncărcați resursele Google Font

Este foarte recomandat să utilizați noua caracteristică a platformei web: <link rel="preload"> care vă permite să încărcați fonturile web în avans. Această caracteristică vă permite să ocoliți comportamentul implicit al browserului, care de obicei întârzie redarea textului, construind mai întâi arborele de randare pentru a ști ce resurse de font are nevoie înainte de a accesa linkul de resurse.

<link rel="preload"> este de obicei inclus în eticheta <head> a HTML-ului dvs. pentru a declanșa o solicitare pentru fonturile dvs. suficient de devreme, fără a aștepta crearea CSSOM. Caracteristica oferă browserului doar o informație prealabilă că fonturile dvs. web ar fi necesare în curând, fără a furniza informații despre modul în care ar fi utilizate.

De asemenea, vi se recomandă să utilizați o definiție CSS @font-face adecvată alături de caracteristica de preîncărcare pentru a informa browserul despre cum să folosească adresa URL a resursei. Vezi un exemplu în punctul următor.

Utilizați o singură solicitare pentru mai multe fonturi

O altă măsură bună pentru optimizarea fonturilor Google este combinarea mai multor solicitări de font într-o singură etichetă. Să nu includă o etichetă <link> separată pentru fiecare font, trimițând astfel cereri multiple în loturi diferite. Pentru a combina solicitările de fonturi, pur și simplu separați fonturile din API cu | caracter. Cu toate acestea, acest lucru ar putea fi realizat și prin simpla selectare a tuturor fonturilor de care ați avea nevoie simultan pe pagina Font Google.

Format greșit de solicitare a fonturilor:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Format recomandat pentru solicitări de font:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Combinând mai multe solicitări de fonturi într-o singură etichetă, salvăm browserul de la mai multe călătorii la server și, de asemenea, ajutăm browserele mai vechi cu maximum 2 conexiuni simultan pe domeniu.

Formate de font optimizate pentru toate browserele

Browserele fără suport pentru un anumit format de font pur și simplu îl ignoră și trec la pasul următor din arborele de randare. Și pentru a oferi o experiență consecventă, trebuie să includeți toate formatele de font în declarația dvs. CSS @font-face.

Cu toate acestea, greutatea ar putea fi redusă. Graficele individuale care descriu un font sunt alcătuite din informații similare care pot fi comprimate folosind un compresor compatibil, cum ar fi GZIP. În timp ce formatele TTF și EOT sunt comprimate în mod implicit, trebuie să vă asigurați că serverele sunt configurate pentru a aplica compresia atunci când furnizați ambele formate de font.

Utilizați setarea optimă de compresie pentru WOFF, care are compresie încorporată și recurgeți la algoritmi personalizați de preprocesare și compresie pentru a furniza WOFF2 cu o reducere de ~30% a dimensiunii fișierului.

Exemplu de declarație CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Acordați prioritate local() în lista dvs. src

Deși această idee de optimizare a fonturilor Google s-ar putea să nu se aplice cu adevărat utilizatorilor de telefoane mobile decât dacă faceți referire la fonturi implicite de sistem, rămâne un truc eficient pentru optimizarea fonturilor web.

Dacă vă uitați la exemplul de declarație CSS @font-face de mai sus, veți observa că local() se află în fruntea listei de variante de resurse separate prin virgulă în descriptorul src:. Această prioritizare este intenționată, iar ideea este de a trimite browserul utilizatorului la prima sursă pentru fontul local înainte de a opta pentru descărcarea acestora dacă nu este disponibil local.

Acest lucru asigură că browserul nu continuă să descarce fonturi deja instalate local pe computerul utilizatorului, asigurând astfel o performanță mai bună a site-ului web.

Personalizați redarea fontului: CSS font-display

Controlul performanței fontului cu descriptorul de afișare a fontului pentru @font-face vă permite să decideți cum ar trebui să fie randate fonturile dvs. Google, în funcție de cât timp durează descărcarea. Inițial, browserele web au setări implicite cu privire la ce să facă atunci când fonturile durează prea mult să se încarce. Majoritatea dintre ei stabilesc un timeout după care folosesc fontul alternativ, dar, din păcate, perioada lor de timeout diferă.

Proprietatea font-display recent introdusă acceptă în prezent cinci intervale de valori: auto | bloc | schimb | de rezervă | opțional

Ar trebui să setați proprietatea să blocheze valoarea dacă redarea textului într-un anumit tip de liter este foarte importantă. Acest lucru se datorează faptului că permite browserului să folosească text invincibil în locul fontului preferat atunci când nu sunt gata și le schimbă imediat ce termină descărcarea. Majoritatea browserelor folosesc această valoare ca valoare implicită ( auto ).

Schimbarea ar putea fi folosită în cazurile în care vă puteți permite să redați un font temporar până când fontul preferat este gata. Schimbarea este similară cu blocarea, dar redă fontul alternativ imediat ce pagina începe să se încarce și le va înlocui cu tipul preferat de îndată ce sunt gata. Această valoare are o perioadă de schimb infinită și o perioadă de bloc de zero secunde.

Valoarea de schimb nu este ideală pentru corpul textului, astfel încât să nu perturbe experiența cititorului la jumătate prin deplasarea textului. Puteți utiliza acest lucru pentru textul siglei în care trebuie să afișați rapid numele companiei sau sloganul utilizând o alternativă, dar în cele din urmă aveți nevoie de tipul de literă oficial în scopuri de branding.

Exemplu: proprietatea font-display setată la swap
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

Valoarea de schimb poate fi văzută implementată în primele linii de cod (Google Font API) utilizate pentru a demonstra cum să legați fonturile Google în documentul dvs. HTML.

Fallback este similar cu swap , dar are o perioadă limitată de schimb. Dacă fontul preferat nu se încarcă într-o perioadă stabilită, de obicei o secundă zero, textul va păstra fontul alternativ pentru restul vieții paginii. Acesta este un candidat bun pentru textul corpului; redă textul cât mai repede posibil și nu îl va schimba până când cineva începe să citească.

Valoarea opțională este o replică a alternativei , dar permite browserului să decidă dacă inițiază sau nu descărcarea fontului web, ținând cont de viteza rețelei utilizatorilor. Într-o situație în care conexiunea este prea slabă, browserul ar trebui să limiteze solicitările și să prioritizeze resursele cele mai necesare, netrimițând nicio solicitare de descărcare a fontului web.

Limitați familia de fonturi și variantele

Deoarece fiecare familie de fonturi și variantă contribuie la greutatea paginii, o parte a procesului dvs. de optimizare a fonturilor Google trebuie să includă limitarea acestor două elemente.

Disponibilitatea mai multor variante, cum ar fi italic , regulat , bold , etc. nu înseamnă neapărat că aveți „alegerea” să le includeți în descărcare. Reduceți descărcarea la varianta exactă necesară și evitați să includeți prea multe. Ar fi irositor să descărcați o variantă completă, deoarece doriți să folosiți doar un cuvânt din ea. Aici este util următorul truc de optimizare pentru Fonturi Google.

Utilizați parametrul text

Parametrul text este unul dintre cele mai bune trucuri de optimizare a fonturilor Google pe care trebuie să le cunoașteți și, în mod surprinzător, majoritatea dezvoltatorilor nu îl folosesc. Parametrul vă permite să încărcați doar caracterele de care aveți nevoie.

Presupunând că doriți să utilizați doar două litere ale unui font în numele companiei dvs., ca în exemplul de mai jos. Am folosit fonturi diferite pentru literele C și N:

Numele companiei

Puteți solicita să încărcați doar acele două litere, în loc de întregul font. Adresa URL a fontului va include parametri suplimentari precum acesta:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

In concluzie

Optimizarea fonturilor Google este o strategie crucială pentru îmbunătățirea performanței generale a unui site web.

Accesibilitatea și lizibilitatea sunt întotdeauna factorii majori asupra cărora trebuie să se concentreze, în afară de designul bun în tipografie. Metodele menționate mai sus pentru îmbunătățirea performanței fonturilor sunt toate axate pe reducerea greutății fonturilor, accesarea fonturilor web cât mai repede posibil și redarea formatului/alternativelor valide atunci când rețeaua utilizatorilor este nesigură.

Vă rugăm să ne spuneți dacă ați încercat oricare dintre aceste metode și despre orice proces de optimizare a fonturilor web care nu este menționat în acest articol.