Jetpack is a WordPress plugin that brings a ton of features to WordPress. You turn on the features as needed. At the time of this writing, rather than include a separate CSS file for each feature as needed, they load a large concatenated stylesheet with all the CSS together.
I was in a position where I was using a few Jetpack features but actually needed none of the CSS.
Update! As of January 2019 (JetPack 6.9), this is what you need (for functions.php, or functionality plugin) below:
add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
I’ll keep this around for historical reasons, as this is what used to be required:
// 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' );
Thanks to Jon Bellah, TJ Kelly, George Stephanis, and everyone else who chimed in to help me.
I suspect this will change over time. It seems to me the best possible way to do this would be to serve a concatenated stylesheet for just the featured you have turned on, and have a single named thing you can deregister.
I expect this to change over time as well Chris. They’ve only very recently begun concatenating the CSS, which makes me think it’s step 1 in incrementally working their way towards a system where the concatenated file only contains styles for the active modules.
Hi,
Just adding the filter is enough right? Why should I do all the rest, I don’t see them in my source code?
Kind regards,
Willem
Hi Chris,
I’d also like to know if it’s sufficient to just add the filter.
Thanks, Stefan
You need to dequeue the rest of the styles because the Jetpack plugin enqueues them, not your theme source code.
Hi Galen, can you explain a little bit more. When I add the filter, there is no CSS from Jetpack anymore in my sourcecode, why is that nog enough? Also here they talk only about this filter: https://www.twirlingumbrellas.com/wordpress/remove-deregister-jetpack-contact-form-styles/.
Kind regards,
Willem
This code:
… only serves to tell Jetpack that you don’t want to load the concatenated Jetpack stylesheet. Instead, it loads the CSS on a per-module basis, allowing you to dequeue the styles for individual modules at will.
It sounds like you’re saying that if you pass
false
to thejetpack_implode_frontend_css
filter it’s not outputting any Jetpack styles period, concatenated or otherwise. From my understanding, that’s not the way it’s supposed to work and it’s not been my experience. Do you have a live example of this code anywhere?Hi Galen,
Just to understand, there is a filter for ‘frontend_css’, but in the long list of other CSS files I also see ‘stats’ for example. But this is backend right?
Anyways, yes, I have a site where I only use that filter now. But I don’t use much of Jetpack actually, but I do use the stats, but that is backend, but anyways, if I go to the stats page and look at the source I don’t see any ‘stats_reports_css’.
Since the filter is frontend and I already had the extra sidebar widgets module activated, I now included a facebook widget from Jetpack in the frontend of my website, looking at the source code, again no ‘jetpack-widgets’ CSS file.
Do you want me to do other tests? Please let me know to get this clear.
Kind regards,
Willem
Just chiming to say thanks for linking to me and happy I could help! Keep fighting the good fight.
You save my time!! Thanks!
hi,
great list, but you have this line repeated
wp_deregister_style( ‘jetpack-widgets’ ); // Widgets
in alphabetic order:
wp_deregister_style( ‘AtD_style’ ); // After the Deadline
wp_deregister_style( ‘gravatar-profile-widget’ ); // Gravatar Widget
wp_deregister_style( ‘grunion.css’ ); // Grunion contact form
wp_deregister_style( ‘infinity-twentyeleven’ ); // Infinite Scroll – Twentyeleven Theme
wp_deregister_style( ‘infinity-twentyten’ ); // Infinite Scroll – Twentyten Theme
wp_deregister_style( ‘infinity-twentytwelve’ ); // Infinite Scroll – Twentytwelve Theme
wp_deregister_style( ‘jetpack-carousel’ ); // Carousel
wp_deregister_style( ‘jetpack_display_posts_widget’ ); // Display Posts Widget
wp_deregister_style( ‘jetpack_likes’ ); // Likes
wp_deregister_style( ‘jetpack_related-posts’ ); //Related Posts
wp_deregister_style( ‘jetpack-subscriptions’ ); // Subscriptions
wp_deregister_style( ‘jetpack-slideshow’ ); // Slideshows
wp_deregister_style( ‘jetpack-widgets’ ); // Widgets
wp_deregister_style( ‘noticons’ ); // Notes
wp_deregister_style( ‘post-by-email’ ); // Post by Email
wp_deregister_style( ‘presentations’ ); // Presentation shortcode
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( ’tiled-gallery’ ); // Tiled Galleries
wp_deregister_style( ‘the-neverending-homepage’ ); // Infinite Scroll
wp_deregister_style( ‘widget-conditions’ ); // Widget Visibility
wp_deregister_style( ‘widget-grid-and-list’ ); // Top Posts widget
Oh oh Galen. So ‘good job’. Thanks a lot. From 2014 to today, save a lot spped of my site. I am gone correct it; ‘great job’, for me.
Got tired trying to catch that ‘jetpack_css-css’ enqueue, went to Google and got here, thank you. (I saw that
implode_frontend_css
comment in jetpack code, but boy this list)What happens if you simply do the frontend CSS implode return false like this
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
is that the CSS of each Jetpack feature is loaded separately and not concatenated in one CSS file.This way Jetpack only loads the CSS files that correspond to the Jetpack features that one has enabled!
So if one does not have many Jetpack features enabled they can simply do this and avoid the rest of the add filter hell.
PS: Actually I think this is more of a bug, because even in the concatenated version Jetpack should include only the CSS of its enabled features and not every the CSS of every feature.
Could you provide the code to remove “wp-content/plugins/jetpack/_inc/social-logos/social-logos.min.css”
I don’t have the exact code, but I imagine you could use
wp_deuque_style
to prevent the sheet from loading: https://codex.wordpress.org/Function_Reference/wp_dequeue_styleA new addition for this code block:
wp_deregister_style( ‘jetpack-widget-social-icons-styles’ ); // Social icons
Thanks for the help :D
My Google pagespeed went from 66 to 75 with this. Thanks!
Hi, thanks for the solution. Please where should this be added?
Either in your theme’s
functions.php
file or in a custom plugin.