Remove Jetpack CSS unnecessarily from WordPress website

    Removing unnecessary Jetpack CSS out of WordPress website helps reduce page-size and increase load speed.

    As you know, Jetpack is one of the versatile plugins that helps integrate many useful features into WordPress website . WP Basic already has a series to guide how to use the Jetpack plugin with the most popular modules. And because of the versatility, Jetpack is quite cumbersome and heavy, especially when you don't know how to turn off unused modules. But even if you turn off unused modules, Jetpack still increases the website's CSS capacity. Why so?
    Remove Jetpack CSS


    Overview of installing and using the Jetpack plugin
    Prevent Jetpack from creating additional records in the database options table
    Why do you need to remove Jetpack CSS?
    Not only equipped with separate CSS files for each module, Jetpack also aggregates them into one file and loads directly on the front-end. Therefore, even if you have turned off the module, its CSS is still 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, the number of requests and make the website load faster.

    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 functions.phpof the theme file (or child theme) that you are using.

    add_filter ('jetpack_sharing_counts', '__return_false', 99);
    add_filter ('jetpack_implode_frontend_css', '__return_false', 99);
    view raw functions.php hosted with ❤ by GitHub
    For Jetpack 6.8.1 and earlier
    If you are using Jetpack old version (from 6.8.1 and earlier), replace it with the following code. Remember to delete the lines of code that are similar to each module you are using to retain them.

    // First, make sure Jetpack doesn't concatenate all its CSS
    add_filter ('jetpack_implode_frontend_css', '__return_false');
    // 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_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', 'jeherve_remove_all_jp_css');
    view raw functions.php hosted with ❤ by GitHub
    If you don't know how to open a file functions.phpor simply fear making a theme error, please refer to the article " Create functions.php file to insert custom WordPress code ".

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

    If you like this post, please subscribe to my blog to regularly update the best, latest posts via email. Thanks very much. :)

    No comments