Like we said last week in our blog post we've been working on some cool new features. We have just updated Innota and now inlining CSS is as easy as it gets.
Why Inline CSS?
There are many reasons to inline CSS.
You might want to improve user experience by inlining some of your CSS or maybe you're writing AMP HTML pages for fast mobile browsing experience.
What's Wrong With External Stylesheets?
The problem is that loading any external CSS inside your head tag blocks rendering. The browser blocks rendering until all external stylesheets are downloaded and processed. This can take a long time and will increase the time to first render.
This is just bad user experience. The user will have to stare at a blank white screen while the browser is downloading stylesheets.
There are a couple of solutions to this problem.
Solution 1: Inline All CSS
If your CSS is small you might want to consider inlining it all inside style tags in your head. Of course, this increases the size of your html file but the browser saves at least one extra request because it doesn't have to download the external stylesheet.
Solution 2: Inline Only a Part of the CSS
If your CSS is large it might not make sense to inline it all. In this case you could inline only a part of the CSS and load the rest later on. In the inlined part you setup only the most necessary styles needed for the above-the-fold content, and the external stylesheet defines the rest of the styles.
This approach allows the browser to render the above-the-fold content using the correct styles even before external stylesheets have been downloaded and processed. This makes the whole user experience faster.
Inlining CSS in Innota
Inlining CSS in Aatos is really easy and it supports all the same great features you can use in external stylesheets, like SCSS processing and minification.
If you have a stylesheet called critical.css you could inline it inside your head like this
<style>{{ css_inline('critical.css') }}</style>
The function css_inline is really simple. You just give it the name of the file you want to inline, and the contents of that file after SCSS processing and minification will be included there.
It's also possible to inline more than one file. css_inline can also take an array of filenames as its argument like this
<style>{{ css_inline(['reset.css', 'base.css']) }}</style>
This will inline both reset.css and base.css files.
You can read more in the documentation.
Conclusions and Further Reading
Creating fast web pages requires both a fast server and content that renders fast. The latter is often neglected but it's even more important on low-powered mobile devices and slow Internet connections.
Some further reading:
- Optimize CSS Delivery - Google PageSpeed Insights
- Optimize Content Efficiency - Google Web Fundamentals
