How To Stop Loading Jetpack’s CSS File

Jetpack is one of my favorite plugins. There are some developers in the WordPress community who already have their pitchforks out. But, Jetpack has a useful collection of features that almost any blogger would need… and beautiful math. If you don’t follow me on Twitter, I routinely mock beautiful math. It feels and looks like the most unused feature in Jetpack. I for the life of me cannot figure out why it is enabled by default. Speaking of which, if you don’t follow me on Twitter, you should do that.

This being said, I am actually using Jetpack on this website. However, unless you really looked for it, you would never know Jetpack is installed. However, I had to jump through the some hoops to make it that way.

I use JetPack for its security, statistics, contact form, and other things. However, Jetpack is a bloated plugin and I had to take some steps to “un-bloat” it as much as possible; including stopping Jetpack’s CSS file from loading.

I also had to remove the devicepx.js file. Upon further research, the Jetpack team is contemplating removing this file altogether. It’s functionality is pointless.

Stop Talking. What Must I Do?

How rude. In all seriousness, if you must know, Jetpack goofed in the latest version of the plugin. There is a simple fix to stop Jetpack’s CSS file from loading. If you are using any front-facing features of Jetpack, do not get rid of the CSS file. The CSS file is most likely making the front-facing features look pretty and usable.

To stop loading Jetpack’s CSS file, you will need to add some custom code. I recommend creating a plugin to do this separately. Or, because I am awesome, you can download the plugin I made, that does just this. The plugin is available for download at the bottom of this post.

You cannot remove the compiled CSS files, so to stop the CSS from loading, the following needs to happen.

Step 1: Disable the Compilation Feature
Step 2: Dequeue Remaining CSS Files

Since I don’t expect you to remember each of these steps individually, I am going to copy the PHP code below.

add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 ); 
function sertmedia_remove_all_jp_css() {
wp_deregister_style( 'AtD_style' ); // After the Deadline
wp_deregister_style( 'jetpack_likes' ); // Likes
wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
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
add_action('wp_print_styles', 'sertmedia_remove_all_jp_css' )

This code can be added to your functions.php file, a child theme, or in a custom site plugin (or the plugin down below). If you for some reason stick it into the parent themes functions.php file you should head over to my contact page and email me saying you want to signup for my $20 per month maintenance plan. This is for when you accidentally break something. I will have your site covered with daily backups.

Now, What About Devicepx.js?

What about it? Why does it exist? No one knows why devicepx.js exists. We will be on Jetpack release 8.9 before it is removed, but let’s remove it. The code does nothing. Devicepx.js is not used for any function of Jetpack.

function sertmedia_remove_devicepx_junk() {
add_action( 'wp_enqueue_scripts', 'sertmedia_remove_devicepx_junk', PHP_INT_MAX );

The above code can be added to the same plugin. Or into the functions.php file wherever. As for the code stopping Jetpack’s CSS file from loading, put it after and use PHP comments. I am not going to add them as everyone has their own system for adding PHP comments. If you do not know what PHP comments are, I direct you to my contact form. (Just kidding. Here is the documentation.)

Where Is That Plugin You Promised Me?

Well hello there Mrs/Mr. Pushy. How are you today? Do you mean this plugin!? 

Closing Thoughts

I care a lot about website performance and JetPack kind of sucks at that. It is not their fault as they are doing all they can. It is just a bit bloated, like when you have too many beers at the bar. Or my Chihuahua Spaz after eating too many biscuits. It’s all the same.

In conclusion, I use Jetpack, just not all its functionality. By removing the unnecessary bits is part of why my website’s page-size is so small.

scott hartley

About the author

Scott is a web performance geek, lover of all things coffee, and avid video game player. His WordPress work delves into web performance, web security, and SEO.

Leave a Comment