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.

/**
* Disable all non-whitelisted jetpack modules.
*
* This will allow all of the currently available Jetpack modules to work
* normally. If there's a module you'd like to disable, simply comment it out
* or remove it from the whitelist and it will no longer load.
*
* @author FAT Media, LLC
* @link http://wpbacon.com/tutorials/disable-jetpack-modules/
*/
add_filter( 'jetpack_get_available_modules', 'prefix_kill_all_the_jetpacks' );
function prefix_kill_all_the_jetpacks( $modules ) {
// A list of Jetpack modules which are allowed to activate.
$whitelist = array(
'after-the-deadline',
'carousel',
'comments',
//'contact-form',
//'custom-css',
'enhanced-distribution',
'gplus-authorship',
//'gravatar-hovercards',
//'infinite-scroll',
//'json-api',
//'latex',
//'likes',
//'markdown'
//'minileven',
//'mobile-push',
'monitor',
'notes',
'omnisearch',
'photon',
//'post-by-email',
'publicize',
'sharedaddy',
//'shortcodes',
'shortlinks',
//'sso',
'stats',
'subscriptions',
'tiled-gallery',
//'vaultpress',
//'videopress',
'widget-visibility',
'widgets'
);
// Deactivate all non-whitelisted modules.
$modules = array_intersect_key( $modules, array_flip( $whitelist ) );
return $modules;
}

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:

//Load Jetpack Tiled Galleries and Carousel only on page with slug "galeria-fotos" and post-format-gallery
function remove_jp_tiled_galeries_carousel_scripts(){
    if ( !has_post_format( 'gallery' ) && !is_page('galeria-fotos') ){
	wp_dequeue_style( 'jetpack-carousel' ); // Carousel css
	wp_dequeue_style( 'tiled-gallery' ); // Tiled galery css
	wp_dequeue_script( 'jetpack-carousel' ); // Carousel js
	wp_dequeue_script( 'tiled-gallery' ); // Tiled galery js
    };
}
add_action( 'wp_footer', 'remove_jp_tiled_galeries_carousel_scripts' );

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í:

//Load Jetpack Shareddady styles only on single post
function remove_jetpack_styles(){
    if( !is_single() ){
        wp_deregister_style('sharedaddy'); // Sharedaddy CSS
        wp_deregister_style('sharing'); // Sharedaddy Sharing CSS
    }
}
add_action('wp_print_styles', 'remove_jetpack_styles', 100);
//Load Jetpack Shareddady scripts only on single post
function remove_jetpack_scripts(){
    if( !is_single() ){
        wp_deregister_script('sharedaddy'); // Sharedaddy JS
        wp_deregister_script('sharing'); // Sharedaddy Sharing JS
    }
}
add_action('wp_print_scripts', 'remove_jetpack_scripts', 100);

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.

//Remove Jetpack styles
function remove_jp_styles(){
    wp_deregister_style('grunion.css'); // Grunion contact form
    wp_deregister_style('the-neverending-homepage'); // Infinite Scroll
    wp_deregister_style('infinity-twentyten'); // Infinite Scroll - Twentyten Theme
    wp_deregister_style('infinity-twentyeleven'); // Infinite Scroll - Twentyeleven Theme
    wp_deregister_style('infinity-twentytwelve'); // Infinite Scroll - Twentytwelve Theme
    wp_deregister_style('infinity-twentythirteen'); // Infinite Scroll - Twentythirteen Theme
    wp_deregister_style('infinity-twentyfourteen'); // Infinite Scroll - Twentyfourteen Theme
    wp_deregister_style('jetpack-widgets'); // Widgets
    wp_dequeue_style( "widget-grid-and-list" );  //top post and pages
    wp_deregister_style('jetpack-subscriptions'); // suscriptions
}
add_action('wp_print_styles', 'remove_jp_styles', 100);

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.

Deja tu opinión

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

11 thoughts on “Optimiza el uso de Jetpack en tu web WordPress

  1. Consulta, implemente el modulo de galería en mosaico del JetPack pero no funciona. Cuando hago click en las imágenes estas se abren como en un nueva pantalla, con información del archivo, con posibilidad de comentarios y otras cosas. No es el comportamiento que espero y según los ejemplos que veo, que suelen mostrar las imágenes en pantalla completa. Cual puede ser el error?

    • Hola Luis, depende de muchas cosas que te funcione el plugin. Puede que no lo hayas configurado correctamente, o que tenga alguna incompatibilidad con tu tema,

      Si necesitas ayuda concreta con tu caso, puedes escribirme un mail desde la página de contacto para ver con más detalle tu problema.

  2. Hola:
    Gracias por la información, muy completa e interesante. Sólo una pregunta (yo es que soy un poco torpe con la programación): ¿en qué fichero añadimos el código que das para las galerías y carrusel?

    • Hola Alberto, puedes añadirlo en el function.php de tu theme, o si no quieres modificar el theme directamente, puedes crear un plugin de funciones para añadir tus funciones personalizadas. En el post está comentado.

      • Ok, gracias. Había creado el plugin, pero no he conseguido ver la forma de activarlo y desactivarlo para las entradas.

  3. Excelente Articulo Antonio, en realidad recien estoy aprendiendo de WordPress ya que vengo de Blogger, pero veo que el tema no es solo publicar y listo, tambien hay mucho que aprender de cara a la optimizacion. Tu articulo me hizo comprender que no solo debo activar las opciones porque pintan bonito sino por que en verdad las utilizare. Saludos 😉