Optimizați fonturile web atunci când încărcați un site web
Adoptarea fonturilor web continuă să accelereze pe Internet. 37% dintre primele 300K site-uri folosesc fonturi web din 2014. Un exemplu de utilizare a Webfonts este The Guardian sau BBC, care se traduce printr-o creștere de 2x + în ultimele douăsprezece luni. Dar există și alte site-uri foarte importante care folosesc fonturi de sistem precum Washington Post, ABC, El Mundo sau El País, deoarece acestea sunt fonturi care se încarcă foarte repede atunci când sunt în sistem. Fontul este deja instalat pe sistemul de operare al dispozitivului. Optimizați fonturile web atunci când încărcați un site web. Știu că ar trebui să folosească Web Fonts?
Fonturile de sistem sunt disponibile pe scară largă, dar asta le face și mai puțin unice. Prin utilizarea unui font personalizat sau cu amănuntul, oferim o experiență mai exclusivă. Tipografia este esențială pentru un design bun, pentru branding, lizibilitate și accesibilitate.
Desigur, acest lucru nu ar trebui să fie la fel de surprinzător ca majoritatea dintre noi. Tipografia a fost întotdeauna o parte importantă a designului bun, a brandingului, iar fonturile de lizibilitate oferă avantaje suplimentare - textul este selectabil, căutabil, mărit și DPI ridicat. Obțineți un text precis și consecvent, care se redă indiferent de dimensiunea și rezoluția ecranului. Fonturile web oferă un design satisfăcător, experiență utilizator și performanță. Prin utilizarea fonturilor web oferim o experiență mai unică. Dacă este vorba și de tipografie corporativă, vom consolida identitatea mărcii noastre.
Dar totul nu este frumos și are un cost. Trebuie luate în considerare posibilele limitări tehnologice și găsirea soluțiilor pentru acestea. Principalele sunt: Nu toate browserele sunt compatibile, timpul de descărcare, consumul de date și calitatea redării când se utilizează dispozitive și browsere vechi. În plus, solicitările de fonturi sunt resurse externe care petrec timp redând browserul atunci când pictează pagina și trebuie să se garanteze că textul alternativ este vizibil în timpul încărcării, evitând fulgerul de text invizibil sau Foit.
În acest ghid vă ajutăm să faceți un pic de cercetare și dezvoltare pentru a lua decizii. Deoarece nu există un răspuns clar la întrebare.
Optimizați fonturile web atunci când încărcați un site web. Știu că ar trebui să folosească Web Fonts?
Răspunsul este că depinde. Dacă doriți identitate de marcă, da. Dar nu ar trebui să permiteți încărcarea mai mult de două sau cel mult trei fonturi personalizate pe pagina dvs. din motive de performanță. De vreme ce se opun WPO-ului paginii și au limitări tehnologice și efecte colaterale. Asta dacă trebuie să fie foarte optimizați.
Optimizarea fonturilor web este o parte critică a strategiei generale de performanță. Fiecare font este o resursă suplimentară și unele fonturi pot bloca redarea textului care provoacă efectul flash al textului invizibil sau Foit.
Folosirea @ font-face pentru a încărca fonturi web personalizate este o caracteristică excelentă a browserelor moderne pentru a oferi site-urilor noastre o estetică unică. În plus, există deja fonturi web de pictograme de rețea socială, case, săgeți, ... care pot evita să încărcați Sprite de imagini pe web. Fiind vector, zoomul nu va afișa pixelii care trec cu imaginile.
Atunci când utilizați fonturi personalizate pe web încărcându-le cu tehnicile standard @ font-face și o adresă URL, poate încetini viteza de încărcare și poate împiedica atât performanța reală, cât și cea percepută de utilizator. Există câteva metode care, aplicate cu atenție, încearcă să minimizeze efectul FOIT și să echilibreze corect gradul de utilizare, performanță și stil, adică vom pierde o oarecare compatibilitate.
În următoarea imagine. Vedem cum un browser încarcă o pagină Web.
Odată ce aflăm că vedem că avem o problemă cu fontul web de câte ori ne aruncă activitatea WPO (Web performance Optimization).
Browserul solicită documentul HTML
Browserul începe să analizeze răspunsul HTML și să construiască DOM
Browserul detectează CSS, JS și alte resurse și procesează solicitările
Browserul creează arborele CSSOM după ce a primit tot conținutul CSS și îl combină cu arborele DOM pentru a construi arborele de afișare
Solicitările de fonturi sunt procesate atunci când arborele de afișare indică ce variante de fonturi sunt necesare pentru a reda textul specificat în pagină
Browserul implementează aspectul și pictează conținutul de pe ecran
Dacă fontul nu este încă disponibil, este posibil ca browserul să nu redea pixeli text
Problema cu @ font-face.
Declarația CSS @ font-face este metoda standard de referință a fonturilor personalizate pe web:
Ușor, dar din păcate, gestionarea implicită a majorității browserelor de la @ font-face este problematică. Când faceți referire la un font web extern folosind @ font-face, majoritatea browserelor vor face ca orice text care folosește fontul să fie complet invizibil în timp ce fontul extern se încarcă.
IE redă imediat textul cu fontul alternativ și revine la acesta odată ce descărcarea fontului este finalizată.
Firefox are redarea fontului timp de până la 3 secunde, după ce folosește un font alternativ și, odată ce descărcarea fontului a fost finalizată, acesta redă textul încă o dată cu fontul descărcat.
Chrome și Safari redau fonturile suspendate până la finalizarea descărcării fontului. Aceasta înseamnă că putem rămâne un Web gol.
Încărcarea lentă a fontului are o implicație ascunsă importantă care trebuie luată în considerare, deoarece poate întârzia redarea textului: browserul trebuie să construiască arborele de afișare, care depinde de arborii DOM și CSSOM, înainte de a ști ce resurse de font va trebui să redea textul.
Prin urmare, cererile de fonturi sunt amânate pentru alte resurse importante, iar browserul poate să nu poată reda text până când resursa nu este recuperată.
Redarea fonturilor necesită, de asemenea, timp în browserul utilizatorului. Dacă aveți un smartphone sau mobil vechi, este posibil să dureze puțin mai mult. Dacă fontul nu este încă disponibil, este posibil ca browserul să nu redea pixeli text. Efect FOIT. Când fontul este disponibil, browserul va picta pixelii textului.
În intervalul dintre prima pictură a conținutului paginii, care se poate face imediat după crearea arborelui de afișare și solicitarea resurselor fontului este locul în care se creează problema textului gol, în care browserul poate reda aspectul paginii și omite textul . Comportamentul real este diferit în funcție de browser:
Chrome, Safari păstrează textul de redare până la finalizarea descărcării fontului.
Firefox va păstra redarea fontului timp de până la 3 secunde, apoi va utiliza un font alternativ. odată ce descărcarea fontului este finalizată, acestea redau textul din nou cu fontul descărcat.