Optimizar la carga de Google Fonts en WordPress

Dificultad del post: facilmediadifícil
[Total:5    Promedio:4/5]
optimizacion google fonts wordpress

El WPO cada día es una tarea más compleja debido a los elementos que integramos e incrustamos en nuestros sitios web, por un lado, y, por otro lado, las exigencias de los dispositivos móviles, que no paran de hacer que el WPO sea cada vez más estricto.

Hace algún tiempo, Google anuncio que la velocidad de carga en dispositivos móviles era un factor de posicionamiento para móviles, y hace relativamente poco tiempo, Google anuncio que la velocidad de carga era un factor de posicionamiento también en dispositivos desktop o escritorio.

Hay que aclarar, que existen otros factores de posicionamiento más relevantes dentro del SEO on Page, aunque una mala velocidad de carga puede limitar nuestro SEO y hacernos perder posiciones.

optimizar google fonts

En el artículo anterior hable sobre como optimizar la carga de JavaScript y CSS, y en este artículo vamos a hablar sobre como optimizar la carga de Google Fonts, es decir, los archivos de fuentes que usamos en las letras y que se cargan desde el servicio Google Fonts.

Google Fonts es un repositorio o directorio de fuentes mantenido por Google desde el año 2010, siempre gratis.
Poco a poco se ha vuelto cada vez más popular, al mismo tiempo que cada vez tiene más fuentes y tipos de letra diferentes.
Los themes y plugins actuales que nos ayudan con temas visuales en WordPress nos permiten normalmente elegir tipografías de Google Fonts, pero no nos avisan de lo que eso implica para el WPO y para la velocidad de carga de un sitio web.

Para entender las dimensiones de uso de Google Fonts, podemos ver sus estadísticas oficiales actualizadas en tiempo real: https://fonts.google.com/analytics

optimizar google fonts

Cuando desarrollamos y maquetamos un sitio web con WordPress, si no sabemos el impacto que tiene el uso de Google Fonts en el rendimiento, en muchos casos nos encontraremos con que usamos demasiadas fuentes de Google Fonts y normalmente para cargar las fuentes de Google Fonts se realizan varias peticiones externas a los servicios de Google, cuantas más fuentes se carguen, más peticiones se realizan.

Independientemente de que se realizan más peticiones externas, estas peticiones se realizan al hostname fonts.gstatic.com y en algunas ocasiones estos servidores no cargan lo suficientemente rápido.

optimizar google fonts

No se hace una petición por cada tipografía o tipo de letra, sino que cada combinación de tipo de letra, grosor de letra y tamaño de letra, es una petición completamente diferente, por lo que, al utilizar distintos tamaños, negritas, cursivas y distintos tipos de letras, acabamos con webs que hacen muchas peticiones a Google Fonts, haciendo que el WPO general del sitio web se deteriore.

A continuación, en este post, vas a ver algunas formas de optimizar el uso de Google Fonts para que no penalice, o penalice lo mínimo la velocidad de carga del sitio web.

 

Limitar el uso de Google Fonts al desarrollar la web

Este lo he querido poner como punto inicial, ya que siempre pongo la prevención como base de todo y en este caso no iba a ser menos.

Si estamos desarrollando un sitio web o blog con WordPress con un theme actual (The7 o Bridge por ejemplo) o con un pagebuilder actual (Elementor o Visual Composer por ejemplo), debemos tener en cuenta lo que he expuesto en la primera parte de este artículo.

optimizar google fonts

Con Elementor PageBuilder (el pagebuilder que a mí más me gusta y con el que está creado esta web) puedes cargar las fuentes de Google Fonts para que se realice la carga desde local.
Para esto utilizaremos la herramienta “Custom Font”:

optimizar google fonts

Es decir, debemos de tener en cuenta que si usamos distintos tamaños de letra y distintas fuentes de Google Fonts (no predeterminadas) para el contenido, se realizaran MUCHAS peticiones a Google Fonts, por lo que se verá dañado el WPO de nuestro sitio web.

Si aún estamos a tiempo, ten cuidado, no uses muchas fuentes diferentes y si puedes, intenta utilizar fuentes predeterminadas del sistema como Times New Roman o Arial.

En caso de que ya sea demasiado tarde y quieras aplicar WPO a una web en producción o que ya está desarrollada, podemos avanzar a las siguientes partes de este artículo.

 

Precarga y prefetch DNS de Google Fonts

Podemos hacer una optimización leve de la carga de Google Fonts con la precarga y el prefetch DNS, dos funcionalidades que podemos hacer en navegadores compatibles siempre y cuando lo indiquemos en el código.

Lo primero que debemos hacer es identificar con Pingdom Tools o con cualquier otra herramienta las peticiones a Google Fonts.
Después de detectar estas peticiones, debemos copiar las URL y las vamos a utilizar tanto para la precarga como para el prefetch DNS.

¿Qué plugins podemos utilizar para hacer esto?

Tenemos varias formas de hacerlo, por un lado podemos hacerlo manual y por el otro automático.
Podemos hacerlo con los rel dns-prefetch y preconnect, aquí tienes los ejemplos:

Estos códigos o etiquetas deben ir en el head, es decir, entre las etiquetas <head> del sitio web. No te resultara difícil meterlas en un theme hijo o con alguna configuración del theme que permita introducir código en la cabecera fácilmente, ya que es el mismo mecanismo que cuando instalamos un pixel de Facebook o un pixel de Google Adwords.

Evidentemente, el navegador web del visitante debe ser compatible con estas funcionalidades para poder utilizarlas.

Pero si no sabemos dónde introducir estas líneas y no queremos liarnos, existen algunos plugins que nos permiten jugar con el prefetch DNS (cache DNS) y con el preconnect.

Podemos utilizar plugins como Perfmatters para WordPress, del que ya hemos hablado en otros artículos, o WP Rocket para WordPress, al igual que otros plugins para hacer prefetch DNS y preconnect como Pre Party Resource Hints, que podemos encontrar de forma gratuita en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/pre-party-browser-hints/

 

Tipos de fuentes, su peso y su compresión

Antes de entrar en materia de WPO para optimizar la carga de Google Fonts, vamos a explicar un poco de teoría sobre fuentes en entornos web.

Vamos a distinguir 4 formatos de fuentes que se diferencia en algunas de sus características:

  • EOT: Se trata de un formato desarrollado por Microsoft y que solo se utiliza en los navegadores de Microsoft, por lo que tiene muy poca compatibilidad.
  • TTF: Es un formato creado en 1980 y que fue expandiéndose. Actualmente es el más compatible junto a WOFF.
  • WOFF: Es un formato creado en el año 2009 que incorpora compresión nativa para reducir el tamaño de las fuentes. Actualmente es el más compatible junto a TTF.
  • WOFF2: Es una evolución de WOFF con una mejora del 30% en el tamaño de los archivos de fuentes y que poco a poco va siendo compatible con las nuevas versiones de la mayoría de navegadores web, excepto Internet Explorer.

No todos los formatos son compatibles con todos los navegadores web, por esa razón normalmente se plantean fuentes alternativas standard que se cargaran si fallan las principales.

Creo que esta tabla que he sacado del blog de KeyCDN (mi CDN favorito) puede ayudarte a discernir las compatibilidades y aunque se encuentra algo desactualizada en navegadores como Safari, sirve como ejemplo:

google fonts local

Normalmente como tipos de fuente fallback se utiliza Arial o Verdana, incluso Trebuchet MS o Tahoma.

Pero para que lo tengas en cuenta, el 86% de los navegadores utilizados actualmente son compatibles con el formato WOFF.

 

Carga de SOLO las letras que necesitamos de Google Fonts

Es algo curioso, pero es una cosa que podemos hacer: cargar SOLO y EXCLUSIVAMENTE las letras que necesitamos de una fuente y tamaño concreto.

Aunque no existe un plugin para hacer esto exactamente, podemos hacerlo en casos muy específicos con la etiqueta LINK de HTML, ya que no es precisamente practico.

Al cargar solo algunas letras del tipo de fuente y tamaño necesario, el peso de la petición será bastante menor y el archivo resultante que se tiene que descargar en el navegador del visitante también será bastante más pequeño.
Recordemos que hay fuentes que cuando se descargan completas pueden ocupar 100 MB, aunque no es lo común.

 

Como cargar Google Fonts desde local

¿Qué significa cargar Google Fonts desde local? Pues simple, descargar los archivos de Google Fonts al servidor o hosting de la web y cargar los archivos de fuentes directamente desde el hosting o servidor, es decir, sin hacer las peticiones a los servidores de Google.

Con esto conseguimos matar cuatro pájaros de un tiro:

  • Por un lado, las peticiones se realizarán a nuestro propio hosting, por lo que tendremos control de las peticiones y será cosa nuestra (o al menos podremos hacer algo) si la carga va lenta.
  • Por otro lado, al descargar los archivos de fuentes de Google Fonts a nuestro servidor, podremos personalizarlos, aplicando técnicas como por ejemplo el combinado de todas las fuentes en un único archivo y por lo tanto una única petición.
  • Podemos especificar el cache de navegador (browser caching) de los archivos de Google Fonts, en caso de alojarse en los servidores de Google no podríamos.
  • Cuando las fuentes están alojadas en local podremos aplicarles compresión GZIP para bajar su peso al servirlas a los visitantes.

Debemos de tener en cuenta que cuantas más peticiones a Google Fonts tengamos, mejores resultados en el terreno del WPO obtendremos al aplicar técnicas WPO sobre la carga de Google Fonts.

 

Carga local de Google Fonts con Self-Hosted Google Fonts Pro

De las opciones que me he encontrado para realizar la tarea de optimización de carga de Google Fonts, el plugin Self-Hosted Google Fonts Pro es el más eficiente y completo.

 

optimizar google fonts

Aunque se trata de un plugin Premium que podemos comprar en CodeCanyon (es decir, no es gratuito), nos permite hacer todo lo necesario:

  • Descargar Google Fonts a local y cachearlas, renovando los archivos de fuentes cada cierto tiempo.
  • Incrustar los archivos de Google Fonts en el CSS para mejorar el rendimiento.
  • Cargar Google Fonts de forma asíncrona para mejorar la carga inicial del sitio web, mediante la funcionalidad Font-Display Behavior.
  • Combinar todos los archivos de Google Fonts en un único archivo para reducir las peticiones realizadas.
  • Permite precargar Google Fonts en navegadores web que permitan esta funcionalidad, ya que es relativamente nueva.

Self-Hosted Google Fonts detecta automáticamente las fuentes cargadas en los archivos de themes y plugins, también detecta fuentes en el CSS y en el HTML.

En el siguiente vídeo que he grabado para ti y he subido a mi canal de Youtube puedes ver como optimizar la carga de Google Fonts en WordPress con Self-Hosted Google Fonts:

Como puedes ver, el plugin es simple y tiene relativamente pocas opciones, no está pensado para usuarios principiantes, ya que para principiantes del WPO en WordPress existen muchas cosas que optimizar antes de optimizar la carga de Google Fonts.

 

Optimización de Google Fonts con WP Rocket

Como siempre en mis artículos, vuelvo a tocar WP Rocket, ya que este plugin me encanta. Por esta razón he escrito una guía completa de configuración de WP Rocket que puedes leer en este blog.

Desde hace tiempo WP Rocket lleva una opción para optimizar la carga de Google Fonts en WordPress, aunque según mi experiencia, no es una funcionalidad demasiado efectiva.

google fonts local

La teoría dice que WP Rocket combina varios archivos Google Fonts en un único archivo, pero para esto tendría que cachear en local las fuentes y combinar los archivos, del mismo modo que lo hace Self-Hosted Google Fonts Pro.

El problema es que en las tablas de carga de Pingdom Tools, nunca he llegado a ver que el plugin haga esto, en ningún caso.
Desconozco si es por alguna configuración que yo haya realizado mal, pero es que he estado buscando ayuda en la documentación oficial de WP Rocket y no he encontrado ninguna ayuda en ningún idioma.

Aun así, quería mencionarlo, ya que quizás te pueda servir de ayuda.

 

Optimizar la carga de Google Fonts con LiteSpeed Cache

En Raiola Networks utilizamos LiteSpeed como servidor web en todos nuestros servidores de hosting compartido, es decir, eso incluye desde hosting WordPress a hosting reseller y hosting avanzado.

El plugin de LiteSpeed Cache del que ya hablé en el blog de Raiola Networks solo funciona cuando el servidor tiene LiteSpeed instalado, pero tiene funcionalidades muy interesantes.

google fonts local

Este plugin no solo es para gestionar cache, sino que también nos permite cargar Google Fonts de forma asíncrona para que no interrumpa la carga de la web.

google fonts local

Esta funcionalidad también añadirá la URL de carga de Google Fonts a una etiqueta con el atributo preconnect.

Adicionalmente, podemos hacer que se desactiven TODAS las cargas de Google Fonts con la siguiente opción que aparece:

google fonts local

Desgraciadamente, el plugin de LiteSpeed Cache para WordPress no permite cargar Google Fonts desde local, es decir, descargando las fuentes directamente en el servidor.

 

Carga fuentes de Google Fonts con Any Font

Por último, quiero hablar de esta opción: un plugin para WordPress más o menos gratuito llamado Any Font (lo de más o menos lo explico al final).

El plugin Any Font para WordPress nos permite subir las fuentes que nosotros queramos desde nuestro ordenador y estas se añadirán automáticamente a la carga, aunque primer tenemos que descargarlas a nuestro ordenador, claro.

google fonts local

Any Font para WordPress no solo permite subir fuentes de Google Fonts, sino cualquier fuente de la cual tengamos archivo.

Después de subir las fuentes a WordPress con Any Font el plugin utiliza unos servidores externos para hacer la conversión a un formato admisible.

Para subirlas simplemente pulsamos el botón “Add Fonts” rodeado en rojo en la imagen siguiente:

google fonts local

Después de subir las fuentes, podemos asignarlas a distintas partes de la web con el botón “Asign Font” que hemos rodeado en verde en la imagen anterior.
Al pulsar el botón “Asign Font” nos desplegara algunas opciones para asignar la fuente a una parte del contenido:

google fonts local

Incluso con el cuadro “Custom Elements” podemos utilizar clases CSS o elementos CSS al que asignarles fuentes.

Las fuentes que subamos con Any Fonts las tendremos disponibles en el editor de WordPress y en cualquier parte donde se inserte el editor de WordPress, es decir, podremos utilizarlo con Elementor o con cualquier otro pagebuilder para WordPress:

google fonts local

Te voy a explicar una última cosa, y es que Any Fonts para WordPress SOLO es gratuito para 1 única fuente, es decir, si quieres subir varios archivos de fuentes, vas a tener que comprar una de las licencias disponibles en su sitio web que puedes encontrar AQUÍ.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress y WPO.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

13 comentarios en “Optimizar la carga de Google Fonts en WordPress”

  1. Con la opción de LSCache de desactivar todas las fuentes de google me pasa lo mismo que te pasa con la opción de WP-Rocket, sólo funciona en teoría. 😂

    Le doy para que las desactive todas, pero en pingdom siempre me marca la carga de la fuente.

    Responder
    • Pues la verdad es que solo lo he probado una vez y me ha funcionando, no he llegado a probarlo mas, pero le pasare un ojo…

      Responder
  2. Con la opción de LSCache de desactivar todas las fuentes de google me pasa lo mismo que te pasa con la opción de WP-Rocket, sólo funciona en teoría. 😂

    Le doy para que las desactive todas, pero en pingdom siempre me marca la carga de la fuente.

    Responder
    • Pues la verdad es que solo lo he probado una vez y me ha funcionando, no he llegado a probarlo mas, pero le pasare un ojo…

      Responder
  3. Enhorabuena por el artículo Álvaro. Mucho más completo que lo que suelo leer.
    Sé que te centras sobre todo en WPO, pero tengo una web donde me gustaría unir todas las fuentes en 1 única. ¿Sabes como podría hacer esto fuera de WP? Un saludo!

    Responder
    • Hola Marcelo, lo tienes «relativamente» fácil, ya que lo único que tienes que hacer es descargarlas a tu ordenador, unirlas todas en un archivo y posteriormente enlazarlas desde el CSS: https://cybmeta.com/font-fa

      El problema, es que para ser compatible con todo, hay que hacerlo con todos los formatos distintos y desconozco el proceso.

      Responder
  4. Estoy teiendop problemas con uno de mis sitios donde utilizo fuentes alojadas en mi servidor, el asunto es que por lo que entiendo con cada visita se cargan los distintos archivos de la fuente y pues esto con una cantidad considerable de visitas acaba consumiendose el ancho de banda del servidor. Hay alguna manera de cachearlas Álvaro? O qué puedo hacer para solventar esto?

    Responder
    • Hola Eudis, con un CDN podrías solucionarlo, por otro lado, si consigues implementar bien el browser cache para las fuentes, en visitas recurrentes no van a consumir ancho de banda ya que van a estar en el navegador del visitante. Aunque esto ultimo depende de como esten llamadas las fuentes desde el CSS.

      Responder
      • Muchas gracias por responder Álvaro, en mi caso se trata de páginas orientadas a búsquedas informativas por lo que es común que no tenga visitas recurrentes y tenga un % de rebote relativamante alto así que entiendo que la solución irá por poner un cdn. Veré cómo hacerlo correctamente. De nuevo gracias

        Responder

Deja un comentario

Share on twitter
Share on facebook
Share on linkedin
¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción
  • RESPONSABLE:

    RAIOLA NETWORKS, S.L.

    C.I.F.: B27453489

    Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

    Telefono: +34 982776081

    e-mail: info@raiolanetworks.es

    FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
    LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
    DESTINATARIOS:

    No se ceden datos a terceros, salvo obligación legal.

    Personas físicas o jurídicas directamente relacionadas con el Responsable

    Encargados de Tratamiento adheridos al Privacy Shield

    DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
    INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.
  • Este campo es un campo de validación y debe quedar sin cambios.