Optimizarea Fonturilor Web

Cuprins: arată

Tipografia este fundamentală pentru un design web bun – lizibilitatea, accesibilitatea și branding-ul bine conceput sunt esențiale pentru transmiterea cu succes a mesajului dvs. Fonturile web permit toate acestea, permițând textului să fie selectabil, căutat și zoomabil, oferind în același timp o randare consistentă și clară, indiferent de dimensiunea și rezoluția ecranului.

Cu toate acestea, această experiență îmbunătățită a utilizatorului poate avea un cost de performanță: fiecare font pe care îl utilizați este o resursă suplimentară pe care vizitatorii trebuie să o descarce atunci când vă accesează site-ul, adăugând timpul necesar pentru încărcarea paginilor dvs.

Dar utilizarea fonturilor web nu înseamnă că paginile dvs. trebuie să fie lente. De fapt, optimizarea fonturilor împreună cu o strategie prudentă privind modul în care sunt încărcate și aplicate pe site-ul dvs. poate ajuta la reducerea dimensiunii totale a paginii și la îmbunătățirea vitezei paginii. În plus, optimizarea fonturilor web va îmbunătăți notele Core Web Vitals – în special, metrica CLS.

Ce Sunt Fonturile Web?

Există două tipuri de bază de fonturi utilizate pe web:

Fonturi sigure pentru web: acestea sunt fonturi standard care sunt preinstalate pe dispozitive, inclusiv Times New Roman, Arial și Courier.
Webfonts: Acestea sunt fonturi care nu sunt preinstalate și trebuie descărcate de browser înainte de a fi afișate.

Pentru ochiul obișnuit, fonturile web sunt o colecție de litere ale alfabetului, cel puțin pentru noi cei vorbitori de română. Dar aprofundați și ele sunt de fapt o colecție de glife, iar fiecare glif este o formă vectorială care descrie o literă sau un simbol în multe limbi, nu doar în română.

Două variabile determină dimensiunea unui anumit fișier de font: complexitatea căilor vectoriale ale fiecărui glif și numărul de glife dintr-un anumit font. De exemplu, Open Sans, un font web popular, conține 897 de glife, inclusiv caractere latine, grecești și chirilice.

Găzduire și Livrare de Fonturi Web

Când alegeți să utilizați un font web, acesta trebuie stocat undeva. Există două opțiuni pentru găzduirea fonturilor web:

Auto-găzduire: găzduiți resurse de font pe serverul dvs. web împreună cu restul fișierelor site-ului dvs.
Găzduire terță parte: folosind un serviciu de fonturi precum Adobe Typekit, Fonts.com sau Google Fonts.

Există avantaje și dezavantaje care vin cu fiecare dintre aceste opțiuni. În timp ce folosirea unei soluții terță parte ar putea fi mai simplu de configurat, înseamnă că nu aveți control asupra performanței și securității sau chiar dacă serviciul cade. În 2015, când serverele Typekit s-au prăbușit, site-urile din întreaga lume au fost forțate să se descurce cu Arial și Georgia.

Dar dacă nu sunteți preocupat de întreruperi – Typekit nu a funcționat decât timp de patru ore – viteză sau livrare, găzduirea terță parte ar putea fi opțiunea dvs. preferată dacă nu doriți să vă ocupați de resursele de font auto-găzduite.

Sfaturi Pentru Optimizarea Fonturilor

Optimizarea fonturilor web este un subiect complex și există multe modalități diferite de a optimiza livrarea fonturilor. Exact modul în care vă optimizați fonturile va depinde de preferințele dvs. de găzduire, de designul și serverul site-ului dvs., de abilitățile tehnice și de cât de departe sunteți dispus să mergeți pentru a îmbunătăți performanța fonturilor dvs.

Înainte de a începe optimizarea fonturilor, este o idee bună să știți exact câte folosiți. O modalitate ușoară de a face acest lucru este să vă rulați site-ul prin instrumente de testare a vitezei, cum ar fi GTmetrix sau Pingdom, astfel încât să puteți analiza diagrama waterfall rezultată și să vizualizați solicitările HTTP. Uneori, pluginurile și temele pot folosi fonturi pe care nu le cunoașteți.

Iată câțiva pași pe care îi puteți face pentru a optimiza livrarea fonturilor dvs.

1.Verificați și Monitorizați Utilizarea Fontului

Cu ajutorul browserului pentru regula CSS @font-face acum răspândită, utilizarea fonturilor web personalizate a explodat. Potrivit Arhivei HTTP, 67% dintre paginile web folosesc acum fonturi personalizate, site-urile web având o medie de patru solicitări HTTP pentru fonturi.

Juriul stabilește exact câte fonturi sunt prea multe, deși regula generală este că trei sunt multe și cel mai bine este să rămâneți cu două – unul pentru titluri și unul pentru corpul textului.

Nu numai că reducerea la minimum a numărului de fonturi web pe care le utilizați ajută la reducerea numărului total de solicitări HTTP, dar asigură și un design mai eficient și mai consistent al site-ului. Luați LINGsCARS, de exemplu. Are atât de multe fonturi și alte elemente ridicole încât mă face să-mi pierd concentrarea. Din fericire, folosește doar fonturi sigure pentru web pentru a-l face să se încarce mai rapid.

De asemenea, este important să țineți cont de variații, cum ar fi cursive, aldine și alte ponderi. Fiecare variantă de font adaugă greutate dimensiunii fișierului, așa că încercați să evitați adăugarea celor pe care nu intenționați să le utilizați.

2.Resurse de Fonturi Subset

Dacă nu oferiți traduceri pe site-ul dvs., cel mai bine este să păstrați seturile de caractere la minimum. Aceasta înseamnă livrarea de caractere numai pentru limbile de care aveți nevoie.

După cum explică inginerul Ilya Grigorik de la Google Web Perf, multe fonturi pot fi sub-setate sau chiar împărțite în mai multe intervale Unicode pentru a furniza doar caracterele necesare pentru o anumită pagină. Utilizând @font-face, puteți utiliza descriptorul pentru intervalul Unicode pentru a specifica o listă a valorilor intervalului, care poate fi stabilită în trei forme diferite:

Punct de cod unic (de exemplu, U + 416): indică un singur caracter.
Interval de interval (de exemplu, U+400-4ff): indică punctele de cod de început și de sfârșit ale unui interval de caractere.
Interval de wildcard (de exemplu, U+4??): ? caracterele indică orice cifră hexazecimală.

De exemplu, iată cum ați împărți familia Awesome Font în sub-seturi latine și japoneze, fiecare dintre ele pe care browserul le-ar descărca după cum este necesar de către utilizator:

@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2'),
url('/fonts/awesome-l.woff') format('woff'),
url('/fonts/awesome-l.ttf') format('truetype'),
url('/fonts/awesome-l.eot') format('embedded-opentype');
unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-jp.woff2') format('woff2'),
url('/fonts/awesome-jp.woff') format('woff'),
url('/fonts/awesome-jp.ttf') format('truetype'),
url('/fonts/awesome-jp.eot') format('embedded-opentype');
unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

Grigorik spune că atunci când definiți sub-seturi, este important să optimizați pentru reutilizarea fontului. De exemplu, nu descărcați un set diferit prin suprapunerea de caractere pe fiecare pagină. Este o practică bună să sub-setați pe baza unui script, cum ar fi latină, chirilică etc.

Dacă unicul scop al unui font web Google este acela de a afișa titlul site-ului dvs., iată un sfat: descărcați numai caracterele specifice utilizate în titlu. Puteți face acest lucru adăugând &text= urmat de literele specifice pe care doriți să le descărcați la sfârșitul unei adrese URL a fonturilor Google.

De exemplu, dacă doriți să încărcați cuvântul Blog folosind Montserrat, veți face acest lucru folosind următoarele:

<link href='//fonts.googleapis.com/css?family=Montserrat&text=Blog' rel='stylesheet'>

Acest link îi spune CDN-ului Google Fonts să furnizeze numai litera majusculă B și literele mici l, o și g, ignorând toate celelalte caractere.

3.Furnizați Formate Optimizate de Font pentru Fiecare Browser

Pe web sunt utilizate patru formate de containere de fonturi: EOT, TTF, WOFF și WOFF2.

Embedded Open Type (EOT): Microsoft a proiectat acest format, care acum este folosit doar de browserele IE.
True Type Font (TTF): un format care există de la sfârșitul anilor 1980, care are suport parțial IE.
Web Open Font Format (WOFF): un format dezvoltat în 2009, care este în esență OpenType sau TrueType cu compresie și metadate suplimentare. Se bucură de suport larg, dar nu este disponibil în unele browsere mai vechi.
Web Open Font Format (WOFF2): O îmbunătățire a WOFF care oferă, în medie, o reducere cu 30% a dimensiunii fișierului. Asistența este încă în curs de desfășurare pentru multe browsere.

Din păcate, nu există un singur format care să funcționeze în toate browserele, ceea ce înseamnă că trebuie să furnizați mai multe formate. Atunci când decideți exact ce formate să utilizați, este util să verificați Google Analytics pentru a vedea ce browsere și dispozitive sunt cele mai populare printre vizitatorii dvs.

Dacă vizitatorii dvs. folosesc în mare parte browsere moderne, puteți scăpa cu specificarea a doar două formate, astfel:

@font-face {
font-family: 'Montserrat';
src: local('Montserrat'), local('Montserrat'),
url('fonts/Montserrat.woff2') format('woff2'),
url('fonts/Montserrat.woff') format('woff');
}

Primul format, WOFF2, vă oferă avantajul compresiei suplimentare. Browserul său nu acceptă WOFF2, se întoarce pe WOFF, care are și o compresie bună, împreună cu suport pentru cele mai recente versiuni ale tuturor browserelor majore. Cu toate acestea, nu există suport pentru Opera Mini, IE8 și browserele Android mai vechi. Deși acest lucru ar putea fi o problemă, aceste browsere vor utiliza automat fonturi sigure pentru web.

4.Acordați Prioritate local() în Lista src

Deși vă așteptați ca un vizitator al site-ului să aibă preinstalate fonturi sigure pentru web pe computerul său, este imposibil să se prevadă dacă au deja un anumit font web. Luați-mă ca exemplu. Am zeci de fonturi web instalate pe computer, așa că atunci când vizitez site-uri web, nu sunt nevoit să descarc un font web pe care îl am deja.

Un alt dezavantaj este că un spațiu gol (Flash of Invisible Text, alias FOIT) sau un text fără stil (Flash of Unstyled Content, alias FOUC), este afișat pe măsură ce fontul este încărcat în browser. Acest lucru este absolut inutil pentru utilizatorii care au deja fontul instalat local pe computer.

Modul de a ocoli acest lucru este destul de simplu: utilizați local() pentru a verifica dacă un font este deja în sistemul utilizatorului. Listarea local(‘Nume font’) mai întâi în lista dvs. src asigură că solicitările HTTP nu sunt făcute pentru fonturile care există deja.

5.Puneți Cererea de Font Devreme

În mod implicit, @font-face încarcă lazy fonturile. Aceasta înseamnă că solicitările de fonturi sunt întârziate până după încărcarea conținutului paginii dvs. Acesta este un lucru bun în ceea ce privește viteza și performanța și dacă apreciezi tehnicile de îmbunătățire progresivă.

Dar dacă experiența utilizatorului este o prioritate și nu vă place experiența tulburătoare a FOIT, este posibil să doriți să înlocuiți acest comportament pentru anumite fonturi, cum ar fi textul titlului, de exemplu.

Puteți personaliza încărcarea și redarea fonturilor folosind <link rel=”preload”>, font-display sau API-ul de încărcare a fonturilor.

<link rel=”preload”> spune browserului că va fi nevoie de un font în curând, dar nu spune cum să-l folosească. Iată cum să-l folosești:

HTML:

<head>
<!-- Other tags... -->
<link rel="preload" href="/fonts/awesome-l.woff2" as="font">
</head>

CSS:

@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
url('/fonts/awesome-l.woff') format('woff'),
url('/fonts/awesome-l.ttf') format('truetype'),
url('/fonts/awesome-l.eot') format('embedded-opentype');
unicode-range: U+000-5FF; /* Latin glyphs */
}

În general, cel mai bine este să puneți declarația dvs. @font-face deasupra tuturor etichetelor <script>.

Pentru mai multe despre cum să utilizați font-display, consultați „font-display” al CSS-Tricks pentru Mass.

6.Memorarea Corectă în Cache este o Necesitate

Deoarece fonturile sunt resurse statice care nu sunt actualizate frecvent, acestea pot fi stocate în cache-ul local în browser, economisind astfel utilizatorii care trebuie să descarce din nou fonturile dvs. la următoarea accesare a site-ului dvs. În acest fel, cantitatea de date pe care browserul utilizatorului trebuie să le descarce, precum și numărul de solicitări HTTP sunt reduse.

Ghidul Google Web Fundamentals recomandă să vă asigurați că serverele dvs. furnizează un marcaj de timp pentru durata vârstei maxime ca durată și un simbol de revalidare pentru a permite reutilizarea eficientă a fonturilor între diferitele pagini de pe site-ul dvs. De asemenea, ar trebui să evitați stocarea fonturilor folosind localStorage sau IndexedDB, deoarece fiecare dintre acestea are propriul set de probleme de performanță.

Rețineți că stocarea în cache a browserului poate fi aplicată numai fonturilor pe care le difuzați de pe propriul domeniu sau CDN – nu aveți control asupra stocării în cache a fonturilor furnizate de terțe părți, cum ar fi Fonturile Google etc.

Concluzie

După cum am menționat mai devreme, optimizarea fonturilor web este un subiect extrem de complex. Există atât de multe tehnici pe care le-ați putea folosi pentru a vă livra mai bine fonturile, iar acest articol doar suprafața o acoperă ca să spun așa. Prin urmare, vă încurajez să aflați mai multe și să aflați care metode de optimizare funcționează cel mai bine pentru dvs. și site-ul dvs. web. Optimizând fonturile web, este probabil să îmbunătățiți și Cumulative Layout Shift, unul dintre scorurile Core Web Vitals.

Iată câteva resurse suplimentare de optimizare a fonturilor web.

Web Font Optimization – Google Web Fundamentals
Webfont Options and Speed – varvy.com
Web Font Optimization – NerdWallet
Case Study – Analyzing Web Font Performance – KeyCDN
A Guide on Web Font Optimization in WordPress – Kinsta

Câte fonturi folosești? Te-ai gândit la optimizarea fonturilor web? Lasă un comentariu mai jos!

Optimizarea Fonturilor Web – Ghid Practic pentru Începători