Cómo cargar Gravatars desde tu CDN y cargarlos de forma diferida

Oct 26, 2020 Uncategorized

Siempre estoy buscando formas de acelerar mis sitios de WordPress. Gravatars en los comentarios siempre ha sido una situación de trampa 22. Normalmente, lo mejor que se puede hacer es cargarlos de forma diferida, sin embargo, eso provoca otros problemas de los que hablaré más adelante.

Hoy, sin embargo, quiero mostrarte cómo cargar tus Gravatars desde tu propio CDN. ¡Este es probablemente mi nuevo método favorito para acelerar los comentarios!

Gravatars

Para aquellos que quizás no conozcas, Gravatars son los íconos asociados con tu correo electrónico cuando haces comentarios en una publicación de blog. Estos fueron desarrollados y administrados por Automattic, los creadores de WordPress. Vea el ejemplo a continuación.

Uno de los mayores problemas que tienen las personas con estos es que crean un montón de solicitudes externas en su sitio de WordPress. A continuación se muestra un ejemplo de uno:

https:// secure.gravatar.com/avatar/be9a4e95199640c95a?s=100&d=mm&r=g

Si tiene más de 50 comentarios en una publicación de blog, terminará con toneladas de solicitudes HTTP a los servidores externos de gravatar que se ven así.

Solicitudes externas de Gravatar

Y como sabe, no tiene control sobre los activos / imágenes que se encuentran en sitios externos. Esto significa que no puede controlar el almacenamiento en caché, la velocidad ni nada. Quedas a merced de sus servidores. Afortunadamente, gravatar.com al menos ahora usa HTTP / 2. Pero todavía no hay comparación con cargar los activos desde su propia CDN.

Abandonando Disqus

Algunos podrían preguntarse por qué finalmente abandoné la carga diferida de los comentarios de Disqus. La principal razón es el SEO. Cuando carga Disqus de forma diferida y utiliza el almacenamiento en caché del lado del servidor, hay problemas con los rastreadores que leen los comentarios. Y esto significa que los comentarios no pueden ayudar a impulsar su SEO. Si modera sus comentarios, pueden, de hecho, ser contenido adicional gratuito generado por el usuario en la página.

Gravatars de carga diferida

Lo mejor de la solución a continuación es que la mayoría de los plugins de carga diferida deberían funcionar automáticamente con sus Gravatars. Usamos la carga diferida en nuestro complemento Perfmatters junto con Gravatars alojados localmente y funciona de maravilla en todos nuestros sitios.

Cómo cargar Gravatars desde su CDN

Ahora, antes de empezar, tengo que dar todos mis apoyos al equipo de KeyCDN para el primer blogueo sobre este método. Y algo de esto está tomado de su artículo. Como algunos de ustedes sabrán, solía trabajar para KeyCDN. Pero ahora soy solo un cliente feliz.

He usado KeyCDN en todos mis sitios durante más de tres años sin ningún problema. Lo prefiero a Cloudflare, debido a que no es un proxy completo y no tiene que meterse con las reglas de almacenamiento en caché de página completa. Y en mis pruebas de velocidad siempre ha sido más rápido.

Este tutorial asume lo siguiente:

  • Está ejecutando Nginx y tiene acceso a su servidor, o tiene un host de WordPress administrado como Kinsta que le permite agregar las siguientes reglas.
  • Está utilizando un complemento como el habilitador de CDN o Perfmatters para implementar activos en su CDN.

Paso 1

Abra su archivo de configuración de Nginx y agregue «sub_filter» en el bloque de ubicación correspondiente. Reemplaza «location /» con el directorio para el que estás usando Gravatars y reemplaza «cdn.example.com» con tu URL de CDN (como https://cdn.woorkup.com/avatar/).

Nota: Si su sitio está detrás de Cloudflare, simplemente querrá apuntarlo a su dominio raíz.

Paso 2

Mientras aún está en el archivo de configuración, agregue la ubicación del proxy para los avatares redirigidos.

Paso 3

Recargue Nginx. Ahora todas las solicitudes de gravatar en su sitio deberían ir a su propio CDN.

Carga de Gravatar desde CDN
Carga de Gravatar desde CDN

Prueba de velocidad de Gravatar

Hice una comparación de prueba de velocidad para ver la diferencia en una publicación que tenía más de 40 comentarios. Si está ejecutando sus propias pruebas, también recomiendo usar la herramienta de prueba de velocidad gratuita de KeyCDN o WebPageTest, ya que ambos admiten HTTP / 2.

Gravatars cargando desde secure.gravatar.com

Ejecuté 5 pruebas desde cada ubicación para asegurarme de que los activos (Gravatars) se sirvieran desde la caché.

Gravatars cargando desde gravatar.com en San José (prueba de velocidad)
Gravatars cargando desde gravatar.com en San José
Gravatars cargando desde gravatar.com en Melbourne (prueba de velocidad)
Gravatars cargando desde gravatar.com en Melbourne
Gravatars cargando desde gravatar.com en Estocolmo (prueba de velocidad)
Gravatars cargando desde gravatar.com en Estocolmo

Después de cargar Gravatars desde CDN

Luego habilité las siguientes reglas anteriores en NGINX y ejecuté 5 pruebas desde cada ubicación para garantizar que los activos (Gravatars) se sirvieran desde la caché.

Gravatars cargando desde CDN en San José (prueba de velocidad)
Gravatars cargando desde CDN en San José
Gravatars cargando desde CDN en Melbourne (prueba de velocidad)
Gravatars cargando desde CDN en Melbourne
Gravatars cargando desde CDN en Estocolmo (prueba de velocidad)
Gravatars cargando desde CDN en Estocolmo
San Jose Melbourne Estocolmo
Tiempo de carga (gravatar.com) 0,677 segundos 1,63 segundos 0,806 segundos
Tiempo de carga (CDN) 0,633 segundos 1,36 segundos 0,733 segundos

Es interesante echar un vistazo a los resultados. Cuando cargue sus Gravatars desde gravatar.com, los estará sirviendo desde donde sea que estén sus servidores. Un CDN real como KeyCDN siempre tendrá más POP. Además, reduce las búsquedas de DNS, porque ya estoy haciendo una llamada a mi CDN para mis otros activos. Aquí hay un resumen de la diferencia:

  • San Jose: disminución del 6,5% en el tiempo de carga
  • Melbourne: disminución del 16,56% en el tiempo de carga
  • Estocolmo: disminución del 9,06% en el tiempo de carga

¡No está nada mal para un par de reglas de Nginx y utilizar un CDN que ya tenía en su lugar! Esta es probablemente una de las optimizaciones más fáciles que he realizado en años.

Nota: Tenga en cuenta que esto obviamente usará más ancho de banda de su CDN debido a que ya no los descargará en gravatar.com. Además, aún no teníamos implementada la carga diferida cuando hicimos las pruebas de velocidad. ¡Así que puede esperar resultados aún mejores!

Resumen

Como puede ver, cargar Gravatars desde su propia CDN y cargarlos de forma diferida le permite reducir las búsquedas de DNS, aprovechar los POP adicionales, utilizar una única conexión HTTP / 2, ¡y más! Es casi seguro que verá tiempos de carga más rápidos. ¿Ya ha probado esto en su sitio de WordPress? Si es así, me encantaría escuchar sus pensamientos a continuación.

Luis Miguel

Por Luis Miguel

Content marketing en Iday.es. Me encargo de la creación de contenidos de nuestro propio blog así como el de clientes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *