Fonturile web: cum le încărcați fără să stricați viteza site-ului

Fonturile web: cum le încărcați fără să stricați viteza site-ului este întrebarea pe care mulți proprietari de site-uri o ignoră până când un test de viteză le arată un scor slab exact din cauza fonturilor alese. Un font ales cu grijă din punct de vedere vizual poate încetini o pagină la fel de mult ca o imagine grea, dacă încărcarea lui nu este configurată corect.

Vestea bună este că problema se rezolvă prin câteva decizii tehnice simple, nu prin renunțarea la fontul preferat al afacerii dumneavoastră. Explicăm mai jos exact ce se schimbă și de ce contează fiecare pas.

Fonturile web: cum le încărcați fără să stricați viteza site-ului

Articolul de față trece prin felul în care browserul încarcă un font, prin formatul potrivit, prin alegerea între găzduirea proprie și un serviciu extern precum Google Fonts, și prin pașii tehnici care scurtează timpul de așteptare al vizitatorului.

Exemplele sunt gândite pentru un site construit în WordPress, dar principiile de mai jos rămân valabile pentru orice platformă.

Ce se întâmplă în browser când se încarcă un font

Browserul descarcă întâi codul HTML al paginii, apoi fișierul CSS. Abia din CSS află ce fonturi trebuie aduse separat, printr-o cerere nouă către serverul dumneavoastră sau către un domeniu extern, iar până când fișierul fontului ajunge efectiv, browserul trebuie să decidă ce arată vizitatorului.

Există două comportamente frecvente. Primul se numește flash of invisible text: pagina rămâne cu textul complet ascuns până sosește fontul, iar pe o conexiune lentă vizitatorul vede câteva secunde bune un spațiu gol acolo unde ar trebui să fie titlul sau textul principal.

Al doilea comportament, numit flash of unstyled text, afișează imediat textul cu un font de rezervă, apoi îl înlocuiește cu fontul dorit când acesta ajunge. Este mai puțin frustrant pentru vizitator, dar poate muta ușor elementele din pagină dacă cele două fonturi au dimensiuni diferite pentru aceleași litere.

Ambele comportamente influențează direct indicatorii pe care Google îi urmărește pentru experiența paginii, discutați pe larg în articolul despre Core Web Vitals.

De ce fonturile pot încetini un site

Un font suplimentar înseamnă întotdeauna o cerere în plus către rețea, iar fiecare cerere are un cost de timp, chiar și atunci când fișierul este mic. Problema se adună atunci când sunt încărcate mai multe greutăți ale aceluiași font, de exemplu regular, bold, italic și bold italic, deși pagina folosește de fapt doar două dintre ele.

Cele mai frecvente cauze pentru care fonturi web încetinesc o pagină sunt aceleași pe majoritatea site-urilor:

• Se încarcă patru sau cinci greutăți de font, deși designul folosește efectiv doar una sau două dintre ele.
• Fontul este preluat de pe un domeniu extern, ceea ce adaugă un pas suplimentar de conectare înainte ca fișierul să înceapă efectiv să se descarce.
• Fișierul fontului este într-un format vechi, mai mare decât este nevoie pentru un browser modern.
• Nu există nicio strategie de afișare stabilită, așa că browserul alege singur, de la caz la caz, cum arată textul până sosește fontul.
• Fontul se încarcă și pe pagini unde nu apare deloc în conținutul vizibil, de exemplu o greutate folosită doar într-un șablon rar utilizat.

Fiecare dintre aceste probleme se rezolvă separat, iar secțiunile următoare arată exact cum.

Formatul potrivit: WOFF2 și subsetting

Formatul WOFF2 este astăzi standardul pentru fonturi pe web, acceptat de toate browserele moderne, și oferă o compresie mult mai bună decât formatele mai vechi precum TTF sau chiar WOFF. Trecerea de la un format vechi la WOFF2 reduce de multe ori dimensiunea fișierului la mai puțin de jumătate, fără nicio pierdere vizibilă de calitate.

@font-face {
  font-family: "NumeFont";
  src: url("/fonts/numefont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

Subsetting: doar caracterele de care aveți nevoie

Subsetting înseamnă generarea unui fișier de font care conține doar caracterele folosite pe site, nu întregul alfabet cu toate variantele lui din toate limbile. Pentru un site în limba română este important ca subsetul să includă literele cu diacritice, ă, â, î, ș și ț, altfel acestea apar cu un font de rezervă, vizibil diferit de restul textului.

Un font redus prin subsetting la caracterele latine folosite efectiv poate ajunge la o fracțiune din dimensiunea variantei complete, ceea ce se traduce direct în timp de încărcare mai scurt.

Găzduire proprie sau serviciu extern de fonturi

Un serviciu precum Google Fonts este comod: alegeți fontul, copiați o linie de cod și acesta apare pe site. Comoditatea are însă un preț, fiindcă fișierul vine de pe un domeniu extern, ceea ce adaugă o conexiune suplimentară înainte ca descărcarea propriu-zisă să înceapă.

Găzduirea proprie a fontului, direct pe serverul site-ului dumneavoastră, elimină acest pas și dă control deplin asupra formatului și asupra subsetării. Diferența devine vizibilă mai ales pe conexiuni mobile mai slabe, unde fiecare conexiune nouă către un domeniu diferit costă timp.

• Găzduire proprie: o singură conexiune, control complet asupra formatului și al cache-ului, dar responsabilitatea actualizării fișierelor revine dumneavoastră.
• Google Fonts: instalare rapidă și bibliotecă mare de fonturi, dar o conexiune externă suplimentară și mai puțin control asupra versiunii exacte livrate.
• Pentru un site de prezentare cu trafic mai ales din România, găzduirea proprie aduce de obicei un câștig mai clar decât pe un site cu vizitatori din multe țări diferite.

Multe teme și plugin-uri WordPress permit descărcarea locală a fonturilor de pe Google Fonts printr-un singur clic, fără să fie nevoie de cunoștințe avansate de server.

Strategia font-display, ca să nu mai vedeți text invizibil

Proprietatea font-display din CSS spune browserului ce să facă în intervalul dintre afișarea paginii și sosirea efectivă a fontului. Valoarea swap este cea mai folosită: browserul arată imediat un font de rezervă și îl înlocuiește pe cel dorit când acesta ajunge, evitând complet textul invizibil.

Valoarea optional merge un pas mai departe: dacă fontul nu ajunge suficient de repede, browserul renunță la el pentru vizita respectivă și rămâne la fontul de rezervă, ceea ce este util pentru vizitatorii cu conexiuni foarte lente. Documentația oficială MDN despre font-display descrie pe larg fiecare valoare disponibilă.

Alegerea între swap și optional depinde de cât de important este ca fontul exact al brandului să apară mereu, față de cât de important este ca textul să fie mereu vizibil imediat.

Cum verificați impactul real al fonturilor asupra vitezei

Înainte de a schimba ceva, este util să vedeți exact cât cântăresc și cât întârzie fonturile din site-ul dumneavoastră. Instrumentele pentru dezvoltatori din orice browser modern au o secțiune de rețea, unde filtrați cererile după tipul font și vedeți dimensiunea fiecărui fișier, timpul de descărcare și dacă vine de pe domeniul propriu sau de pe unul extern, precum fonts.gstatic.com pentru Google Fonts.

Un instrument gratuit precum PageSpeed Insights de la Google oferă și o listă separată de recomandări legate strict de fonturi, printre care preîncărcarea resurselor critice și eliminarea resurselor care blochează afișarea inițială a paginii.

Merită urmărit în special indicatorul Largest Contentful Paint, adică timpul până când cel mai mare element vizibil din partea de sus a paginii apare complet, fiindcă acesta este adesea chiar titlul scris cu fontul principal al site-ului. Dacă acest indicator scade vizibil după ce aplicați formatul WOFF2, subsetarea și preîncărcarea, înseamnă că fonturile chiar erau o cauză reală a vitezei mai slabe, nu doar una teoretică.

Preîncărcarea fonturilor critice

Preîncărcarea, prin atributul rel=”preload”, spune browserului să înceapă descărcarea unui fișier important înainte ca acesta să fie descoperit în mod normal din CSS. Pentru fontul folosit în titlul principal al paginii, vizibil imediat la deschidere, această tehnică scurtează timpul până când textul apare cu aspectul final.

<link rel="preload" href="/fonts/numefont.woff2" as="font" type="font/woff2" crossorigin>

Ce fonturi merită preîncărcate și care nu

Preîncărcarea are sens doar pentru fontul sau cele două fonturi vizibile imediat pe ecran, la deschiderea paginii, fără derulare. Preîncărcarea tuturor fonturilor folosite pe site, inclusiv a celor care apar mai jos în pagină, are efectul opus: browserul concurează mai multe fișiere pentru aceeași bandă limitată chiar la începutul încărcării.

O regulă simplă, valabilă pentru majoritatea site-urilor de prezentare, este să preîncărcați cel mult două fișiere de font, cea folosită pentru titluri și cea folosită pentru textul obișnuit.

Greșeli frecvente de evitat

Câteva greșeli revin constant pe site-urile analizate în cadrul unui audit de viteză:

• Încărcarea a șase sau opt greutăți de font pentru un design care folosește efectiv doar două dintre ele.
• Lipsa proprietății font-display, ceea ce lasă browserul să aleagă singur comportamentul, uneori cu text invizibil câteva secunde.
• Preîncărcarea tuturor fonturilor site-ului, nu doar a celor vizibile imediat pe ecran.
• Subseturi de font fără diacritice românești, care fac ca literele ă, â, î, ș și ț să apară cu un font vizibil diferit.
• Amestecarea a două sau trei familii de fonturi diferite din neatenție, fiecare adăugând propria ei cerere de rețea.

Concluzie

Fonturile web nu trebuie sacrificate pentru viteză, dar trebuie încărcate cu atenție: format WOFF2, subsetare cu diacritice românești, greutăți limitate la strictul necesar, o strategie font-display clară și preîncărcare doar pentru fontul vizibil imediat. Aceste decizii tehnice mici se adună într-o pagină care se afișează vizibil mai repede, fără să renunțați la identitatea vizuală a site-ului. Dacă nu știți exact ce fonturi și ce fișiere încarcă în prezent site-ul dumneavoastră, un audit SEO arată clar situația reală, cu cifre concrete de viteză. Corectarea propriu-zisă a modului în care sunt încărcate fonturile ține de partea tehnică a site-ului, iar echipa noastră de web design se ocupă exact de acest tip de ajustări, alături de serviciul de mentenanță website pentru actualizările ulterioare. Subiectul se leagă direct de alte două teme tratate pe blog, alegerea fonturilor potrivite pentru site și impactul general al vitezei asupra SEO, precum și de pașii descriși pentru optimizarea vitezei unui site WordPress. Pentru o discuție despre situația concretă a site-ului dumneavoastră, ne găsiți la pagina de contact.