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.