04.2 Google Fonts
En este tutorial aprenderás a optimizar Google Fonts en WordPress.
Las fuentes de Google pueden ser un verdadero quebradero de cabeza para la velocidad.
¿Por qué debería optimizar Google Fonts?
Te recomiendo optimizar las fuentes de Google por varios motivos:
-
- Hace muchas peticiones, dependiendo del número de fuentes que uses.
- Estas fuentes son externas, así que no se cachean, ni optimizan.
- Da error de Add Expires headers en YSlow.
Optimizando las fuentes estas pesarán mucho menos, bajan algo las peticiones, pero lo más importantes es que las fuentes se cachearán.
Importante: a mayor número de fuentes usadas, mayor es la diferencia en la optimización.
Sin Google Fonts
Google Font sin optimizar
Fuentes de Google optimizadas
Cómo optimizar Google Fonts en WordPress
Simplemente deberemos realizar una tarea y es hacer las fuentes locales.
Gracias a esto:
- Cargarán más rápido.
- Se almacenarán en el navegador del usuario.
- Eliminan el error Add Expires headers en YSlow.
- Se podrán servir desde tu CDN.
Cómo hacer locales las fuentes de Google
Para ello usaremos el plugin OMGF | Host Google Fonts Locally.
Plugins que he usado y no funcionan:
- Self-Hosted Google Fonts: funciona, pero no arregla 2 problemas de PageSpeed de precarga y visualización de fuentes.
- CAOS for Webfonts: solo sirve para fuentes que no vengan en el tema.
- Host Google Fonts Locally: no sustituye las fuentes del tema.
Los pasos son:
- Instala y activa el plugin OMGF | Host Google Fonts Locally.
- Ve a ajustes – Optimize Google Fonts.
-
- Comprueba que Optimization Mode esté en manual.
- En Opción de visualización de la fuente, comprueba que esté en swap.
- En la casilla de URL to Scan, añade tu web y pulsa la tecla intro. En el caso de que no detecte las fuentes, desactiva cualquier otro plugin de optimización de fuentes o ajuste de optimización de Google Fonts de plugins como WP Rocket. A veces puede tardar un poco si has limitado el cron de WordPress.
- En Manage Optimized Google Fonts, marca la casilla de preload las que vayas a usar y Not load, las que no quieres que se carguen y guarda los cambios.
- Importante: Si las fuentes dan error, desactiva preload y haz la precarga de fuentes con WP Rocket.
- En caso de querer volver a lo anterior, simplemente vacía la caché desde la opción de Empty Cache Directory.
Vacía la caché
No te olvides de vaciar la caché del plugin, hosting y CDN.
De paso comprueba que no haya errores 404 en las fuentes con SpeedWP (Te lo indicaría).
Conclusión
Como has visto, optimizar las fuentes de Google es una tarea sencilla, pero además necesaria.
Con esto tu web irá mucho más rápida.