Is it possible to unenqueue ALL css files from loading on the front end of Wordpress but keep backend loading css as normal?

Question

Basically, I am trying to load only the css rules that are being used by the site, Would like to have an option to Remove all front-end CSS from loading in favor of 1 file that has all CSS in it from all plugins that is actually being used on the site. I wish to reduce over half a MB of css that is not being used on a site.

Thinking there must be a way to unenqueue all styles that are enqueued in wordpress front-end and replace with 1 minified css file instead.

Any ideas? Would like for css to load as normal in the backend admin area though.

Honestly, I know how this sounds, like a madman here. Like, why have a CMS at all than right? Well, somethings might need to change, and than would need to recompile all used css on the site for this. It's really just a thought to get site speed as fast as possible for mobile devices, css-wise. And than eventually caching and CDN this css file for even faster performance.

Answer 1

To dequeue all css files from the site frontend, you can use the following code:

function my_prefix_remove_all_styles() {
    if ( is_admin() ) {
        return; // Return if the request is for an administrative interface page
    }

    global $wp_styles;
    $wp_styles->queue = array();
}

add_action( 'wp_print_styles', 'my_prefix_remove_all_styles', 100 );

Please note that the above code will not work for inline styles but it will dequeue all the styles that were correctly enqueued in WordPress via the wp_enqueue_scripts hook. Then, you can combine the styles yourself in one big css file and minify it.

If you are ok to use a plugin for static resource optimization, I can suggest that you use WP Fastest Cache. It does minification, concatenation and file caching automatically. You can also exclude particular files from caching/minification.