0

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.

  • 1
    Autoptimize or MMR plugins. The first puts nearly all CSS including inline in one file. The second by grouping. – Christina May 18 '17 at 18:23
  • 1
    I would recommend Autoptimize. This was on the only plugin that could combine all my CSS and JS files without causing any error. – Jack Johansson May 18 '17 at 19:25
1

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

1

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

  • Would not recommend yet. A lot of older browsers don't understand HTTP/2. So, for backwards compatibility, try to minify and combine your files! – xvilo May 20 '17 at 7:51
  • And HTTP/2 only works with SSL ánd most shared web hosting providers don't support HTTP/2 yet – xvilo May 20 '17 at 7:52
  • I do recommend HTTP/2 if you can fit the requirements and if old browsers are not mandatory in your environment. – infrcl May 22 '17 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.