How To Clean WordPress Of Jetpack Junk Code

I love Jetpack. It’s a plugin with a ton of functionality. Recently Automattic – the company behind Jetpack – has been improving its utility, allowing users to access features that previously required purchasing separate plans. Such as CDNs for WordPress related JS and CSS, and fast image hosting from EDGE servers across the globe.

They also add stuff that everyone should have on their site like Lazy Loading, brute force protection, etc etc. Suffice to say that I’m a big fan, and have have been using Jetpack for years. However, there is one big problem – it adds a metric tone of useless code to your site that you probably never use!

Slow Pagespeed Reports

If you use Jetpack, run this Pagespeed report by Google and see what it says. You’ll probably notice two things:

1. A file called “devicepx-jetpack.js” is render-blocking your site
2. A 71K file called “jetpack.css”

The first one is more important than the second. The ” devicepx-jetpack.js” file is used by Jetpack to ensure that Gravatars are displayed properly and that images are nicely rendered on high-definition screens. But what if you don’t use either Gravatars, or want this additional functionality?

Perplexingly, even if you use none of the Jetpack features and merely leave the plugin enabled, this additional file will still be loaded.

And what’s worse, is that it’s render-blocking. This means that the contents of your site have to wait for it to download before it can continue loading. Normally, we can “async” or “defer” Javascript so that it loads after the page has finished. But this file doesn’t allow that.

The second file is all the CSS that Jetpack uses for its features. This includes the CSS for everything you don’t use as well. Ideally, you’d like to keep what you use and discard the rest. We’ll see how to do that below.

Removing devicepx-jetpack.js

Fortunately, removing the extra render-blocking script is easy. Just paste the following into your WordPress functions.php:

/ First, make sure Jetpack doesn't concatenate all its CSS
 add_filter( 'jetpack_implode_frontend_css', '__return_false' );

If you don’t know how to do this, read the knowledgebase article on NameHero for a tutorial on pasting code snippets into WordPress. Once you’ve added the code and saved your changes, you’re done! The devicepx-jetpack.js file should now have vanished from your source code.

Selectively Loading Jetpack CSS

If you’ve read my other tutorials on improving page speed, you know that we need to inline the critical CSS and defer the rest. But what if we want to break up the Jetpack CSS rules and only load the ones we need the most?

Luckily for us, Jetpack allows us to split the CSS file into several component parts. We can then load the ones we choose and get rid of the rest. To split up all the CSS files, we use this code in functions.php:

// Then, remove each CSS file, one at a time
 function jeherve_remove_all_jp_css() {
   wp_deregister_style( 'AtD_style' ); // After the Deadline
   wp_deregister_style( 'jetpack_likes' ); // Likes
   wp_deregister_style( 'jetpack-carousel' ); // Carousel
   // 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( 'noticons' ); // Notes
   wp_deregister_style( 'post-by-email' ); // Post by Email
   wp_deregister_style( 'publicize' ); // Publicize
   wp_deregister_style( 'sharedaddy' ); // Sharedaddy
   wp_deregister_style( 'sharing' ); // Sharedaddy Sharing
   wp_deregister_style( 'stats_reports_css' ); // Stats
   wp_deregister_style( 'jetpack-widgets' ); // Widgets
   wp_deregister_style( 'jetpack-slideshow' ); // Slideshows
   wp_deregister_style( 'presentations' ); // Presentation shortcode
   wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions
   wp_deregister_style( 'tiled-gallery' ); // Tiled Galleries
   wp_deregister_style( 'widget-conditions' ); // Widget Visibility
   wp_deregister_style( 'jetpack_display_posts_widget' ); // Display Posts Widget
   wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar Widget
   wp_deregister_style( 'widget-grid-and-list' ); // Top Posts widget
   wp_deregister_style( 'jetpack-widgets' ); // Widgets
   wp_deregister_style( 'social-logos' ); // Sharedaddy social logos
   wp_deregister_style('jetpack-widget-social-icons-styles'); // Social Icons
   wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
 }
 add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

Each line containing “wp_deregister_style” is a CSS component of Jetpack that’s optional. In the above code block, just comment out any CSS that you want to retain by typing “//” in front of the line. For example, I wish to retain the contact form CSS, so I’ve commented out that line.

You might want to keep the CSS for related posts, or slideshows, or subscriptions. Whatever you need, just comment out the line and it’ll be included!

Using this technique, you can filter out all the junk code that Jetpack adds to WordPress, and only retain the essentials. This reduces your site loading time, size, and makes search crawlers happy!