Segur que alguna vegada t’ha passat que, analitzant una URL a PageSpeed Insights , t’has trobat amb aquest problema que apareix als suggeriments de millora. I és que el CSS és una de les parts que sol ser més complicades a l’hora d’alleugerir la web i que no es trenqui res a nivell visual.
Com a agència de SEO , el WPO és un dels camps que més ens agrada treballar, i és per això que hem vist que aquest post pot ser interessant per a molts usuaris.
El Font-display sol afectar els recursos de tipus tipografia amb els seus diferents formats com són:
- .woff
- .woff2
- .otf
- .ttf
I és que de vegades aquests arxius de fonts tipogràfiques poden trigar força a carregar i poden suposar un problema per al rendiment web del site.
Però tan necessari és que això carregui correctament? Bé, pensa que com més arxius estiguin optimitzats, millor serà el rendiment del site.
Índice de contenidos
Localitzant el problema de font-display
Un cop feta aquesta introducció, el més típic és localitzar el problema. Si ens posem a analitzar una URL a Page Speed, trobarem normalment aquest problema (en cas que el tinguem) a la part inferior de l’eina. Justament a l’apartat de Diagnòstics sota el nom de “ Assegureu-vos que el text roman visible mentre es carrega la font web “:
És així com veurem les fonts concretes on Google PageSpeed Insights ens aconsella que hem d’introduir l’atribut font-display perquè el text sigui visible amb més immediatesa durant la càrrega.
Per solucionar el problema, ho podem fer de diferents maneres. I tot això depèn de com s’estiguin fent les trucades a aquest tipus d’arxius de la nostra web.
Com solucionar el problema de font-display de CSS
Des d’un fitxer CSS que truca a la font
En el cas que aquestes fonts siguin anomenades des d’un fitxer CSS amb l’atribut “ @font-face ”, podem utilitzar com s’indica a la pàgina de https://web.dev/font-display/ la funció de “swap” per a aquesta funció font-display. Adjuntem la imatge que es mostra al site:
Amb aquest, estem indicant que el navegador carregui la font de manera immediata i solucionarem el problema existent.
Carregar font amb preload
Una altra manera senzilla de poder fer-ho és fent ús de la càrrega de la font amb el clàssic rel=”preload” on només cal indicar a la ruta de l’arxiu enllaçat des de l’HTML de la web aquest atribut:
<link rel=”preload” href=”/assets/Pacifico-Bold.woff2″ as=”font” type=”font/woff2″ crossorigin>
Principalment, nosaltres hem realitzat el de font-face de l’exemple anterior, encara que aquesta és una altra de les opcions que pots fer segons el site de Web.dev que et porta Page Speed Insights.
Afegir paràmetre a Google Fonts
Com a darrera opció, també podeu fer la prova d’afegir, dins de l’enllaç en HTML de la font en qüestió, l’ ús del paràmetre “&display=swap” perquè les fonts carreguin més ràpid:
<link href=”https://fonts.googleapis.com/css?display=swap&family=Roboto:400,700&display=swap” rel=”stylesheet”>
Com podeu veure, tens diverses opcions per solucionar el problema, tan sols és qüestió de realitzar les diferents variables que t’ofereix Google per solucionar el problema i aconseguiràs millorar aquesta puntuació a l’eina.
Preguntes sobre font-display CSS
És necessari utilitzar les 3 tipologies?
Amb utilitzar 1 de les opcions que recomana ha de ser més que suficient per solucionar el problema.
Funciona amb rutes fonts.gstatic.com o només serveix per a fonts.googleapis.com?
Sota la nostra experiència, normalment les hem hagut d’implementar sota rutes de fonts.googleapis.com, però com que mostren des de Page Speed, ha de valer també per a rutes fonts.gstatic.com.
Hi ha algun plugin per a font-display a WordPress?
Sí, pots instal·lar el plugin de Swap Google Fonts Display que podràs trobar als resultats de cerca de WordPress.
Pots trobar altres tipus sobre WPO al nostre post d’ optimització de temps de càrrega per wordpress .
Esperem que aquest contingut sigui dajuda per al teu projecte. Si t’ha agradat el nostre contingut, no dubtis a compartir perquè ho agrairem!
Sin asignación particular. Artículos redactados por el el equipo de Rodanet. Varias personas del equipo participan en crear los mejores artículos en cooperación y equipo 💪 Porque nos encanta trabajar en equipo 🔝
