În acest curs veți vedea 5 sfaturi pentru optimizarea performanței atunci când utilizați fonturile Google cu WordPress.
Folosirea adecvată a tipografiei pe un website poate avea un impact pozitiv asupra conversiei. Alegerea fonturilor potrivite și optimizarea acestora este crucială. Google Fonts este foarte popular, întrucât fonturile sunt bine concepute și pot oferi o personalitate aparte website-urilor. Trebuie să țineți cont că, utilizate necorespunzător, fonturile pot afecta performanța site-ului vostru. Acestea fiind spuse, haideți să vedem care sunt sfaturile pe care trebuie să le luați în considerare atunci când utilizați fonturile Google în WordPress.
Fonturile Google și performanța website-ului în WordPress
Google Fonts deține peste 1300 de familii de fonturi pe care le pune la dispoziția utilizatorilor, gratuit, indiferent de scopul folosit. Chiar dacă sunt regăsite pe milioane de site-uri WordPress, ele reprezintă o modalitate excelentă de îmbunătățire a designului unui website. Fonturile Google extrase de pe internet nu au aceeași viteză ca cele din sistemul calculatorului (cele instalate pe computerul vostru). Timpul de încărcare a fonturilor Google are un impact mai mic asupra performanței site-ului vostru decât fișierele mai mari, precum imaginile sau alte elemente. În final, este de așteptat ca fonturile să ocupe mai puțin spațiu decât imaginile. Fonturile trebuie optimizate întrucât, în acest fel este îmbunătățită viteza de încărcare a site-ului vostru.
Din fericire, există mai multe modalități de optimizare a performanței atunci când utilizați fonturile Google cu WordPress.
1. Folosiți mai puține fonturi
Cel mai bine este să folosiți cât mai puține fonturi. În mod ideal, puteți folosi două perechi de fonturi pentru a obține cele mai bune rezultate. Atunci când vorbim de fonturi, ne referim, implicit, la familiile de fonturi. Când ne referim la un tip de font, trebuie să ținem cont că fonturile includ mai multe variații, printre care simboluri, numere sau forme specifice. Acestea poartă numele de glyphs.
De cele mai multe ori, fonturile includ variații, cum ar fi subțire, îngroșat, mediu, semi-aldine, aldine, și multe altele. Fiecare dintre acestea este un font diferit în cadrul familiei de fonturi. Când utilizați o familie de fonturi, încărcați și toate variațiile acesteia. De exemplu, Roboto este un font popular folosit pentru site-uri în zilele noastre. Familia de fonturi Roboto are 12 seturi de fonturi, a câte 282 de glife fiecare. Acestea fiind spuse, țineți cont de faptul că dacă utilizați mai multe familii de fonturi, este posibil să utilizați zeci de mii de fonturi.
2. Găzduiți fonturile Google pe serverul vostru WordPress
Există posibilitatea să descărcați și să găzduiți fonturile Google pe serverul vostru WordPress. În acest fel, tipografia site-ului va fi livrată utilizatorului din aceeași locație cu site-ul. Site-ul web nu va trebui să solicite fișierele cu fonturi din altă parte, iar pagina se va încărca mai repede atunci când este accesată de utilizator.
Când selectați un font pe site-ul Google Fonts, veți vedea că este disponibilă o opțiune pentru descărcare. Descărcați familia de fonturi și apoi încărcați-le prin FTP în folderul de conținut/încărcări. Pentru a le folosi, faceți referire la adresa URL/fonts/FONT_FILE_NAME.file-extension. Având în vedere toate aceste aspecte, încărcați doar fonturile și variațiile de care aveți nevoie. Nu folosiți toate opțiunile posibile. Utilizați formatele TTF, EOT, WOFF și WOFF2 pentru fiecare font..
3. Preîncărcați fonturile Google
Fonturile Google sunt de obicei extrase din CDN-ul Google. Desigur, acesta este un server rapid, dar fonturile sunt, de obicei, extrase târziu în procesul de încărcare a unui site web. Dacă există o problemă de conexiune și fonturile nu sunt descărcate, pagina va fi redată folosind fonturile de sistem generice. Apoi, odată ce fonturile au fost descărcate, pagina va fi redată din nou. Pe scurt, pagina se încarcă cu un font, apoi fontul se schimbă. Acest lucru este cunoscut sub numele de flash de text fără stil (FOUT). Deși este o variantă mai bună decât să așteptăm ca pagina să se încarce, nu este nici opțiunea ideală.
O modalitate de a rezolva această problemă este să preîncărcați fonturile. Preîncărcarea fonturilor Google reduce, de asemenea, timpul de încărcare a paginii cu aproximativ 100 ms. Motivul pentru asta este încărcarea DNS, TCP și TLS în paralel cu fișierul CSS Google Fonts.
4. Optimizați fonturile Google cu un plugin WordPress
La fel ca și în cazul altor aspecte referitoare la WordPress, pluginurile facilitează optimizarea fonturilor Google. Există o mulțime de pluginuri grozave care vă pot optimiza fonturile Google. Unul deosebit de interesant și eficient este OMGF. Acesta este special conceput pentru a optimiza fonturile Google pe care le utilizați deja. La fel ca multe alte pluginuri Google Fonts, acesta are atât o versiune gratuită, cât și una premium. Versiunea gratuită include doar setări manuale, care pot fi adesea dificile. Configurarea acestora nu este greu de realizat. Versiunea gratuită este benefică pentru început, însă, pentru a atinge cele mai bune rezultate, este de recomandat versiunea premium.
Pluginul reține fonturile în memoria cache și apoi poate găzdui fonturile Google local.
Puteți înlocui sau elimina fonturile din setări. Acest lucru poate fi util, în special, după o reproiectare, astfel încât să nu fie încărcate resurse vechi care nu vor fi niciodată livrate utilizatorilor voștri.
5. Utilizați integrarea fonturilor Google cu modulele Divi
600 de fonturi Google sunt integrate în toate modulele Divi care folosesc text și sunt disponibile atât în tema Divi, cât și în pluginul Divi. Ele sunt optimizate pentru a genera cea mai bună performanță și design posibil. Alegeți familia de fonturi și stilul, iar apoi personalizați-le dimensiunea, culoarea, înălțimea liniilor, distanța dintre linii și toate dimensiunile titlurilor, în mod individual.
Fonturile Google sunt stocate în memoria cache și numai fonturile utilizate sunt încărcate în modul. Acest lucru împiedică browserul să încarce variații de font care nu sunt necesare.
Există câteva setări Google Fonts în opțiunile temei Divi, în fila General > Performance tab. Ambele sunt activate implicit. Îmbunătățiți încărcarea fonturile Google. Aveți la dispoziție și o opțiune numită “Limit Google Fonts Support For Legacy Browsers”. Aceasta reduce dimensiunea fonturilor Google pentru a îmbunătăți timpul de încărcare. Dezavantajul este că suportul pentru fonturi Google este limitat în unele browsere mai vechi. În final, este de recomandat să apelați la serviciile de web design ale firmelor specializate pentru a vă asigura că beneficiați de un website complet și optimizat corespunzător. Equal Web Design vă stă la dispoziție pentru a vă ajuta nu doar în ceea ce privește alegerea anumitor elemente de design precum: fonturile, culorile, logo, elementele media, etc, dar și pentru optimizarea paginilor voastre. Pentru mai multe detalii legate de optimizare puteți accesa articolul nostru intitulat Google SEO – secretele motoarelor de căutare.
