8 strategii de încărcare a fonturilor pentru a vă îmbunătăți elementele vitale de bază ale web (2022)

A fost publicat inițial în octombrie 2021 și a fost actualizat pentru a fi complet în octombrie 2022

Când vorbim despre performanța web și în special despre Core Web Vitals (CWV), aproape că se pare că tehnicile de optimizare a imaginii și JavaScript fură în centrul atenției.

Cu toate acestea, există un alt player care nu trebuie trecut cu vederea - fonturile web.

Având în vedere că sunt adesea fișiere mari care durează ceva timp pentru a se încărca și pot chiar bloca redarea textului, optimizarea fonturilor este o piesă critică a strategiei generale de performanță.

Tipografia este, de asemenea, fundamentală pentru un design bun, branding, lizibilitate și accesibilitate. Și fonturile web sunt cele care fac toate aceste lucruri posibile.

În rândurile următoare, vom vedea cum fonturile vă afectează Core Web Vitals și cum puteți optimiza încărcarea acestora.

Sa incepem!

Ce ar trebui să știți despre încărcarea fonturilor (pe scurte)

Nu există o singură tehnică de optimizare a fonturilor care să vă poată rezolva toate problemele.

Ar putea fi puțin dur, dar este adevărul. Încărcarea fonturilor a fost un mare vinovat al performanței web de ani de zile. Și toate strategiile actuale de difuzare a fonturilor web au dezavantaje semnificative.

De ceva timp, dacă ați vrut să serviți fonturi web, a trebuit să alegeți între:

• Flash of Invisible Text (FOIT) unde textul este ascuns până când fontul este descărcat.

Sau

• Flash of Unstyled Text (FOUT) folosește inițial fontul sistemului alternativ, apoi face upgrade la fontul web când se descarcă.

Mai simplu, puteți să-i faceți pe vizitatori să se uite la un ecran gol sau să riscați să apară schimbări neașteptate de aspect pe site-ul dvs.

Ambele sunt soluții inacceptabile în lumea Core Web Vitals de astăzi.

Practic, situația de încărcare a fontului a fost:

Apoi, proprietatea font-display a fost anunțată.

font-display spune browserului cum ar trebui să procedeze cu redarea textului atunci când fontul web asociat nu s-a încărcat. Este definit pe font-face .

Browserele au un comportament implicit de încărcare a fonturilor atunci când redau text care utilizează o familie de fonturi care nu este încă disponibilă:

Sursa: web.dev

Procesul de descărcare a fonturilor este împărțit în trei perioade majore:

• Prima perioadă este perioada blocului de fonturi . Dacă font-face nu este încărcat în această perioadă, orice element care încearcă să-l folosească trebuie să fie redat cu un font de rezervă invizibil (FOIT). Dacă font-face se încarcă cu succes în această primă perioadă, atunci este utilizat în mod normal.
• Perioada de schimb de fonturi are loc imediat după perioada de blocare a fonturilor. Dacă font-face nu este încărcat în această perioadă, orice element care încearcă să-l folosească trebuie să fie redat cu un font alternativ (de sistem) (FOUT). Dacă font-face se încarcă cu succes în această perioadă, fontul este utilizat în mod normal.
• Perioada de eroare a fonturilor are loc imediat după perioada de schimb de fonturi. Dacă fontul nu este încă încărcat când începe această perioadă, este marcat ca o încărcare nereușită, provocând o rezervă normală a fontului.

Înțelegerea acestor perioade vă va permite să utilizați mai eficient valorile de afișare a fontului :

• font-display: folosește automat orice strategie de afișare a fonturilor pe care o folosește user-agent;
• font-display: block oferă fontului o perioadă scurtă de bloc de 3s (în cele mai multe cazuri) și o perioadă de schimb infinită. Cu alte cuvinte, schimbă întotdeauna fontul web când se încarcă. Utilizați această valoare atunci când fontul este important pentru pagină;
• font-display: swap arată fontul imediat ce se încarcă. Similar cu bloc, această valoare ar trebui utilizată numai atunci când redarea textului într-un anumit font este importantă pentru pagină;
• font-display: alternativ ascunde textul timp de până la 100 ms, apoi schimbă fontul web doar dacă se încarcă în trei secunde. Dacă fontul nu este încărcat în timpul perioadei de schimb de trei secunde, alternativa va fi folosită pentru restul vieții paginii;
• font-display: opțional oferă caracterului fontului o perioadă minimă de blocare de 100 ms. Apoi, dacă fontul nu este încă disponibil, rămâne cu alternativa și nu se schimbă niciodată. Practic, valoarea opțională lasă browserul să decidă dacă inițiază sau nu descărcarea fontului.

Sursa: Cum să evitați schimbările de aspect cauzate de fonturile web

Când decideți ce valoare de afișare a fontului să utilizați pentru site-ul dvs., o regulă generală bună este această recomandare Google:

• Dacă performanța este o prioritate maximă : Folosiți font-display: opțional. Aceasta este cea mai „performantă” abordare: redarea textului este întârziată nu mai mult de 100 ms și există asigurarea că nu vor exista schimbări de aspect legate de schimbarea fonturilor.
• Dacă afișarea textului într-un font web este o prioritate maximă : Folosiți font-display: schimbați, dar asigurați-vă că furnizați fontul suficient de devreme încât să nu provoace o schimbare de aspect.”

După cum am spus mai devreme, încă nu există o soluție completă care să rezolve toate problemele posibile cu fonturile legate de încărcarea fonturilor. Deși Google însuși recomandă acești pași, asta nu înseamnă că sunt fără riscuri.

De fapt, unele dintre valorile de afișare a fonturilor vă pot înrăutăți Core Web Vitals.

Cum influențează fonturile principalele tale vitale web (CLS și LCP)

Dacă sunteți familiarizat cu Core Web Vitals, probabil știți că unele metode de încărcare a fonturilor le pot dăuna.

De exemplu, dacă un font nu a fost încărcat (FOIT), browserele întârzie de obicei redarea textului ( font-display: block ). În unele cazuri, acest lucru întârzie prima vopsea cu conținut (FCP) și cea mai mare vopsea cu conținut (LCP).

Pe de altă parte, practica schimbului de fonturi este binecunoscută pentru că provoacă schimbări neașteptate de aspect, care sunt direct legate de metrica Cumulative Layout Shift (CLS).

Acum, să trecem prin cele mai bune practici de încărcare a fonturilor pentru a vă menține valorile CWV sub control.

Evitați schimbările de aspect la încărcarea fonturilor (CLS)

Schimbarea aspectului cumulativ măsoară importanța schimbărilor neașteptate de aspect pe o pagină. Schimbări neașteptate de aspect apar atunci când conținutul de pe pagină se deplasează fără intrarea utilizatorului sau notificare prealabilă:

Două lucruri pot cauza schimbări de aspect în procesul de preluare și redare:

• Un font alternativ este schimbat cu un font nou (FOUT);
• Un text „invizibil” este afișat până când fontul este redat (FOIT).

Pentru a ataca aceste probleme, puteți implementa unele dintre următoarele bune practici:

1) Combinați link-ul rel=preload și font-display: opțional

Opțiunea de a combina link rel=preload cu font-display: opțional este disponibilă începând cu Chrome 83 și se spune că este o modalitate sigură de a evita schimbările de aspect.

După cum sa menționat anterior, atunci când un font folosește font-display: valoare opțională , are 100 ms pentru a fi descărcat și executat înainte ca browserul să revină la alternativa.

În cazul în care fontul este descărcat înainte de marcajul de 100 ms, fontul personalizat este utilizat pe pagină.

Acest lucru duce la re-rendarea paginii de către browser, ceea ce provoacă, la rândul său, o ușoară pâlpâire a textului invizibil.

În Chrome 83, primul ciclu de randare este eliminat pentru fonturile opționale care folosesc linkul rel=preload și este înlocuit cu o perioadă de blocare (100 ms) până când fontul personalizat s-a încărcat sau perioada se încheie.

Acum, procesul de încărcare a fontului arată astfel când fontul este preîncărcat și descărcat după perioada de blocare de 100 ms:

Și așa când fontul este preîncărcat și descărcat înainte de marcajul de 100 ms:

Această tehnică rezolvă aproape problema cu schimbările neașteptate ale aspectului și intermiterea textelor fără stil.

2) Utilizați ajustarea dimensiunii

O altă problemă cu schimbarea fonturilor este că, uneori, atunci când fontul web se încarcă, schimbă întreaga pagină, deoarece se prezintă la o dimensiune de înălțime a casetei ușor diferită.

Introducerea descriptorului de ajustare a dimensiunii în regula font-face va duce la o schimbare vizuală minimă și la o schimbare aproape fără întreruperi.

Consultați ghidul Google privind ajustarea dimensiunii CSS pentru @font-face pentru a afla cum îl puteți implementa.

3) Faceți ca fontul de rezervă să se potrivească cu fontul dvs. web

Pentru a reduce efectul de schimb, puteți încerca să faceți ca alternativă și fontul web să arate cât mai asemănătoare. Desigur, nu puteți evita schimburile cu totul, dar puteți încerca să le faceți mai puțin impactante, astfel încât să nu dăuneze la fel de mult experienței utilizatorului.

Aplicația Font Style Matcher de Monica Dinculescu este un instrument binecunoscut pentru potrivirea fonturilor.

Vă permite să suprapuneți același text în două fonturi diferite pentru a vedea cât de diferite sunt acestea. După aceea, puteți ajusta setările de font pentru a le alinia mai strâns.

Din păcate, ca orice altă tehnică de optimizare a încărcării fonturilor, are riscurile și obstacolele sale.

Problema cu potrivirea stilului fontului este că nu puteți aplica aceste stiluri CSS numai fonturilor alternative, așa că trebuie să utilizați JavaScript și API-ul FontFace.load pentru a aplica aceste diferențe de stil atunci când se încarcă fontul web.

În prelegerea sa din 2018, Zach Leatherman explică această tehnică mai detaliat:

Asigurați-vă că fonturile dvs. se încarcă cât mai repede posibil (LCP și FCP)

Când vine vorba de încărcarea fonturilor și de îmbunătățirea valorii celei mai mari vopsele de conținut, tehnicile pe care le vom parcurge sunt puțin mai generale.

LCP măsoară timpul necesar pentru încărcarea celui mai mare element de conținut de deasupra foldului (de exemplu, text, imagine). Tot ceea ce este sub 2,5 secunde este considerat un timp LCP bun:

O altă valoare care nu face parte din CWV, dar care ar putea fi totuși afectată de încărcarea fișierelor cu fonturi grele este First Contentful Paint (FCP).

FCP măsoară timpul necesar browserului pentru a vizualiza prima bucată de conținut DOM (de exemplu, bloc de text, imagine, SVG, element de pânză neblank) pe o pagină.

Ambele valori măsoară cât de repede site-ul dvs. pictează elemente din conținutul de mai sus, care joacă un rol important în primele impresii ale vizitatorilor.

Dacă se uită la un ecran gol pentru o perioadă de timp (FCP), aceasta nu ar fi o experiență excelentă pentru utilizator. Același lucru este valabil și pentru a aștepta prea mult timp pentru redarea elementului tău cel mai mare/erou (LCP).

Optimizarea fonturilor dvs. web este o modalitate de a îmbunătăți performanța percepută a site-ului dvs. și de a garanta o experiență mai bună pentru utilizator.

Iată câteva tehnici pe care ați putea dori să le încercați:

1) Comprimați fonturile

Pentru a înțelege cum funcționează compresia fontului, trebuie să cunoașteți anatomia unui font web.

Un font web este o colecție de glife, iar fiecare glif este o formă vectorială care descrie o literă sau un simbol. Deși glifele individuale sunt diferite, ele conțin o mulțime de informații similare care pot fi comprimate.

Pentru a putea aplica compresia corectă, mai întâi trebuie să cunoașteți diferitele formate de font:

• Embedded OpenType (EOT) - Poate fi oferit browserelor IE vechi (sub I9). Nu este comprimat implicit. Puteți aplica compresia GZIP acestui font.
• TrueType (TTF) - Poate fi difuzat browserelor vechi Android (sub 4.4). Nu este comprimat implicit. Puteți aplica compresia GZIP acestui font.
• Web Open Font Format (WOFF) - Poate fi difuzat pentru majoritatea browserelor. Are compresie încorporată.
• Web Open Font Format 2 (WOFF 2) - Poate fi oferit browserelor care îl acceptă. Utilizează algoritmi de compresie personalizați pentru a oferi o reducere de ~30% a dimensiunii fișierului față de alte formate.

Apoi, puteți aplica compresia GZIP (dacă este necesar) utilizând un instrument online sau realizând unele configurații de server.

2) Fonturi inline

În general, fonturile sunt stocate într-o foaie de stil CSS externă. Pentru a utiliza foaia de stil, un link este plasat în eticheta head a marcajului HTML astfel:

Cu toate acestea, rularea fișierelor CSS externe necesită mai mult timp, deoarece browserul trebuie mai întâi să localizeze și apoi să descarce fișierul.

Pentru a accelera procesul de încărcare a fonturilor, puteți introduce declarațiile de fonturi și alte stiluri critice în eticheta head a documentului principal, în loc să le păstrați într-o foaie de stil externă:

Acest lucru va permite browserului să găsească și să înceapă redarea fontului mai rapid, deoarece nu trebuie să aștepte descărcarea foii de stil externe.

3) Asigurați-vă că fonturile sunt descărcate rapid

Pare o dezbatere fără sfârșit atunci când vine vorba de alegerea între fonturi de auto-găzduire sau de a te baza pe terțe părți.

În timp ce fonturile web sunt o opțiune excelentă de auto-găzduire, deoarece sunt resurse statice care nu sunt actualizate în mod regulat, nici bazarea pe resurse terțe nu este o opțiune rea.

De fapt, Almanahul Web a constatat că unele site-uri care folosesc fonturi de la terți aveau o randare mai rapidă decât site-urile care foloseau fonturi de la terți:

Sursa: Arhiva HTTP

La sfârșitul zilei, cel mai important lucru este - cât de repede sunt descărcate și redate fonturile dvs.? Și de cele mai multe ori, răspunsurile nu depind de abordarea dvs. de găzduire, ci mai degrabă de dacă aveți aceste trei lucruri la locul lor sau nu:

• Rețeaua de livrare de conținut (CDN)
• HTTP/2
• Politica de stocare în cache web

Deci, în loc să pierdeți timpul cu întrebări precum „Ar trebui să-mi găzduiesc fonturile web sau nu?”, asigurați-vă că aveți elementele mai importante configurate.

4) Preconectează-te la resurse terță parte

O altă tehnică care va permite încărcarea rapidă a fonturilor dvs. este utilizarea link-ului rel=preconnect .

Utilizați link-ul rel=preconnect resursă indiciu pentru a stabili o conexiune(e) timpurie cu originea terță parte.

Adăugarea linkului rel=preconnect informează browser-ul despre intenția paginii dvs. de a stabili o conexiune la un alt domeniu și că doriți ca procesul să înceapă cât mai curând posibil. Resursele se vor încărca mai repede, deoarece procesul de configurare a fost deja finalizat în momentul în care browserul le solicită.

Sugestiile de resurse ar trebui plasate în eticheta de cap a documentului.

5) Subsetați fonturile

Revenind la faptul că un font web este o colecție de glife, un lucru pe care trebuie să-l știți este că unele fonturi pot include mii de glife. Și adevărul este că site-ul tău nu le folosește pe toate.

Dar…

Browserul mai trebuie să le descarce, ceea ce poate duce la un timp de încărcare mai lent!

Introduceți subsetarea fontului.

Subsetarea fonturilor înseamnă tăierea fonturilor la doar simbolurile pe care le utilizați pe site-ul dvs. Subsetarea poate aduce cantități masive de economii de dimensiune și poate duce la încărcarea mai rapidă a fonturilor și la o performanță generală mai bună.

O modalitate de a face acest lucru este să utilizați fontTools, care vă permite să subsetați fonturile după liste de caractere arbitrare. Dar pentru a o face cu succes și eficient, trebuie să construiți un proces solid pentru a obține fiecare caracter pe care îl utilizați pe paginile dvs. web, ceea ce ar putea să nu fie cea mai ușoară sarcină de făcut.

În curând: după luni de muncă grea, suntem pe punctul de a lansa propria noastră funcție de subsetare a fonturilor. Acesta va permite utilizatorilor NitroPack să-și subseteze automat fonturile și să-și reducă masiv dimensiunile fără a compromite designul sau performanța.

Cum vă poate optimiza NitroPack încărcarea fonturilor și elementele vitale ale web

Îmbunătățirea performanței web poate fi multă muncă și dureri de cap. De aceea, folosirea instrumentelor și serviciilor poate fi cu adevărat utilă.

De exemplu, NitroPack include tot felul de caracteristici diferite care vă vor economisi mult timp atunci când optimizați fonturile:

• CDN global
• Comprimarea GZIP și Brotli
• Compatibilitate HTTP/2
• Încărcarea amânată a fonturilor
• CSS critic

De asemenea, NitroPack vă permite să configurați comportamentul implicit de redare a fonturilor.

Pentru utilizatorii modului Manual, există opțiunea de a înlocui acest comportament din „Setări avansate”:

În plus, în „Setări avansate” veți găsi, de asemenea, opțiunea de a optimiza livrarea CSS:

De asemenea, testăm constant diferite configurații de font pentru a vedea impactul acestora asupra Core Web Vitals și, în cele din urmă, pentru a găsi cea mai bună soluție. De fapt, acest proces de experimentare non-stop, împreună cu ajutorul Speed ​​Insiders, este ceea ce ne permite să oferim clienților noștri rezultate optime CWV:

Și dacă decideți să faceți parte din comunitatea NitroPack, trebuie să știți că nu durează mai mult de 5 minute pentru a-l configura și puteți încerca serviciul nostru cu planul gratuit (nu este necesar CC).