Critical rendering path and front end performance notes

There is no fold, unless you’re talking about the critical rendering path, of course.

For a primer on critical rendering paths, Patrick Sexton has a good introduction:

Let’s look at the path that this page takes before it gets displayed….

1. browser downloads the html file
2. browser reads the html and sees that there are one css file, one javascript file and one image
3. browser starts downloading the image
4. browser decides it can not display the webpage without first getting the css and javascript
5. browser downloads the CSS file and reads it to make sure nothing else is being called
6. browser decides it still can not display the webpage yet until it has the javascript
7. browser downloads the javascript file and reads it to make sure nothing else is being called
8. Browser now decides it can display the webpage

When your website has many CSS or JS files, you have to take multiple round trips. This is common for WordPress websites:

Almost every WordPress theme has several css files.

Many have six or seven css files (this is why the pagespeed guideline “combine external CSS files” exists). All of that CSS can be in just one file, but when you add your theme, the fact is that it has several CSS files. So before even one letter can be displayed of your blog the browser must load and parse (read) each of those files which means six or seven roundtrips to a server just to get started.

The visitor to your page is staring at a blank white screen while this is happening because nothing will show up until these “critical” steps are completed.

There are some tricks you can do to make this critical rendering path faster, like not load the stuff below the viewport.

Tiago Garcia has a post with some tips for improving the critical rendering path. You can really go in-depth with this. A bunch of big publications have made use of it. These links are good ones to get started.