Contenido
Optimizar fuentes en WordPress es una tarea muy importante para mejorar la velocidad de carga y rendimiento de tu WordPress. Es importante tener en cuenta la cantidad de fuentes y variaciones que utilizas, así como también prestar atención a la forma en que se cargan las tipografías.
En esta lección aprenderás todo lo que necesitas saber sobre cómo optimizar tipografías en WordPress. Desde reducir el número de fuentes y variaciones hasta precargar las fuentes y mantener el texto visible mientras se carga la fuente. Además, también veremos cuáles son los plugins ideales para optimizar fuentes WordPress con plugins.
Cómo optimizar fuentes en WordPress
1. Reducir el número de fuentes en WordPress
Voy a ser muy clara y tajante en este tema: a mayor número de tipografías la web no va a quedar más bonita.
Todo lo contrario, dará sensación de desorden y caos y además perjudicará gravemente al rendimiento de nuestra web.
La web debe ser diseñada con 1 única fuente, a poder ser de Google Fonts, y con 2 variaciones: 400 normal y 600 bold (es un ejemplo, puedes usar una variación 700 o 800 en la bold, todo depende de tu diseño). Fin.
Como mucho se podría añadir una segunda fuente para títulos, pero evitando usar muchas variaciones y prestando atención a la forma de cargar las fuentes.
Voy a mostrarte un ejemplo para que veas la importancia del buen uso de tipografías en el diseño web:
En este ejemplo vemos rápidamente:
- Uso de 4 familias de tipografías distintas
- Acabado poco profesional
- Sin coherencia en el diseño
- Obligamos a la web a cargar muchos scripts de fuentes innecesarios
Ahora vamos a ver la misma web y el mimo diseño usando solo 1 familia de fuente:
- Acabado más profesional
- Coherencia en el diseño
- La web solo tendrá que cargar 1 único archivo de fuente en WordPress
Aunque no lo parezca es algo que me encuentro recurrentemente en las webs que optimizo de mis clientes y, por norma general, suele ser por no prestar atención y/o no usar un tema o maquetador correcto. Presta atención a la familia de fuentes que está usando tu maquetador, plugin o tema por defecto, pero sobre todo analiza tu web para identificar qué fuentes se están usando.
Así que recuerda: para optimizar las fuentes en WordPress y reducir el número de scripts:
- Usa 1 única familia de fuente
- Que la fuente sea de Google Fonts
- Si vas a usar una segunda familia (por ejemplo, solo para encabezados) especifica su uso en los ajustes del tema
2. Reducir el número de variaciones de fuentes en WordPress
Las variaciones de las tipografías también es algo que aprender sobre cómo optimizar fuentes en WordPress.
Una vez asignada y decidida la familia se cargará un script por variación, así que debemos llevar cuidado.
En este ejemplo verás una fuente que carga sus variaciones (400 y 700) de forma correcta:
De la misma manera que no tenía coherencia usar distintos tipos de tipografías, tampoco tiene mucho sentida usar 3 tipos de variaciones para las negritas de la web.
Usa solo 2 variaciones: una para normal y otra para bold.
3. Alojar localmente las fuentes en WordPress
Para optimizar las fuentes en WordPress debemos alojarlas siempre localmente.
Esto quiere decir que no debemos hacer una llamada de terceros a fonts.gstatic.com para que la web cargue la fuente asignada.
El uso de scripts de terceros (una llamada de terceros es toda aquella que debe hacerse fuera de nuestro dominio) es de las acciones que más perjudican a las notas y velocidad de carga de WordPress:
- Rompen y perjudican la carga de la web
- Aumenta el TTI (Time to Interactive), una métrica de las Core Web Vitals.
- Bloquean el hilo principal
- No se puede administrar ni aplicar una política de caché
- La salud y disponibilidad del script de terceros no dependerá de nosotros ni nuestro servidor
4. Precargar fuentes en WordPress
El precargado de fuentes te permite indicarle al navegador que empiece a descargar las fuentes antes de que estas sean necesarias.
Vamos, absolutamente lo contrario a lo que hacemos con el LazyLoad de las imágenes.
El precargado de fuentes mejorará la velocidad de carga y el rendimiento de la web. Además, ayuda a cumplir con la recomendación de PageSpeed para precargar peticiones críticas.
No se puede precargar una fuente que no está alojada localmente, es por eso que es tan importante alojar las fuentes localmente en WordPress.
5. Mantener el texto visible mientras se carga la fuente WordPress
Si al analizar tu web con PageSpeed te ha aparecido el aviso «Asegúrate de que el texto permanece visible mientras se carga la fuente web» quiere decir que no estás aplicando la característica «swap» en propiedad «font-display«.
Las fuentes son scripts bastante grandes que al no optimizarse correctamente tardan en cargarse. Esto lleva a que los navegadores ocultan el texto hasta que se carga la fuente, lo que provoca un destello de texto invisible (FOIT).
Cómo optimizar fuentes en WordPress con plugins
Ahora que hemos aprendido la teoría y todo lo que debemos hacer con nuestras fuentes vamos a la parte técnica y a aprender cómo optimizar fuentes en WordPress con plugins.
Optimizar fuentes WordPress con OMGF
Antes de instalar el plugin y proceder a su configuración es importante haber revisado y reducido el número de fuentes usadas en la web, como también sus variaciones.
Si ya has llevado esta tarea a cabo entonces podemos seguir con la instalación y activación de OMGF.
Cómo configurar OMGF:
Este contenido es visible solo para alumnos del curso de Optimización WordPress de Anaislab.
Para ver el contenido del curso, trucos y snippets para mejorar la velocidad de tu WordPress identifícate o únete
Es posible que en la lista aparezcan muchas fuentes que no sabías que la web usaba o que nunca has añadido.
Si aparecen en la lista es que la web las está cargando, ya sea por plugins que cargan sus propias fuentes o porque se ha usado la fuente sin querer en la maquetación de una página.
Si la misma fuente aparece duplicada es muy importante que la cargues solo 1 vez y que bloques su carga del resto de ubicaciones.
Nota: Si el plugin no analizara las fuentes desactiva temporalmente Perfmatters y vuelve a intentarlo, luego activar de nuevo Perfmatters.
🎞️En este vídeo te explico cómo optimizar fuentes en WordPress paso por paso:
Este contenido es visible solo para alumnos del curso de Optimización WordPress de Anaislab.
Para ver el contenido del curso, trucos y snippets para mejorar la velocidad de tu WordPress identifícate o únete
En conclusión, aprender cómo optimizar fuentes en WordPress es un aspecto clave para mejorar el rendimiento y velocidad de tu WordPress. Hemos aprendido qué aspectos debemos optimizar de las fuentes de WordPress y qué acciones aplicar, como reducir el número de fuentes y variaciones, precargar las fuentes, mantener el texto visible mientras se cargan las fuentes, y optimizarlas con plugins como OMGF.
Te animo a poner en práctica estos consejos y si tienes cualquier duda o problema no dudes en ponerte en contacto conmigo, si eres alumno del curso de Optimización WordPress tienes acceso a soporte 👍
