Cómo optimizar fuentes en WordPress

En este tutorial te voy a explicar cómo optimizar fuentes en WordPress.

Por si no lo sabías, las fuentes suelen ralentizar considerablemente la web.

Bien por el número de peticiones, por el peso de las mismas y otros motivos.

Vamos.

Usa fuentes ligeras

Lo primero y más que obvio, es que deberías usar fuentes ligeras.

Cuanto más peso tengan las fuentes, más lenta cargará tu web.

¿Y cómo saber el peso de una fuente? Pues muy sencillo.

Por un lado en herramientas como SpeedWP, poniendo el ratón encima de la petición de una fuente.

Y por otro, desde Google Fonts (Versión antigua), dado que son el conjunto de fuentes más usadas.

Al abrir el cuadro de la fuente, te indica si es rápida o no.

Simplemente puedes hacer caso a las indicaciones de Google o puedes bajar la fuente y comparar el peso.

Usa el número mínimo de fuentes

La mejor recomendación que te puedo dar, es que uses el mínimo número de fuentes.

Yo recomiendo usar como máximo 5 fuentes y si son menos, mejor.

¿Y por qué 5?

Pues 1 para el logo, aunque esta se puede sustituir por una imagen y ya te la ahorras.

Otra para las cabeceras y otra para el texto, más su versión en negrita y otra para itálica.

Yo en mi web uso 3 fuentes, una para el texto y 2 para negrita e itálica.

Unifica las peticiones de Google Fonts

En el caso de que uses fuentes de Google Fonts, seguramente tu web haga varias peticiones, una por cada fuente o variante.

¿Te imaginas usar 3 fuentes y cada una con 4 variantes? Serían 12 peticiones, cosa que suelo ver muy a menudo.

Para esto lo ideal es unificar las peticiones de Google Fonts en 1 y lo puedes hacer con el plugin WP Rocket.

Precargar las peticiones DNS de las fuentes

Sólo en caso de seguir usando fuentes externas, deberías de precargar las peticiones DNS de las fuentes.

Con esta técnica lo que hacemos es que estas se cargan algo más rápido.

Si no sabes hacerlo, te dejo una guía para que aprendas a precargar las peticiones DNS en WordPress.

Aloja localmente las fuentes

Una gran solución es alojar localmente las fuentes.

Osea, que en vez de usar fuentes externas, usamos las que hemos subido a la web.

De esta forma, nos ahorramos hacer peticiones externas que ralentizan.

Lo ideal es hacerlo desde el principio cuando desarrollamos nuestra web, pero no siempre es posible.

Esta tarea puede ser sencilla o se puede complicar, según el tipo de web que tengas, como explico en mi guía de alojar localmente las fuentes en WordPress.

Usa un plugin de caché para cargar más rápido las fuentes

Usar un plugin de caché es una obligación, porque mejora mucho la carga de la web y con las fuentes pasa lo mismo.

Al cachear una URL, las fuentes también se cachean, con lo que son peticiones a la base de datos que se ahorra tu web.

Hay muchos plugins de caché para ello, pero te invito a que veas mi tutorial de WP Rocket, el que considero el mejor plugin de caché para WordPress.

Minifica el CSS de las fuentes

Según qué tipo de fuentes uses y desde dónde las uses, seguramente carguen CSS.

Y este CSS ocupa más espacio y peso del recomendado y la solución es minificar el CSS de las fuentes.

Hay muchos plugins para ello, pero yo sigo recomendando WP Rocket para hacerlo.

Pero ojo, es una tecnología que suele dar problemas y por eso tengo una guía específica para saber minificar archivos CSS en WordPress y resolver los posibles problemas.

Usa un CDN para servir a las fuentes

Una vez que ya tenemos todo lo anterior solucionado, lo ideal es usar un CDN para servir a las fuentes.

Un CDN es una red de distribución de contenido que tiene servidores repartidos por todo el mundo y sirve los archivos desde el servidor más cercano al usuario.

Al servir las fuentes desde un CDN, estas se cargarán mucho más rápido al usuario.

Un CDN muy conocido es Cloudflare, pero yo uso BunnyCDN, el cual creo que es mucho mejor.

Conclusión

Como has podido ver, hay muchas tareas a la hora de optimizar fuentes en WordPress.

Realizar unas u otras tareas, dependerá del tipo de web que tengas, tus conocimientos y otros factores.

Espero que esta guía te sea de utilidad.

El artículo Cómo optimizar fuentes en WordPress fué visto en Ragose.