Optimiza el uso de Jetpack en tu web WordPress

lego-jetpack
photo credit: Tek F via photopin cc

Jetpack es un plugin de WordPress, o más bien una completa colección de plugins muy interesantes que puede implementar muchas ventajas a nuestro sitio web, pero que también puede ralentizar enormemente nuestro sitio si no tenemos cuidado ya que con cada módulo que activemos, estaremos añadiendo código y llamadas a multitud de archivos css y js que pueden sobrecargar nuestro sitio.

Aquí van una serie de consejos para poder usar más eficientemente Jetpack y evitar que nuestro sitio se transforme en un monstruo lento y pesado.

Lo ideal sería cargar los mínimos css y js, y en caso de cargar alguno más hacerlo sólo donde sea necesario.

No hay un truco único que funcione en todas las instalaciones de WordPress, pues depende de las necesidades de cada web, pero el sentido común nos dice que cuantos más módulos carguemos, más código le estamos inyectando a nuestra web y por lo tanto más lento irá el sitio.

No actives módulos que no necesites realmente

Esto parece obvio, pero es cierto que a veces podemos sentirnos seducidos a activar y probar ciertas funcionalidades que va incluyendo Jetpack en cada actualización y luego los dejamos activados aunque no los necesitemos para nada. Lo ideal es que sólo actives los módulos que necesitas. Esto puedes hacerlo facilmente desde la pantalla de administración de Jetpack, pero si quieres ir más allá y hacer que ni siquiera se carguen los módulos para no tener tentación de activarlos, puedes hacerlo. Para ello encontré la siguiente función, que directamente deshabilita los módulos que están comentados.

Hay que añadir estas funciones al archivo functions.php de tu theme, o si lo prefieres puedes crearte un plugin de funciones y añadir ahí todas tus funciones. Para que un módulo se pueda utilizar descoméntalo de la lista.

Carga los archivos CSS y JS sólo donde sea necesario

Para los módulos que hayamos decidido activar, una buena forma de optimizarlos es cargar los archivos CSS y JS sólo en las páginas que necesitemos ya que de esta manera evitaremos peticiones innecesarias en páginas y post que no usen el módulo en cuestión.

Tiled Galeries y Carousel sólo en las páginas necesarias

Por ejemplo si usamos las Galerías en mosaico y el Carrusel de fotografías, seguramente no necesitemos cargar los archivos js y css que nos añade en todas las páginas. Podemos añadir un condicional para cargar estos archivos sólo en las páginas necesarias usando una función parecida a esta:

Sharedaddy sólo en los artículos individuales

Otro módulo interesante es Sharedaddy, el módulo que añade los botones sociales para compartir. Podemos desactivar completamente los estilos y scripts mediante una opción en la página de administración del plugin en Ajustes → Compartiendo, lo que requerirá añadirlos a nuestro theme; o podemos elegir que se carguen sus estilos y scripts sólo en las entradas individuales (single.php) añadiendo algo así:

Añade los estilos y scripts a tu theme

Otra buena forma de optimizar nuestro sitio con Jetpack es usar reducir el número de archivos CSS añadiendo todos los CSS en nuestra hoja de estilos. Para módulos que usemos en todas las páginas puede ser bastante útil.

Por ejemplo podemos desactivar los CSS del módulo de widgets extra, que añade widgets como entradas y páginas populares, subscripciones y otras  cosas interesantes. Igualmente podría servir para el módulo de scroll infinito, o el de formularios de contacto o cualquier otro.

Para quitar estos archivos podemos escribir una función como la que sigue.

Después deberemos ir a la carpeta del plugin a buscar los CSS de cada módulo y pegar todos los estilos en nuestra hoja de estilos principal. En concreto los CSS de este ejemplo se encuentran en las siguientes rutas dentro de nuestra instalación de WordPress:

  • wp-content/plugins/jetpack/modules/contact-form/css/grunion.css
  • wp-content/plugins/jetpack/modules/contact-form/css/menu-alter.css
  • wp-content/plugins/jetpack/modules/infinite-scroll/infinity.css
  • wp-content/plugins/jetpack/modules/infinite-scroll/themes/twentyten.css
  • wp-content/plugins/jetpack/modules/infinite-scroll/themes/twentyeleven.css
  • wp-content/plugins/jetpack/modules/infinite-scroll/themes/twentytwelve.css
  • wp-content/plugins/jetpack/modules/infinite-scroll/themes/twentythirteen.css
  • wp-content/plugins/jetpack/modules/infinite-scroll/themes/twentyfourteen.css
  • wp-content/plugins/jetpack/modules/widgets/widgets.css
  • wp-content/plugins/jetpack/modules/widgets/widget-grid-and-list.css
  • wp-content/plugins/jetpack/modules/subscriptions/subscriptions.css

Y, en definitiva con cualquier módulo que usemos podemos buscar la manera de optimizarlo dándonos una vuelta por los archivos del plugin, viendo qué carga cada plugin, donde y cómo podemos desactivarlo. Podemos combinar y modificar las funciones necesarias y para que se adapte a las necesidades particulares de cada sitio.

Usa Photon para cargar las imágenes

Photon es un módulo que recomiendo usar. Es una especie de CDN para las imágenes que mejora la velocidad de carga de imágenes en tu sitio, pues las sirve cacheadas desde los potentes servidores de wordpress.com. El único inconveniente que le veo a Photon es que la caché que realiza de las imágenes es de por vida, es decir que si quieres actualizar una imagen deberás subirla de nuevo a tu web con otro nombre diferente.

Espero que os sea útil este artículo y que os ayude a hacer vuestras webs un poquito más rápidas y ligeras sin tener que renunciar completamente a Jetpack. Mejorará la experiencia de usuario en vuestros sitios y haremos de internet un lugar más agradable 🙂

Si te ha resultado útil, comparte y comenta.