Remove unnecessary Jetpack CSS from your WordPress website helps to reduce page-size and speed uploading.

As you know, Jetpack is one of the versatile plugins that help integrate many useful features into your WordPress website. We will have a whole series to guide how to use the Jetpack plugin with the most popular modules. And also because it is versatile, Jetpack is quite bulky and heavy, especially when you do not know how to turn off unused modules. But even when you turn off unused modules, Jetpack still increases the CSS capacity of the website. Why so?

Why do you need to remove Jetpack CSS?

Not only equipping separate CSS files for each module, but Jetpack also bundles them into one file and loads it directly on the front-end. Therefore, even if you have turned off the module, its CSS will still be present on the website. So of course, our job now is to immediately remove this "big" CSS file of Jetpack to help reduce page-size, number of requests and make the website load faster.

add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );

How to remove Jetpack CSS?

For Jetpack 6.9 and later

Very simple! All you need to do is insert the following code at the end of the theme's functions.php file (or child theme) that you are using.

For Jetpack 6.8.1 and earlier

If you are using an older version of Jetpack (6.8.1 or earlier), replace it with the following code. Remember to delete the code corresponding to each module you are using to retain them.

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

// 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_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
}

If you do not know how to open the functions.php file or are simply afraid of making a theme error, you can refer to the article "Create functions.php file to insert WordPress custom code".

Finally, clear the website cache (and CSS, JS cache if available) and then check the results with tools like GTmetrix or Pingdom (see page-size). It's simple, right? Good luck!

-- Remove unnecessary Jetpack CSS from your WordPress website --