:-) Guía sobre cómo optimizar fuentes en WordPress

¡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 a 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, le mostraré cómo optimizar las fuentes de Google (Google Fonts) dentro de su página web como haría un diseñador WordPress profesional.

Por tanto, no me entretengo más que hay mucho que contar.

¡En el lío!

¿Por qué será importante optimizar las fuentes de tu WordPress?

Básicamente tendrás que optimizar las fuentes de tu WordPress porque éstas son uno de los componentes más lentos de cualquier página web.

Además, con la llegada de las Core Web Vitales 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?

¡Por supuesto que si es necesario hacerlo!

Las Google Fuentes (Tan utilizadas en todas las páginas web WordPress) son hoy día uno de los principales motivos por los que muchas páginas web suspenden sus tests de velocidad web.

Esto se debe a que la gran mayoría de webmasters no saben cómo optimizar las Google Fuentes de sus páginas web.

De hecho, estas Google Font ralentizan las páginas web ya que para cargarse necesitan hacer 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 a optimizar las fuentes de Google en tu WordPress.

[TUTOSEO] 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 tendrás que seguir estos pasos:

Utilizar fuentes ligeras

Cuanto más pese una tipografía utilizada en tu página web más tardará ésta en cargar la página.

Por 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 Fuentes 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 le 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 utilices en tu página web más recursos se tendrán que cargar.

Por 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).

Usa la precarga tus peticiones externas

Una forma de mejorar un poco 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 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á cómo 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 leve mejora (Pero mejor al fin y al cabo) de tu velocidad web.

De esta forma, de nuevo priorizarás la carga de las fuentes por encima del resto de elementos.

En 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 deba realizar una petición externa a otro servidor, tu velocidad web se verá afectada.

Por este motivo, y para que no te ocurra lo mismo te recomendaré alojar todas tus tipografías de WordPress de forma local para ahorrar peticiones externas en 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 Tipo de letra alojados 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 el plugin Utilice cualquier fuente de WordPress para alojar cualquier tipo de fuente de forma local en tu WordPress.

Mediante plugins de rendimiento web

Gracias a plugins como Perfmateros y la sección fuentes podrás alojar localmente tus Google Fonts fácilmente.

Mediante los propios maquetadores web

Como ya sabrás querido lector soy fan de Elementor y, como no podía ser de otra forma, el mismo maquetador visual te permitirá instalar cualquier fuente en Elementor.

Para instalar una fuente en Elementor tendrás que ir a la sección Elementor > Tipografías personalizadas.

Vía FTP y CSS

Como último método (Lo 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 será suficiente que sólo alojes de manera local tus fuentes. También deberás optimizar su visualización.

Por eso, Google siempre le recomendará utilizar el formato SWAP.

Este método (Qué podrás configurar en plugins como Perfmateros , Utilice cualquier fuente de WordPress o Tipo de letra alojados 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 lo antes posible 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 Vitales de tu página web intenta optar por el formato OPTIONAL

Use un conector de caché

Las fuentes también serán susceptibles de ser cacheadas de forma que utilizar un plugin de caché en tu página web como WP Rocket le ayudará en esta tarea.

De hecho, WP Rocket registrará de forma nativa todas tus fuentes de WordPress.

Sirve las fuentes desde una CDN

Utilizar una CDN siempre será óptimo para proyectos web con público de distintos países (Si haces SEO internacional, por ejemplo).

Por tanto, si este es su caso no desperdicia la opción de servir sus fuentes directamente desde una CDN.

De esta forma, ahorrarás recursos en tu servidor y mejorarás la velocidad de carga.

Conclusiones ¿Vale la pena optimizar las fuentes de un WordPress?

Como has visto a lo largo del post, optimizar las fuentes un WordPress supondrá una mejora significativa del rendimiento de ésta.

Por tanto, yo que tú no dejaría escapar esta oportunidad de optimizar cada palmo de tu página web ya que cómo 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 ello, no dejes de optimizar el WPO de cada proyecto web que arrojes 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!