How to dynamically inline your css
Mon 21st Aug 2017
When it comes to optimising your web pages for speed, one of the best things you can do is minify and inline your CSS – that is, include it directly in your HTML source rather than call it from an external stylesheet.
In doing so, you’ll remove your CSS files as a renderblocking resource, and Google will thank you for it…as will your users when they get your webpages just that little bit faster.
Ideally, you’ll go to great lengths to only include the essential CSS for the page currently being viewed; if you want to go mad, you’ll even limit the inline CSS to that which is necessary to render the initially viewable portion of the page. Doing either of these things can be a lot of work, however…and we’ve found, at least when considering Google’s Page Speed Insights scoring, that it’s not always necessary.
If you can make your overall CSS small enough, then you can just pump the whole thing out into your head and reap the rewards of one less renderblocking asset on your page. The trick is to keep the overall size of your page markup below around 4kb – this is the maximum amount of data a HTTP request can deal with in a single call, so as long as you’re below that magic number, all of your markup – HTML and inlined CSS – will arrive in a single chunk.
Of course, minifying and inlining all of your CSS makes it harder to make changes, or at the very least adds to your workflow as you deal with shrinking and pasting in your files every time you make a change…more so if you have multiple files to include. That’s why we do it dynamically, using PHP:
<?php
/*get the css and minify it and include it in the header*/
$minfiles[] = get_template_directory().'/css/style.css';
$minfiles[] = get_template_directory().'/css/fancybox.css';
$minfiles[] = get_template_directory().'/css/flexslider.css';
$minfiles[] = get_template_directory().'/jplayer/jplayer.css';
$minfiles[] = get_template_directory().'/css/isotope.css';
$minfiles[] = get_template_directory().'/css/mqueries.css';
$minfiles[] = 'https://fonts.googleapis.com/css?family=Montserrat:400,700';
foreach($minfiles as $minfile) {
$unmincss = file_get_contents($minfile);
$unmincss = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $unmincss);
$unmincss = str_replace(': ', ':', $unmincss);
$unmincss = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $unmincss);
$mincss .= $unmincss;
}
?>
<style>
<?php echo $mincss; ?>
</style>
What’s happening here is actually pretty simple. For clarity, we’re doing this in PHP and WordPress.
- First, we build up an array of all the stylesheets we’ll want to include. You’ll be happy to note that you can include a lot before it becomes a problem! Note that we’re also including an external stylesheet. The ‘get_template_directory()’ function is because we’re using WordPress.
- Then, we loop through each of the stylesheets and run them through a series of functions to remove whitespaces, tabs, newlines etc., effectively minifying the CSS, before adding it to the $mincss variable.
- Finally, we echo out the $mincss between some style tags. If it’s not obvious, all of this goes within the <head>xxxx</head> of your HTML.
What you then end up with is something that looks like this:
…which is a screenshot of our source. Basically, all of our site’s CSS is now minified and included in the head of our HTML, completely removing CSS as a render blocking resource AND removing the FOUC (flash of unstyled content) problem you’d see if you removed the render blocking issue by putting your CSS at the bottom of the page.
Hope that helps!
Need some WordPress help?
We’ve been working with WordPress for a long time, and we know how to make it sing.