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?
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);view raw functions.php hosted with ❤ by GitHub
add_filter ('jetpack_implode_frontend_css', '__return_false', 99);
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.
view raw functions.php hosted with ❤ by GitHub
// 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');
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. :)
Post a Comment
Post a Comment