Combining several CSS files into one for optimization

Question

I have an idea. And I hope it is already implemented somehow.

Here is an example of CSS files in the head of a page

<link rel='stylesheet' id='validate-engine-css-css' href='https://example.net/wp-content/plugins/wysija-newsletters/css/A.validationEngine.jquery.css,qver=2.7.10.pagespeed.cf.jcn-RfgU3K.css' type='text/css' media='all'/>
<link rel='stylesheet' id='cresta-social-crestafont-css' href='https://example.net/wp-content/plugins/cresta-social-share-counter/css/A.csscfont.css,qver=2.6.8.pagespeed.cf.g-Qv5WAJKD.css' type='text/css' media='all'/>
<link rel='stylesheet' id='cresta-social-wp-style-css' href='https://example.net/wp-content/plugins/cresta-social-share-counter/css/A.cresta-wp-css.css,qver=2.6.8.pagespeed.cf.cfwDMPSSsV.css' type='text/css' media='all'/>
<link rel='stylesheet' id='cresta-social-googlefonts-css' href='//fonts.googleapis.com/css?family=Noto+Sans:400,700' type='text/css' media='all'/>
<link rel='stylesheet' id='dashicons-css' href='https://example.net/wp-includes/css/dashicons.min.css,qver=4.7.5.pagespeed.ce.zzwOjyb-IC.css' type='text/css' media='all'/>
<style id='post-views-counter-frontend-css' media='all'>.post-views.entry-meta>span{margin-right:0!important;font: 16px/1}.post-views.entry-meta>span.post-views-icon.dashicons{display:inline-block;font-size:16px;line-height:1;text-decoration:inherit;vertical-align:middle}</style>
<link rel='stylesheet' id='sop-style-css' href='https://example.net/wp-content/plugins/series-of-posts//frontend/css/sop.css?ver=4.7.5' type='text/css' media='all'/>
<link rel='stylesheet' id='sab-plugin-css' href='https://example.net/wp-content/plugins/simple-author-box/css/simple-author-box.min.css,qver=v1.5.pagespeed.ce.2xFwzLgGe9.css' type='text/css' media='all'/>
<link rel='stylesheet' id='bootstrap-css-css' href='https://example.net/wp-content/themes/crosp-blog/css/blog/dependencies/A.bootstrap.min.css,qver=4.7.5.pagespeed.cf.sVmeEoDrxv.css' type='text/css' media='all'/>
<link rel='stylesheet' id='body-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C300%2C400%2C500%2C700&#038;ver=4.7.5' type='text/css' media='all'/>
<link rel='stylesheet' id='common-style-css' href='https://example.net/wp-content/themes/crosp-blog/A.style.css,qver=4.7.5.pagespeed.cf.B1xVDnwTuf.css' type='text/css' media='all'/>
<link rel='stylesheet' id='wpygments-style-native-css' href='https://example.net/wp-content/plugins/wp-pygments-highlighter/css/generated/A.native.css,qver=4.7.5.pagespeed.cf.l8mnePj7pl.css' type='text/css' media='all'/>

As you can see I am using a lot of plugins.

And already use the Google Page Speed module.

So the idea is really simple, register the hook wp_enqueue_style or wp_head, when first request is made or for example, using cronjob. Some function will get all registered styles and combine them into a single CSS file. Of course order should be respected.

As a result it will cache one CSS file, that will include all styles from different plugins and whenever I want to update the cached CSS file, I can just remove it.

This will make a page loading much faster.

I can implement this by myself, but I wonder whether there is any existing solution implements such idea.

I would be grateful for any advice.

Answer 1

There are multiple plugins out there that can do this for you! For example Checkout JS & CSS Script Optimizer.

Answer 2

Also you can go ahead with http2 and forget combining files:

WordPress and HTTP2

Check the section "Disallowed Optimizations: Anything That Reduces the Number of Requests"

Cheers