I’m not against Jetpack. Like any WordPress plugin it has its advantages and disadvantages, and I use it myself here at WPHelp and other sites because there are modules that are really good, even better than specialized plugins.
However, it is not perfect either, and one of its shortcomings is that it does not discriminate which modules are active when loading the necessary CSS.
Jetpack does not load the necessary CSS for each module separately, but loads a big stylesheet with the styles that any module may need.
The initial idea is good, especially if you use several modules, because instead of launching several CSS files it only loads one, reducing the number of requests that the browser must make.
But, on the other hand, as a counterpart, it loads much more CSS than necessary, the request results in a heavier file response and, above all, if you don’t use any module that requires CSS, you are loading styles that you don’t need at all.
For example, if you only use Jetpack for statistics, security tools or optimization, you don’t need to load any CSS in front-end, but Jetpack will load the CSS anyway.
Is there a solution?
Well yes, there is an official Jetpack hook that allows you to completely disable Jetpack’s CSS loading on the website.
Just add the following code to the functions.php file of the active theme or your utility plugin:
/* Disable Jetpack CSS */
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );Code language: JavaScript (javascript)Note: This filter hook completely disables Jetpack’s CSS, so if you use any modules that should display something on the website (related posts, social icons, etc.) do not apply this optimization.
