Preîncărcarea Fonturilor Web

Cuprins: arată

Când vine vorba de optimizarea performanței web, preîncărcarea este un instrument util în arsenalul tău.

Preîncărcarea vă permite să declarați anumite resurse pe care un browser trebuie să le solicite fără a bloca restul redării paginii dvs.

Practic, vă oferă mai mult control asupra modului în care resursele de pe o pagină web se încarcă, ceea ce vă ajută să optimizați performanța site-ului dvs. WordPress și să îmbunătățiți timpii de încărcare percepuți ai paginii.

În acest articol, ne vom concentra pe un aspect specific al preîncărcării – preîncărcarea fonturilor web, cele mai bune practici și cum funcționează.

Veți afla ce este preîncărcarea fontului și cum funcționează. Apoi, vom împărtăși și câteva bune practici pentru preîncărcarea fonturilor web.

Ce Este Preîncărcarea în General?

Vorbim despre preîncărcare în acest articol, dar puteți consulta și acest articol mai cuprinzător:

Când cineva vă vizitează site-ul web, browserul său încarcă toate resursele de pe pagina web într-o anumită ordine, pe care o puteți vedea în fila Rețea din instrumentele pentru dezvoltatori Chrome sau într-un instrument de testare a performanței precum GTmetrix sau WebPageTest:

În mod implicit, browserele web decid cum să încarce aceste resurse în funcție de ordinea în care sunt declarate în HTML-ul site-ului dvs., ceea ce nu este întotdeauna optim din perspectiva performanței și/sau a experienței utilizatorului.

Cu preîncărcare, puteți forța browserele să încarce anumite resurse de la început, cum ar fi fonturile. Acest lucru vă oferă mai mult control asupra modului în care se încarcă site-ul dvs., ceea ce, atunci când este implementat corespunzător, vă permite să îmbunătățiți performanța site-ului.

De Ce Este Importantă Preîncărcarea Fonturilor?

În mod implicit, site-ul dvs. va întârzia solicitările de fonturi până după ce arborele de randare a fost deja construit.

Știu că este puțin tehnic, așa că permiteți-mi să încerc să detaliez în termeni mai prietenoși cu utilizatorul de rând.

În esență, cu comportamentul implicit, un browser va aștepta să încarce fișierul cu font până când începe să „picteze” conținut vizibil pe ecranul utilizatorului. Practic, browserul este leneș să încarce fișierele cu fonturi, astfel încât să înceapă să încarce un anumit font doar odată ce browserul știe că este nevoie de font (știe că fontul este necesar, deoarece trebuie deja să folosească acel font pentru a „picta” textul) Monitorul.

Cu toate acestea, această abordare de încărcare leneșă poate duce la situații în care browserul este gata să înceapă să afișeze text, dar, deoarece nu a descărcat încă fontul, browserul trebuie să întârzie pictarea textului până când a descărcat fontul.

Acesta se numește FOIT sau Flash of Invisible Text. Sau, poate duce, de asemenea la un FOUT, sau Flash of Unstyled Text.

FOIT – textul este invizibil până când fișierul cu fonturi este încărcat.
FOUT – textul este vizibil, dar folosind un font de sistem. Odată ce fișierul cu fonturi se încarcă, textul va trece la noul stil de font, ceea ce poate provoca o experiență tulburătoare pentru vizitatori, deoarece textul pare să „sară” și „se transformă”.

În rezumat, fără preîncărcarea fontului, s-ar putea să vă confruntați cu o situație în care un browser este gata să încarce textul site-ului dvs., dar nu poate, deoarece fontul nu este încă disponibil. Adică, trebuie să descarce fontul înainte de a putea picta textul.

Motivul pentru care trebuie să evitați această situație este că încetinește timpii de încărcare a paginii percepuți pentru vizitatorii dvs., ceea ce duce la o experiență degradată a utilizatorului.

Cu preîncărcarea fonturilor, puteți forța browserul unui vizitator să încarce fonturi importante mai devreme, astfel încât browserul să poată începe să picteze textul imediat ce este gata, în loc să aștepte să încarce fontul.

Preîncărcarea fontului nu spune browserului pentru ce va fi folosit fontul – spune doar „hei, descărcați acest font imediat, astfel încât să fie gata de funcționare”. Apoi, când browserul este gata să înceapă să picteze textul, are deja fontul disponibil și poate începe să afișeze textul imediat.

În plus, preîncărcarea fonturilor abordează recomandarea „Preîncărcare cheie” de la Google PageSpeed Insights și vă ajută să îmbunătățiți valoarea Cumulative Layout Shift și Largest Contentful Paint, două dintre principalele elemente Core Web Vitals.

Cum să Preîncărcați Fonturile pe WordPress

Deși există unele pluginuri care vă pot ajuta să preîncărcați anumite tipuri de fonturi (cum ar fi Google Fonts), metoda manuală de preîncărcare a fonturilor implică adăugarea unui cod în secțiunea <head> a site-ului dvs. WordPress.

Aveți câteva opțiuni pentru inserarea codului în secțiunea <head> a site-ului dvs. WordPress:

Editați direct fișierul header.php al temei copil
Utilizați un plugin gratuit, cum ar fi Insert Headers and Footers.
Utilizați hook-ul wp_head în fișierul functions.php, un plugin personalizat sau ceva de genul pluginului gratuit Code Snippets.

Codul în sine pe care îl veți folosi este următorul:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

rel – acesta îi spune browserului să preîncarce fișierul cu font.
href – acesta este linkul către fișierul fontului real. Va trebui să îl editați pentru a reflecta fontul pe care doriți să îl preîncărcați.
as – aceasta îi spune browserului că preîncarcă un fișier cu font.
type – acesta specifică tipul fișierului font. Va trebui să îl schimbați dacă doriți să preîncărcați un alt tip de fișier.
crossorigin – acest lucru este necesar pentru a satisface o particularitate a preîncărcării fonturilor, pe care o vom menționa mai mult în secțiunile următoare.

De asemenea, puteți preîncărca fonturi cu WP Rocket – este cel mai simplu mod. În fila Preîncărcare, trebuie doar să specificați adresele URL ale fișierelor cu fonturi pe care doriți să le preîncărcați. Simplu ca bună ziua!

Notă:
În acest moment, s-ar putea să vă întrebați care este cel mai bun plugin de cache pentru WordPress. Dacă da, probabil că veți găsi informații utile în articolul nostru dedicat!

Cele Mai Bune Practici Pentru Preîncărcarea și Optimizarea Fonturilor

În continuare, să vorbim despre câteva bune practici pentru utilizarea corectă a preîncărcării fonturilor.

1.Limitați Numărul de Fonturi și Formate pe care le Preîncărcați

Dacă utilizați mai multe fonturi, ar putea fi tentant să preîncărcați fiecare font pe care îl utilizați în fiecare format.

Cu toate acestea, există compromisuri de performanță pentru utilizarea preîncărcării fonturilor.

Cu preîncărcare, forțați, în esență, browserele să facă o solicitare cu prioritate ridicată pentru adresa URL a fontului, indiferent dacă este sau nu necesar. Dacă încărcați fonturi inutile, veți întârzia în mod inutil browserul unui vizitator să încarce restul site-ului dvs.

Pentru a echilibra aceste compromisuri, ar trebui să limitați numărul de fonturi pe care le preîncărcați doar la cele care sunt absolut necesare pentru încărcarea inițială a paginii (adică acele fonturi care sunt necesare deasupra pliului).

În funcție de designul dvs., acesta ar putea fi doar fontul pe care îl utilizați pentru titlurile dvs. Sau, ar putea include și fontul pe care îl utilizați pentru corpul textului.

În plus, trebuie să limitați și formatele pe care le preîncărcați. De exemplu, preîncărcați doar formatul obișnuit, dar nu și formatele italice sau aldine.

Este mult mai puțin supărător să ai un FOUT doar pentru textul tău cursiv sau aldine, deoarece aceste formate reprezintă probabil doar o mică parte a conținutului tău.

Practic, trebuie doar să preîncărcați fonturile care vor avea un efect vizibil asupra experienței de deasupra paginii site-ului dvs.

2.Asigurați-vă că Fonturile Preîncărcate se Potrivesc cu CSS-ul dvs.

Dacă încărcați fonturi de la un serviciu CDN extern (cum ar fi Fonturi Google sau Fonturi Adobe), aveți grijă ca fișierele cu fonturi pe care le preîncărcați să corespundă fonturilor solicitate în CSS.

Este posibil ca fontul de pe CDN să fi fost actualizat, ceea ce poate duce la o situație în care ajungeți să preîncărcați o versiune diferită a fontului decât ceea ce se cere în CSS. Acest lucru poate duce la o situație sub-optimă în care de fapt forțați browserele vizitatorilor să descarce două versiuni ale aceluiași font.

Pentru a evita acest lucru, puteți găzdui și fonturile personalizate local, dacă este posibil.

Pluginul gratuit OMGF vă poate ajuta să găzduiți local Fonturi Google pe WordPress. De asemenea, vă poate ajuta automat să preîncărcați numai fonturile care sunt încărcate deasupra plierii.

Știați că WP Rocket optimizează fonturile Google în mod implicit?

3.Asigurați-vă că Utilizați Atributul Crossorigin

Când preîncărcați fonturi, este important să setați un atribut de origine încrucișată chiar dacă preluarea nu este de origine încrucișată. Puteți vedea acest lucru în exemplul de cod:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Deși motivul pare complex, rezultatul final este că browserele vor ignora fonturile preîncărcate fără atributul crossorigin, ceea ce va face ca browserul să preia fontul de două ori (o dată în timpul preîncărcării și apoi altă dată după eliminarea fontului preîncărcat).

Notă:
Preîncărcarea fonturilor este unul dintre sfaturile SEO pentru a îmbunătăți Core Web Vitals. Citiți articolul nostru și descoperiți toate celelalte bune practici!

Începeți Preîncărcarea Fonturilor WordPress Astăzi

Folosită inteligent, preîncărcarea fonturilor vă poate ajuta să accelerați cât de repede este capabil site-ul dvs. să afișeze conținut text vizibil, ceea ce crește timpii de încărcare percepuți ai paginii site-ului dvs.

Economisiți timp și lăsați WP Rocket să facă treaba în locul dvs.!

Ca alternativă, va trebui să adăugați un cod în secțiunea <head> a site-ului dvs.

Deși preîncărcarea fontului poate îmbunătăți performanța site-ului dvs., trebuie să:

Limitați fonturile și formatele pe care le preîncărcați doar la fonturile esențiale de deasupra paginii.
Asigurați-vă că fonturile dvs. se potrivesc cu CSS-ul dvs. dacă utilizați un CDN de font precum Fonturile Google.
Specificați întotdeauna atributul crossorigin pentru a evita preluarea dublă a fișierelor cu fonturi.

Pentru alte modalități de a îmbunătăți modul în care utilizați fonturile pe site-ul dvs., consultați articolul nostru complet pentru optimizarea fonturilor web.

Preîncărcarea Fonturilor Web – Cele Mai Bune Practici și Cum Funcționează