Cómo optimizar la velocidad de carga de Disqus en WordPress

En este vídeo-tutorial te voy a enseñar 2 formas de evitar que Disqus ralentice la velocidad de carga de tu WordPress. Es algo que puede salvar la vida a muchos que usan el sistema de comentarios de Disqus en su WordPress.

YouTube video

El impacto que crea Disqus sobre la velocidad de carga de la web es el siguiente:

Añade más de 0.5MB de peso a nuestras entradas y hace un extra de casi 30 peticiones a cada entrada de blog donde utilicemos Disqus.

Veamos los dos métodos para reducir ese impacto sobre la velocidad de tu WordPress.

Optimizar Disqus con Disqus Conditional Load

Cuándo recomiendo este método: si solo vas a optimizar los comentarios de Disqus. Si quieres optimizar más scripts, pasa al segundo método.

Con el plugin Disqus Conditional Load puedes conseguir que los comentarios de Disqus carguen solamente cuando el usuario llegue con el scroll hacía ellos. No tiene más misterio, solo se trata de instalar y activar el plugin.

Puedes usar este plugin si utilizar el plugin original de Disqus, ya que también ofrece la misma función de implementación de Disqus en tu WordPress.

Optimizar Disqus con Flying Scripts

Cuándo recomiendo este método: si vas a optimizar los comentarios de Disqus y también otros scripts que cargues en tu web (Twitter, Facebook, otros recursos internos o externos).

El plugin Flying Scripts es una pequeña joya que sirve para retrasar la carga de scripts (archivos JavaScript) de nuestro WordPress hasta que el usuario interaccione de alguna forma con la web, como por ejemplo mover el ratón.

Este método es ideal sobre todo si vas a optimizar otros recursos de JavaScript aparte de lo que carga Disqus.

Los pasos a seguir son los siguientes:

  • Instalar y activar el plugin
  • En las opciones del plugin, Keywords escribir disqus-comment-system y dejar el Timeout en 5s.

Por qué escribirnos disqus-comment-system? El plugin reacciona a palabras clave que permitan identificar el o los archivos de JavaScript en nuestro HTML. Si inspeccionamos el HTML de nuestras entradas que usan Disqus, vemos que las URLs desde las que carga sus recursos tienen algo en común, que es la palabra disqus-comment-system, así que si usamos esa keyword en Flying Scripts, nos retrasará la carga de todos esos archivos de JS.

Una vez configurado el plugin es imprescindible borrar la caché para notar los cambios.

Ahora, si inspeccionas la web verás que los recursos que necesita Disqus para funcionar ya no cargan inmediatamente en la web, sinó que se esperan hasta la primera interacción (mover el ratón encima de la web), como vemos en este GIF:

Y esto es todo! Ya sabes cómo en pocos minutos optimizar la velocidad de carga de tus comentarios de Disqus 🙂

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web