Odată, fiecare site utilizează numai fonturi ca Arial pentru afișarea textului. Verdana. Garamond sau Times New Roman. deoarece numai aceste fonturi au fost probabil instalate pe aproape orice computer. Dar aceste vremuri sunt în spatele nostru. Fonturile web sunt distribuite pe Internet, dar încă nu știm cum să le încărcăm mai eficient.
- Utilizăm fonturi numai în formatul woff
- Alte browsere primesc fonturi vechi "în siguranță"
- Descărcați fontul în format binar și optimizați-l
- Dați fonturile singure
- Le oferim ca fișiere CSS - URI cu date encoded base64
- Dacă utilizatorul nu are un font, încărcați-l în mod asincron și păstrați-l în localStorage
- Altfel, îl încărcăm din localStorage fără a accesa serverul.
- Suntem bucuroși că site-ul dvs. este afișat mult mai rapid și utilizatorii dvs. beneficiază de mult mai multă comoditate
Pentru cei care încă citesc, aici sunt explicațiile mele, despre punctele de top.
Dacă nu aveți încredere în această optimizare, am făcut două pagini demo. Doar le testați și aruncați o privire la modul în care sunt încărcate, ce este blocat și ce nu este.
1. Suport pentru browser
Potrivit caniusei. 84% din browserele utilizate acceptă formatul Woff. Excepție sunt vechile browsere - IE8 și browserele încorporate de androizi vechi. Prin urmare, este suficient să furnizați fonturi web doar pentru browserele moderne cu suport pentru formatul Woff. Și browserele mai vechi pot fi mulțumite cu o soluție de rezervă, de exemplu, sub forma unui font Arial. Și, de asemenea, utilizatorii vor fi recunoscători pentru faptul că site-ul dvs. este afișat mai repede în browser. Încercați să găsiți ceva care este mai potrivit pentru designul site-ului dvs.
2. Nu utilizați surse externe de fonturi, cum ar fi fonturi Google și Typekit
Ele cauzează fie multe solicitări de blocare suplimentare, fie intermitente intermitente în timpul încărcării asincrone. Puțin mai târziu vom vedea modalități mult mai bune de a încărca fonturile web.
3. Necesitatea licenței
Alegeți cu atenție fontul pe care îl descărcați pentru dvs. Din păcate, nu toate licențele permit acest lucru. Dar, din fericire, mulți îi permit - ca și celor cu sursă deschisă. De exemplu, cum ar fi Open Sans sau Source Sans Pro. Când selectați un font, descărcați fișierele "binare" (formate otf sau ttf)
4. Optimizați, reduceți dimensiunea, generați CSS
Haideți: generatorul de fonturi web Font Squirrel.
Este important să selectați opțiunea corectă pentru a genera un fișier CSS. care conține fonturi codificate în baza64. Acesta va fi fișierul de care aveți nevoie.
5. Returnați fișierul CSS
Fișierul poate fi destul de mare (până la 100-300kb), în funcție de alegerea codărilor și a altor opțiuni. Prin urmare, este important să comprimați corect fișierul utilizând gzip și să setați cache-ul strict atunci când acesta este primit de utilizatori.
Din fericire pentru utilizatorii dvs., va trebui să le oferiți acest fișier o singură dată. Prima dată când utilizatorul nu are acest font, browserul îl va încărca în mod asincron și îl va pune în localStorage. În acest moment, utilizatorii cu o conexiune lentă pot vedea cum browserul redă fonturi "de rezervă" în fonturile dvs. web, dar nu se întâmplă de mai multe ori. Și majoritatea utilizatorilor nu observa nimic.
Începând cu încărcarea celei de-a doua pagini, veți încărca doar un fișier CSS din localStorage. Care este încărcat destul de repede (5-50ms). Utilizatorii nu vor vedea chiar pâlpâirea, deoarece toate acțiunile sunt sincrone, dar vor necesita doar câteva milisecunde.
6. Arată-mi codul
După ce am salvat fișierul în localStorage, această metodă are nevoie de cod numai din partea clientului. Aici luați:
7. Ce am realizat
- Eliminat cel puțin una, dar cel mai probabil o mulțime de cereri de blocare
- Un maxim de pâlpâire la utilizator, în timpul înlocuirii fontului "de rezervă" pe fontul web (prima vizită, prima solicitare)
- Timp accelerat afișat pe prima pagină a interogării
- Indicatori de viteză îmbunătățiți în Google Page Speed Insights și WebPageTest.org
8. Consultați-o în acțiune
Utilizatorul Twitter @Kseso, mi-a informat despre o altă abordare, care primește și 99/100 de puncte în Google Page Speed Insights.
Mă opun acestei abordări, deoarece întârzie afișarea textului mult timp. Deci, să aruncăm o privire mai atentă la ceea ce se întâmplă în această metodă.
- Definim imediat o familie de fonturi într-un fișier HTML obișnuit:
- Browserul nu va primi fișierul de fonturi până când nu este sigur că acest font este în general necesar undeva pe pagină.
- Browserul va aștepta construcția finală a DOM și CSSOM
- Browserul va primi un fișier de fonturi din Fonturile Google (rețineți că fonts.gstatic.com necesită o cerere suplimentară DNS).
Această cronologie arată modul în care browserul începe să descarce fișierul de fonturi chiar înainte de evenimentul DOMContentLoaded.
- Numai IE va începe să se afișeze imediat cu fonturi "de rezervă"
- Firefox și Chrome35 + așteptați încărcarea completă a fontului timp de trei secunde (apoi afișați fontul "de rezervă")
- Safari și Chrome înainte de cea de-a 35-a versiune sunt în așteptare pentru o descărcare completă a fonturilor fără nici un timp de expirare.
Prin urmare, în cazul conexiunilor lente, veți întârzia afișarea conținutului de text de până la 3 secunde în majoritatea browserelor. În cel mai rău caz, dacă fontul este prea lung pentru a fi încărcate (de exemplu, din cauza conexiunii mobile săraci), utilizatorii Safari nu văd conținutul text și lasă doar pagina ta. Utilizatorii pot vedea pagina albă înainte de expirarea timpului de expirare.
Mai multe informații găsiți în blogul lui Ilya Grigorik.
Am creat și o pagină de test. unde puteți verifica-l singur.
P.S. Și asta poate fi interesant:
Base64 poate fi folosit numai atunci când fontul trebuie să fie exact pe pagină. Aparent, despre asta și a scris "Kseso". În caz contrar, fișierul de fonturi se va încărca în orice caz, este utilizat pe pagină sau nu. În acest caz, base64 cântărește de obicei mai mult decât fișierul woff original.
După cum am înțeles, omul care apasă de fapt încărcat fișierul va fi doar prima pagină și în viitor va fi luată nu din cache, și de la localStorage (în general, 304th răspuns fără o cerere la server și așteptările, adică aproape instantaneu). Deci, chiar dacă nu este necesar imediat, de îndată ce este necesar, acesta va fi disponibil imediat, fără a provoca o a doua așteptare (mai ales în vebkityatah rău, în cazul în care în timpul acestui text de așteptare apare alb pe alb). Și diferența în dimensiunile fișierelor este destul de bine egalizată de gzip.
Personal, aceste argumente mă conving mai degrabă :)
Apoi, trebuie să fii absolut sigur că utilizatorul va ajunge la pagina cu fontul.
Au trecut mai puțin de șase luni de la ultima modificare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...