I love Critical Path Rendering!
Friday 19 February 2016
...and I love the critical gulp plugin. With this, my site fully renders in under 1 second!
No CDN here!
So what is Critical Path Rendering?
When surfing the web, you are limited to what you can see by your device/monitor. A webpage loads in a top down fashion, and will only fully render (or is shown to you) when it loads and runs all the external sources - such as stylesheets and scripts - dictated by the HTML. HTML has the ability to show 'styles' without the use of loading stylesheets so why don't we leverage that as a way to serve the content quickly to the viewer? (Side note: I should say that CSS came after HTML inline styling to separate style and content, making things more manageable).
This would mean that the user will see the top part of the website almost instantly, giving the impression that the site is fast, reducing 'perceived' loading time, retaining readers, 'cos we all hate waiting for a slow site right?
Enter critical path rendering.
Critical path rendering is a way to automatically insert what CSS we need to insert into the HTML to render the 'top part' of the website to the user. You can also specify how much of your web page you'd like to be inserted into the HTML as a pixel length. I have just stuck with a height of 800px (which will cover all handheld devices) and 1500px width. I haven't been too picky about the range as I didn't see any performance benefits when I experimented with this plugin.
Your HTML will end up looking like this:
Notice that the style tag is loaded with the
<head> of the document. This is what improves the 'time to first render' of the page.
If you'd like to read more, I find that Google's documentation is a great reference.
Until next time!