Cómo optimizar las imágenes de Gravatar en WordPress

Acelerar imágenes Gravatar

Hoy te voy a explicar un tema muy interesante y curioso y es el de cómo optimizar las imágenes de Gravatar.

Supongo que ya sabes que este es un servicio que sirve para que aparezca tu foto en cualquier sitio.

Creas tu cuenta, asignas una foto a un email y donde pongas ese email saldrá esa foto.

El problema es que es que son lentas y no se te debería pasar al optimizar imágenes en WordPress.

El problema de las imágenes de Gravatar

Pero esto tiene un problema que es bastante serio y es que se realizan muchas llamadas a este servicio externo.

Ya he comentado varias veces que lo ideal es que un blog pese poco y si es menos de 1 Mega mejor.

Pero hay otro concepto que hay que controlar si queremos acelerar nuestro blog y son las llamadas externas.

El problema de estas llamadas externas es que no se pueden cachear, ni optimizar, ni hacer nada con ellas, dado que no están en nuestro hosting.

Puede ser una imagen, puede ser un script, etc.

En el caso de Gravatar se hace una llamada por cada imagen que se solicite.

Ahora imagina que tienes un artículo con 200 comentarios.

Pues resulta que estarás haciendo cientos de llamadas externas solo para mostrar los comentarios.

Y este problema lo tienen todos los WordPress siempre que no usen lo que voy a explicar o tengan un sistema de comentarios externo como Disqus.

Pero la gracia de todo esto es que encima el Gravatar que sale predefinido cuando un usuario no se ha creado uno, se repite igualmente.

Osea que si tienes 100 comentarios y nadie tiene puesta una foto, son 100 peticiones que se realizan igualmente, cuando al ser el mismo con una debería de bastar.

Te lo pongo para que sepas cuál es.

Icono Gravatar

Un ejemplo de las llamadas de mi blog

Te voy a poner un ejemplo para que lo entiendas mejor.

Para ello voy a usar GTMetrix, una herramienta fantástica que uso para optimizar WordPress.

He cogido un artículo mío que tiene más de 90 comentarios a día de hoy.

Ejemplo de peticiones GTMetrix

Al hacer el análisis veo que tarda en cargar menos de 2 segundos, cosa que no está mal.

Que pesa menos de 1 MB, osea que más o menos entra dentro de lo recomendable.

Pero además hace unas 103 peticiones, que no está mal, pero pasa una cosa si abrimos el informe.

En los apartados de Serve resources from a consistent URLLeverage browser caching vemos que están en rojo e indican que hay algo que está mal.

Peticiones

El primero dice que debería de servir todos los contenidos desde la misma url y aunque no se vea, tiene más de 30 solicitudes.

El segundo que la caché de estos es muy baja, dado que son solo 5 minutos, pero además son sobre 90 solicitudes que hace y aunque la imagen esté cortada, hay más.

Como he dicho antes, esto no se puede arreglar fácilmente dado que son llamadas externas.

Podrás pensar que si el artículo carga rápido que lo puedes dejar así, pero no te creas.

Cuando un blog empieza a tener miles de artículos y cada uno con bastantes comentarios, la cosa cambia.

Por eso hay que darle solución y lo suyo es cachearlas.

Ventajas de cachear las imágenes de Gavatar

Antes de seguir con el tutorial te voy a decir rápidamente porqué deberías de cachear las imágenes de Gravatar.

Se hacen menos llamadas externas

Cuando se realiza la caché, lo que hace es que se guardan esas imágenes en tu hosting.

Con lo que el evitamos hacer llamadas externas con el tiempo y los recursos que se lleva.

Quedan alojadas en tu servidor para más fácil acceso

Además, al estar alojadas en tu servidor, estás se sirven mucho más rápido.

¿Quieres tener un WordPress rápido desde YA?
Descarga gratis mi checklist WPO. ¡Es gratis!

La quiero

Primero porque si están en tu servidor se cargan más rápido.

Y otro porque además ahora podemos ponerle el tiempo de cacheo que queramos.

Eso hará que se guarden en la caché de los navegadores de los usuarios más recurrentes ahorrando ancho de banda.

Se servirán a través de tu CDN

Si usar algún CDN como Cloudflare o uno como el que tiene el hosting de Siteground.

Ya ni siquiera las tendrá que servir tu hosting.

Así que trabajo y recursos que te ahorrarás.

¿Has visto como vale la pena?

Cacheando las imágenes de Gravatar

Para realizar esta acción lo que haremos será instalar un plugin muy sencillo que solucionará este problema.

He probado varios, pero al final me he decidido por uno.

Se llama NIX Gravatar Cache y lo podréis instalar desde el mismo instalador de WordPress.

NIX Gravatar Cache

Una vez que está instalado podemos irnos a su panel de control, que la verdad es muy sencillo y se encuentra en ajustesNIX Gravatar Cache.

Panel NIX Gravatar Cache

Lo bueno de este plugin es que es tan simple como activarlo o desactivarlo.

O configurarle el tiempo que estaŕan en caché los Gravatares.

Yo lo he dejado en 10 días porque no creo que la gente cambie tan rápido de fotos.

La hora de la verdad

Una vez que hemos activado y configurado el plugin lo suyo es ver la diferencia.

Así que realizo otra prueba en GTMetrix para ver el resultado.

Acuerdate de vaciar la caché si tienes activado algún plugin de caché.

Segunda prueba

Como puedes ver, las peticiones son las mismas, el peso el mismo, pero hemos optimizado la velocidad y bajado sobre 700 milisegundos.

El motivo es porque cada una de las imágenes se llevaba varios milisegundos de tiempo.

La parte mala es que no hemos podido solventar el problema del todo y se siguen haciendo muchas peticiones.

Pero por lo menos son más rápidas, se cachean y están en nuestro servidor.

En esta imágen verás como ahora están enlazadas desde una carpeta de mi hosting.

Ejemplo de urls

La parte buena es que como te he explicado antes, ahora esas imágenes se podrán copiar al CDN que uses quitándole ese consumo de recursos al hosting que uses.

¿Te imaginas este ahorro de tiempo de carga multiplicado por cientos de artículos?

Pues ya sabes lo que tienes que hacer.

Recopilando la información

Como has podido comprobar, las imágenes que usa Gravatar se llevan mucho tiempo de carga.

A mi en este artículo de 90 comentarios ha sido casi 1 segundo, aunque ya depende del hosting que tengas y como hayas optimizado tu blog.

Pero te lo recomiendo hacerlo porque así cargará mucho más rápido.

¿Habías pensado alguna vez en esto o ya sabías lo del consumo de Gravatar?

Venga, ¡cuéntame tu experiencia en los comentarios!

¡Valora mi contenido!
[0 votos. Media: 0]
avatar
el más nuevo el más antiguo el más votado
Luis Martínez
Invitado
Luis Martínez

Hace tiempo, que me di cuenta de este detalle, y realmente, tampoco me convence la opción de añadir un plugin para esto… he optado por quitar los gravatares desde mi panel de control, de esta forma, no se ven ni se cargan. Un saludo Raúl y gracias por esta explicación.

Gerardo Garcia Asensio
Invitado
Gerardo Garcia Asensio

¡Muy buen post! es un problema del que no se suele hablar y que mejore la velocidad de la web con un plugin tan sencillo es genial.