¡Muy buenas querido lector! Ya estoy una semana más por aquí y, como siempre, te traigo un nuevo post en el que te mostraré cómo optimizar las fuentes de tu WordPress.
Por este motivo, en el post de hoy hablaré sobre WPO con el fin de que consigas optimizar tu WordPress de la forma más óptima posible sin la ayuda de un consultor WPO.
Ten en cuenta que las fuentes y tipografías de un WordPress son uno de los elementos más pesados de cualquier página web desarrollada con el gestor de contenido WordPress.
Por todo ello, en esta guía te mostraré cómo optimizar las fuentes o tipografías de tu WordPress y, además, te mostraré cómo optimizar las fuentes de Google (Google Fonts) dentro de tu página web cómo haría un diseñador WordPress profesional.
Por lo tanto, no me entretengo más que hay mucho que contar.
¡Al lío!
¿Por qué será importante optimizar las fuentes de tu WordPress?
Básicamente deberás optimizar las fuentes de tu WordPress por que estas son uno de los componentes más lentos de cualquier página web.
Además, con la llegada de las Core Web Vitals de Google optimizar las tipografías de WordPress será fundamental para conseguir una buena nota en la herramienta de Google Page Speed.
De hecho, una mala optimización de las fuentes de tu WordPress provocará que estas Core Web Vitals nunca sean positivas.
¿Es necesario optimizar las Google Fonts?
¡Y tanto que que si es necesario hacerlo!
Las Google Fonts (Tan utilizadas en todas las páginas web WordPress) son a día de hoy uno de los principales motivos por los que muchas páginas web suspenden sus test de velocidad web.
Esto se debe a que la gran mayoría de webmasters no saben cómo optimizar las Google Fonts de sus páginas web.
De hecho, estas Google Font ralentizan las páginas web puesto que para cargarse necesitan realizar una petición externa desde tu página web a los servidores de Google provocando así una gran ralentización de la velocidad de carga de tu página web.
Por este motivo, hoy también aprenderás ha optimizar las fuentes de Google en tu WordPress.
[GUÍA] Cómo optimizar las fuentes de WordPress
Bien, vamos con lo que realmente te interesa, cómo optimizar las fuentes de tu página web WordPress.
Para llevar a cabo esta optimización deberás seguir estos pasos:
Utilizar fuentes ligeras
Cuanto más pese una tipografía utilizada en tu página web más tardará esta en cargar la página.
Por lo tanto, utiliza tipografías ligeras en tu WordPress.
¿Cómo sabrás si una fuente es ligera?
- Si te la descargas la fuente desde el portal oficial de Google Fonts podrás saber el tamaño del archivo directamente.
- Si esta fuente ya se encuentra alojada en tu página web bastará con utilizar una herramienta de medición como GTmetrix que te indicará el tamaño de cada recurso cargado en una URL en concreto.
Reduce al mínimo el número de fuentes
Cuantas más tipografías emplees en tu página web más recursos se deberán cargar.
Por lo tanto, utiliza un máximo de dos tipografías por página web e intenta utilizarlas siempre en el mismo grosor (No con diferentes variantes tipo 300, 400, bold, thin, etc).
Utiliza la precarga tus peticiones externas
Una forma de mejorar un pelín la velocidad de carga de tu página web será mediante la precarga de tipografías.
Esta precarga lo que hará será priorizar la carga de recursos web que tu indiques antes de ponerse a cargar el resto de archivos que compondrán el diseño de una URL de tu página web.
Es decir, será como priorizar la carga de un elemento dentro de tu página web.
Preconecta el dominio de tus fuentes externas
La preconexión de dominios de fuentes externas provocará una mejora leve (Pero mejor al fin y al cabo) de tu velocidad web.
De esta forma, de nuevo priorizarás la carga de tu fuentes por encima del resto de elementos.
En el caso de que quieras preconectar tus Google Fonts deberás añadir la siguiente línea:
//fonts.google.com
Aloja localmente tus fuentes en WordPress
Cómo habrás podido comprobar siempre que se tenga que hacer una petición externa a otro servidor tu velocidad web se verá afectada.
Por este motivo, y con el fin de que no te ocurra lo mismo te recomendaré alojar todas tus tipografías de WordPress de forma local para ahorrar peticiones externas a tu página web.
Para alojar tus tipografías de forma local en tu WordPress tendrás diferentes métodos:
Mediante plugins de tipografías para WordPress
Podrás utilizar el plugin Self Hosted Fonts PRO para alojar localmente en tu página web las Google Fonts utilizadas en tu página web.
Además, también podrás utilizar un plugin para alojar cualquier tipo de fuente de forma local en tu WordPress cómo:
Mediante plugins de de rendimiento web
Gracias a plugins como Perfmatters y su sección fonts podrás alojar localmente tus Google Fonts fácilmente.
Mediante los propios maquetadores web
Cómo ya sabrás querido lector soy fan de Elementor y, como no podía ser de otra forma, el propio maquetador visual te permitirá instalar cualquier fuente en Elementor.
Para instalar una fuente en Elementor deberás ir a la sección Elementor > Tipografías personalizadas.
Vía FTP y CSS
Cómo último método (El menos recomendado) podrás subir tus fuentes de forma local vía FTP y podrás mostrarlas en tu página web mediante CSS.
Optimiza la visualización de tus tipografías en WordPress
No bastará con que solo alojes de forma local tus fuentes. También deberás optimizar su visualización.
Para ello, Google siempre te recomendará utilizar el formato «SWAP».
Este método (Qué podrás configurar en plugins como Perfmatters o Self Hosted Fonts PRO) te permitirá utilizar este sistema de visualización de fuentes que hará lo siguiente:
Primero cargará la fuente estándar de tu navegador (La más ligera disponible) para que el usuario pueda leer el contenido de tu página web cuanto antes y, mientras cargará el resto de la página incluidas las tipografías de tu página web.
De esta forma, el lector siempre tendrá texto disponible para leer mientras se carga la tipografía oficial.
PD. Si el método SWAP dispara el CLS de las Core Web Vitals de tu página web intenta optar por el formato OPTIONAL
Utiliza un plugin de caché
Las fuentes también serán susceptibles de ser cacheadas por lo que utilizar un plugin de caché en tu página web como WP Rocket te ayudará en esta tarea.
De hecho, WP Rocket cacheará de forma nativa todas tus fuentes de WordPress.
Sirve tus fuentes desde una CDN
Utilizar una CDN siempre será óptimo para proyectos web con público de diferentes países (Si haces SEO Internacional, por ejemplo).
Por lo tanto, si este es tu caso no desaproveches la opción de servir tus fuentes directamente desde una CDN.
De esta forma, ahorrarás recursos a tu servidor y mejorarás tu velocidad de carga.
Conclusiones ¿Merece la pena optimizar las fuentes de un WordPress?
Cómo has visto a lo largo del post, optimizar las fuentes un WordPress supondrá una mejora significativa del rendimiento de esta.
Por lo tanto, yo que tu no dejaría escapar esta oportunidad de optimizar cada palmo de tu página web ya que como sabrás, desde que Google sacó sus Core Web Vital está claro que el WPO cada día irá cobrando mayor relevancia en internet.
Por todo este motivo, no dejes de optimizar el WPO de cada proyecto web que lances y, en la medida de lo posible, intenta empezar por la optimización de las tipografías web.
Ahora te toca a ti querido lector ¿Tienes optimizadas las tipografías de tu página web? ¿Conocías todos estos métodos? Te leo en los comentarios.
¡Nos vemos en dos semanas!
