Critical Path CSS As a Service

Page speed is one of the most important optimization targets of web-developers nowadays. Where users accessing websites with all kinds of devices and connections, a fast loading page means better user experience, higher conversion rates and last but not least higher search engine rankings.

With Page Speed Insights, Google offers a service both for getting a comparable page speed measure and improving it. The requirements for a very good rating are hard, but with a mix of knowledge and experience mostly implementable.

critical CSS differs with the content of your page and which device you are reading the page with.

There is one requirement, though, that I’ve always had a hard time to fix: “Eliminating render blocking CSS”. It’s fixable, though. You just have to extract the CSS rules important for your above the fold content from your CSS, inline it in a style-tag in the header and load the rest of the CSS in the footer. There is even an automatic solution to extract the critical path CSS.

The problem is that the critical CSS (the layouts for what you see first on your screen), differs with the content of your page and which device you are reading the page with. The critical CSS for a mobile device might be completely different from the one for a desktop device. It might even differ from page to page. Critical path CSS for a page with a big header image might be completely different from one without.

you have to create above the fold CSS for every page and at least for mobile and desktop sizes

To solve these problems, you have to create above the fold CSS for every page and at least for mobile and desktop sizes and load it according to the target device. On top of that, you have to regenerate as soon the content of the page changes. That is nearly impossible to solve when you build the site, even with one of those lovely taskmanagers.  You could do it manually, but depending on the sites update frequency, that could be hours of work every month, week or day.

eliminate render blocking CSS as a service

Another possibility is to generate the critical path CSS automatically and on demand. I’ve been working on a service, which is doing exactly that, the last couple of weeks. And today we could gladly launch our first preview of eliminate-render-blocking-css.com. It’s build on the incredible critical CSS generator by Addy Osmany and will provide an API to extract precisely the above the fold CSS you need. To easily integrate it into your CMS we are working on plugins for WordPress, Drupal and Joomla, which will be published soon.

If this sounds interesting, take a look and register your e-mail address to stay updated!

3 thoughts on “Critical Path CSS As a Service

Leave a Reply

Your email address will not be published. Required fields are marked *