Optimizar fuentes de Google Fonts en WordPress

Cómo optimizar las Google Fonts en WordPress

¡Muy buenas querido lector! Ya estoy una semana más por aquí y, como siempre, te traigo un nuevo post que en el que te voy a hablar sobre como optimizar las Google Fonts y otras tipografías en WordPress.

Por este motivo, el post de hoy hablará sobre WPO y optimización WordPress para que este sea lo más ligero posible ya que las tipografías/fuentes son uno de los principales motivos por los que una página web se vuelve lenta.

Es decir, que si tienes una página web en WordPress y utilizas las famosas Google Fonts (Como el 90% de páginas web) hazme caso, sigue leyendo este post y aprende a optimizar este punto crítico a nivel WPO que muchas páginas web no saben solventar.

No me entretengo más que hay mucho que contar para conseguir el ansiado 100% en el Page Speed Insight de Google.

¡Al lío!

¿Cuál es el problema de las Google Fonts? ¿Por qué debo optimizarlas?

Existen varios aspectos que has de saber a la hora de implementar cualquier tipografía personalizada o Google Font en tu página web.

Cada vez utilizas una Google Font en tu página web realizas una petición a los servidores de Google desde tu página web para obtener el formato de la fuente.

¿Cuál es el problema?

Que los servidores de Google no siempre entregan las fuentes o tipografías rápidamente y esto ralentiza la velocidad de carga de la página web.

Por lo tanto, al utilizar las Google Fonts no solo haces una petición externa a otro servidor sino que encima dependes en todo momento de un recurso externo para que tu página web se visualice correctamente.

Esto hace que dependas en todo momento de los servidores de Google para que tu página sea útil al usuario ya que sino se cargan dichas fuentes (Por el motivo que sea) tu página web carecerá de un buen renderizado dificultando la visualización de la web al usuario.

Como podrás suponer, esta mala experiencia de usuario es penalizada por Google y con razón.

Si, lo se, se lo que estás pensando…Tiene narices que Google te penalice por utilizar sus recursos…

Cómo optimizar las fuentes de tu página web. Los métodos que existen

La mayoría de métodos empleados a la hora de optimizar un fuente/tipografía en una página web WordPress, etc se basa en dos premisas fundamentales:

  1. Alojar las tipografías de forma local para no tener que depender de nadie y no realizar una petición a un servidor externo no controlable.
  2. Mostrar las tipografías de forma «Swap». Es decir, que en un primer instante y hasta que se cargue la fuente completamente el contenido siempre estará visible para el usuario aunque sea en una tipografía predeterminada (De las que aceptan todos los navegadores) y menos bonita.

Bien, una vez dejado claro cuales son los dos pilares fundamentales sobre los que se basa la optimización de tipografías web vamos con la implementación de ellos en WordPress:

Optimizando tus tipografías de forma manual

El primer método (Y menos recomendable) será subir tus tipografías de forma manual a tu WordPress vía FTP y mediante CSS hacer que toda tu página web se base en dicha tipografía.

Utilizar este método en una página web que no esté creada en un CMS como WordPress o similares estará genial.

Ahora, si tu página web es WordPress lo mejor será utilizar uno de los plugins ya existentes en el repositorio de WordPress para esta tareas y no complicarse la vida.

Optimizando fuentes con el plugin para WordPress Use Any Font

El plugin Use Any Font de WordPres se creó originalmente para que un usuario cualquiera (Sin amplios conocimientos técnicos) pudiese utilizar en su página web la tipografía que quisiera y no tuviera que depender de las fonts de Google.

Sin embargo, este plugin se sitúa como una buena opción no solo para utilizar cualquier tipo de tipografía sino que encima aloja las fonts en local y te ofrece una serie de opciones para optimizar la entrega de dichas fuentes y así aligerar la carga de tu página web.

Sin duda, si no quieres optar por una Google Font y quieres optimizar la entrega de tu tipografía personalizada te recomiendo que utilices este plugin.

Optimizando fuentes con el plugin para WordPress Self-hosted Google Fonts PRO

Este es el plugin de WordPress que yo mismo utilizo para alojar mis fuentes (Siempre que sean Google Fonts) dentro de mi página web (En local).

Su configuración es sencilla. Basta con activar el plugin y activar la opción de alojar fuentes en local.

Otra característica interesante de este plugin es que te permite seleccionar como deseas mostrar dichas fuentes en cuyo caso siempre te recomendaré utilizar la opción «Swap» como te he comentado anteriormente.

Además, este plugin tiene muchas más opciones interesantes que puede que te interesen. Sin embargo, con que las opciones que te he comentado anteriormente estén activadas su configuración por defecto será más que suficiente para que tu página web tenga optimizadas sus tipografías.

Optimizando tus tipografías con Elementor

Este es el peor método de todos (O al menos el más laborioso bajo mi punto de vista) de optimizar las fuentes de tu página web.

Elementor ofrece una opción o funcionalidad extra para poder subir tus propias fuentes o Google fonts a local.

Sin embargo, este método tiene un inconveniente y es que para que estas fuentes se visualicen correctamente en tu página web has de entregar todos los formatos de la tipografía disponibles teniendo que utilizar para ello herramientas online como convertio.co.

Por lo tanto, este método solo lo recomiendo si no deseas agregar ningún plugin extra a tu WordPress.

¿Cuál es el método que yo recomiendo?

Sinceramente y pese a que todos los métodos que te he enseñado a lo largo del post son igual de válidos ya que basan su funcionamiento en un mismo patrón yo utilizo el plugin Self Hosted Google Fonts PRO.

De todos modos, no te preocupes ya que como te he comentado todos estos plugins utilizan un mismo método: Alojar las tipografías de forma local en tu página web y hacer siempre que el contenido sea visible (Con una fuente predeterminada) mientras se carga la tipografía que deseas.

Esta última característica será especialmente importante cuando un usuario desee consumir tus contenidos desde su móvil con una mala conexión ya que aunque no disponga de una buena conexión el usuario podrá consumir tus contenidos aunque sea de una forma «no bonita».

Conclusiones

Cómo has visto a lo largo del post, optimizar las fuentes de tu página web supondrá una mejora significativa en cuanto al rendimiento de tu web en internet.

Por lo tanto, yo que tu no dejaría escapar esta oportunidad de optimizar cada palmo de mi página web ya que como sabrás, desde que Google sacó sus Core Web Vital está claro que el camino por el que está optando Google actualmente es por el de crear páginas web super rápidas que carguen el menor número de elementos posibles.

Por todo ello, no te olvides de optimizar tu WPO siempre que lances un proyecto web ya que como has visto no es demasiado complejo y puede suponer un extra más para tu página web.

¡Nos vemos en dos semanas!

Borja Aranda Vaquero 01

Artículo escrito por:

Borja Aranda Vaquero

¡Hola! Me presento. Me llamo Borja y soy un consultor SEO y diseñador web especializado en WordPress.

Portada e-book sobre SEO, WPO y CRO
¡Suscríbete!

Y consigue un ebook con un truco de WPO te hará conseguir el 100/100 en PageSpeed en 2 clicks.

¿Necesitas ayuda con tu WordPress?

Si tu página web es lenta o no sabes como desarrollar cierta funcionalidad en tu página web ¡Escríbeme!