Cum să remediați eroarea „Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web” în PageSpeed

Primiți eroarea „ Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web ” în timp ce verificați viteza paginii dvs. Google și nu știți cum să rezolvați această problemă? În general, știu cum să rezolv această problemă pe un site web personalizat bazat pe PHP sau HTML, dar când vine vorba de WordPress, m-am chinuit și eu.

Deci, aici, în acest ghid, vom vorbi despre cum putem rezolva această problemă în WordPress (voi împărtăși, de asemenea, pașii pentru a remedia această problemă pe site-uri personalizate bazate pe PHP și HTML) și vom crește scorul de viteză a paginii prin eliminarea acestei erori.

De ce se afișează eroarea „Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web” în PageSpeed

La testarea site-ului dvs. pe site-ul Google PageSpeed ​​Insight, este posibil să fi observat o problemă cu eroarea „Asigurați-vă că textul rămâne vizibil în timpul încărcării Webfont” și, după ce faceți clic pe eroare, va afișa adresele URL complete ale fișierelor cu fonturi.

După cum puteți vedea în imaginea de mai sus, primesc și eroarea „asigurați-vă că textul rămâne vizibil în timpul încărcării Webfont” pe acest site web, iar când dau clic pe ea, va afișa adresele URL complete ale fișierelor Google Font.

De ce arată o eroare?

Când un site web se încarcă în browser și detectează orice fișier cu font personalizat aplicat unui text, acesta așteaptă până când fontul este descărcat și până în acel moment, textul este invizibil. Odată ce fișierele de font personalizate sunt descărcate, se aplică imediat site-ului web, iar acest lucru este cunoscut sub numele de flash-ul de text invizibil.

Cum să remediați Flash of Invisible Text?

Remedierea fulgerului textului invizibil poate remedia, de asemenea, eroarea „asigurați-vă că textul rămâne vizibil în timpul încărcării fontului Web” de pe site-ul dvs., iar rezolvarea acestei probleme este foarte ușoară.

Puteți rezolva cu ușurință această problemă adăugând

 font-display: schimb;

cod în curentul dvs

 @font-face {

}

proprietate CSS.

Dar ce este @font-face?

Un @font-face este o regulă CSS simplă prin care puteți aplica un font personalizat unui text. Are extensii precum woff2, woff, ttf etc. De exemplu, un cod @font-face va arăta astfel:

 @font-face {

familie de fonturi: Roboto,sans-serif;

font-display: schimb; // ---> Se va rezolva această problemă.

stil font: normal;

greutate font: 400;

src: url(Roboto.woff2);

}

Acum aplicăm acest font într-un paragraf folosind;

 p {

familie de fonturi: Roboto, sans-serif;

dimensiunea fontului: 18px;

}

Când se încarcă un site web, indică faptul că eticheta de paragraf are aplicat un font „ Roboto ” și începe instantaneu să descarce fontul folosit într-o etichetă de paragraf. Până când descarcă fontul, textul rămâne invizibil.

Acesta este motivul pentru care arată eroarea „ asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web ” în viteza paginii și adăugarea font-display: swap; în actualul dvs. @font-face CSS poate rezolva această problemă.

Cum să remediați această problemă în WordPress

Dacă utilizați WordPress și arată această eroare în analiza vitezei paginii, atunci puteți rezolva cu ușurință această problemă folosind pași simpli. Am împărtășit pașii pentru a rezolva această eroare atât pentru fonturile locale, cât și pentru fonturile Google.

Soluție pentru Google Fonts

Inițial, Google Fonts nu va adăuga font-display: swap; regulă la fontul lor, dar acum acceptă un nou parametru de interogare pentru a aplica font-display: swap; prin adăugarea parametrului &display=swap la sfârșitul fișierului de font Google.

Iată cum arată;

Dacă sunteți un dezvoltator de teme sau știți cum să editați fișierele cu tema în WordPress, atunci puteți adăuga cu ușurință parametrul &display=swap în fișierul dvs. de font Google.

Dar dacă nu vă simțiți confortabil cu editarea fișierelor cu tema WordPress, puteți utiliza în continuare diverse plugin-uri precum Asset CleanUp pentru a adăuga acest parametru și a rezolva problema „asigurați-vă că textul rămâne vizibil în timpul încărcării Webfont”.

Cum să rezolvi această problemă utilizând pluginul „Curățire active”.

Pentru a aplica parametrul display=swap în fișierul dvs. Google Fonts, trebuie să descărcați și să instalați pluginul Asset CleanUp din biblioteca WordPress, care este disponibil gratuit.

Odată ce ați descărcat și activat pluginul, faceți clic pe opțiunea „ Asset CleanUp ” din panoul de administrare WordPress > apoi faceți clic pe „ setări ” sub „Asset CleanUp” pentru a deschide pagina de optimizare.

Odată ce sunteți pe pagina de setări , faceți clic pe opțiunea „ Fonturi Google ”. Când faceți clic pe opțiunea Fonturi Google , se vor deschide în continuare setările de unde puteți gestiona cu ușurință diverse setări pentru a optimiza fișierele cu fonturi Google.

Unele dintre aceste setări pot include;

Odată ce sunteți în setările fișierelor de font Google, în setările „ Aplicați font-display: valoarea proprietății CSS ” și schimbați-l din „ Nu aplicați (implicit) ” în „ schimbați (cel mai folosit) ” și va adăuga &display= schimbați parametrul la toate fișierele dvs. de font Google.

Soluție pentru fonturi pentru teme și pluginuri

De cele mai multe ori, tema sau pluginul dvs. WordPress încarcă alte fonturi, cum ar fi fonturi fantastice sau fonturi de pictograme și, de asemenea, arată aceeași problemă în Google PageSpeed ​​Insight.

Aceasta este, de asemenea, o soluție ușoară, dar necesită puține cunoștințe de editare WordPress. Dacă nu vă simțiți confortabil cu editarea codurilor, puteți utiliza și versiunea premium a pluginului „ Asset CleanUp Pro ” pentru a adăuga automat afișajul fontului: swap; Proprietatea CSS în foile de stil pentru tema sau pluginuri WordPress.

Pentru a rezolva această problemă folosind Asset CleanUp Pro, faceți clic pe opțiunea „ Asset CleanUp ” din panoul de administrare WordPress > apoi faceți clic pe „ setări ” sub „Asset CleanUp” pentru a deschide pagina de optimizare.

Odată ce vă aflați pe pagina „ Asset CleanUp ” > „ Setări ”, faceți clic pe opțiunea „ Fonturi locale ” pentru a deschide setările de personalizare pentru Fonturile locale.

Odată ce setările de personalizare „ Fonturi locale ” au fost deschise în browser, selectați „ schimbare (cel mai folosit) ” din opțiunea de selecție dată sub „ Aplicați font-display: valoarea proprietății CSS ” pentru a adăuga automat font-display: swap; în toate foile de stil.

Încheierea

În acest ghid, am încercat tot posibilul să explicăm cum ați putea remedia problema „asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web” sau „flash de text invizibil” în perspectivă privind viteza paginii.

Timpul de încărcare a paginii și viteza paginii sunt factori importanți pentru a oferi experiențe bune pentru utilizatori, iar remedierea acestei probleme poate oferi o experiență mult mai bună pentru utilizator. Și o pagină nu va fi considerată încărcată decât dacă arată fiecare lucru de pe ea.

Deci, trebuie să reduceți timpul de încărcare a conținutului pe pagină, astfel încât paginile să nu expire, iar utilizatorii să poată obține echilibrul, viteza și stabilitatea dorite. Dacă suferiți și de viteza lentă a site-ului, atunci puteți verifica postarea noastră despre optimizarea vitezei site-ului pentru a o optimiza corect.