Seguro que alguna vez te ha pasado que, analizando una URL en PageSpeed Insights, te has encontrado con este problema que aparece en las sugerencias de mejora. Y es que el CSS es una de las partes que suele ser más complicadas a la hora de aligerar la web y que no se “rompa” nada a nivel visual.
Como agencia de SEO, el WPO es uno de los campos que más nos gusta trabajar, y es por ello por lo que hemos visto que este post puede ser interesante para muchos usuarios (si te interesa algo más completo, tienes una guía de WPO para optimizar la velocidad de WordPress paso a paso)
El Font-display suele afectar a los recursos de tipo tipografía con sus diferentes formatos como son:
- .woff
- .woff2
- .otf
- .ttf
Y es que a veces estos archivos de fuentes tipográficas pueden tardar bastante en cargar y pueden suponer un problema para el rendimiento web del site.
Pero, ¿tan necesario es que esto cargue correctamente? Bueno, piensa que, cuantos más archivos estén optimizados, mejor será el rendimiento del site.
Índice de contenidos
Localizando el problema de font-display
Una vez hecha esta introducción, lo más típico es localizar el problema. Si nos metemos a analizar una URL en Page Speed, encontraremos normalmente este problema (en caso de que lo tengamos) en la parte inferior de la herramienta. Justamente en el apartado de Diagnósticos bajo el nombre de “Asegúrate de que el texto permanece visible mientras se carga la fuente web“:
Así es como veremos las fuentes concretas donde Google PageSpeed Insights nos aconseja que tenemos que introducir el atributo font-display para que el texto sea visible con más inmediatez durante la carga.
Para solventar el problema, podemos hacerlo de diferentes maneras. Y todo ello depende de cómo se estén realizando las llamadas a este tipo de archivos de nuestra web.
Cómo solucionar el problema de font-display de CSS
Desde un archivo CSS que llama a la fuente
En el caso de que estas fuentes sean llamadas desde un archivo CSS con el atributo “@font-face“, podemos utilizar como se indica en la página de https://web.dev/font-display/ la función de “swap” para esta función font-display. Adjuntamos la imagen que se muestra en el site:
Con este, estamos indicando que el navegador cargue la fuente de manera inmediata y solventaremos el problema existente.
Cargar fuente con preload
Otra manera sencilla de poder hacerlo es haciendo uso de la carga de la fuente con el clásico rel=”preload” donde solo es necesario indicar en la ruta del archivo enlazado desde el HTML de la web este atributo:
<link rel=»preload» href=»/assets/Pacifico-Bold.woff2″ as=»font» type=»font/woff2″ crossorigin>
Principalmente, nosotros hemos realizado el de font-face del ejemplo anterior, aunque esta es otra de las opciones que puedes realizar según el site de Web.dev que te lleva Page Speed Insights.
Añadir parámetro a Google Fonts
Como última opción, también puedes realizar la prueba de añadir, dentro del enlace en HTML de la fuente en cuestión, el uso del parámetro “&display=swap” para que las fuentes carguen más rápido:
<link href=»https://fonts.googleapis.com/css?display=swap&family=Roboto:400,700&display=swap» rel=»stylesheet»>
Como puedes ver, tienes varias opciones para solucionar el problema, tan solo es cuestión de realizar las diferentes variables que te ofrece Google para solventar el problema y conseguirás mejorar esa puntuación en la herramienta.
Preguntas sobre font-display CSS
¿Es necesario utilizar las 3 tipologías?
Con utilizar 1 de las opciones que recomienda debe ser más que suficiente para solucionar el problema.
¿Funciona con rutas fonts.gstatic.com o solo sirve para fonts.googleapis.com?
Bajo nuestra experiencia, normalmente las hemos tenido que implementar bajo rutas de fonts.googleapis.com, pero como muestran desde Page Speed, debe valer también para rutas fonts.gstatic.com.
¿Hay algún plugin para font-display en WordPress?
Sí, puedes instalar el plugin de Swap Google Fonts Display que podrás encontrar en los resultados de búsqueda de WordPress.
Puedes encontrar otros tips sobre WPO en nuestro post de optimización de tiempo de carga para wordpress.
Esperamos que este contenido sea de ayuda para tu proyecto. Si te ha gustado nuestro contenido, ¡no dudes en compartir porque lo agradeceremos!
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 🔝
