What is above-fold-content?
Above the fold content (or Visible Content) is content that appears on the page first when a user loads your website.
As you can see in the image it is the first portion of your page and by making sure this loads first your users will not have to wait with a blank screen before they are engaged. This makes for a better user experience and, as statistics show, will increase the amount of users that will become customers (known as the conversion rate).
When a web browser loads a website it follows a particular process
- 1. First it downloads the HTML file.
- 2. Then it reads (or renders) through the HTML code line at a time
The answer to this sounds simple. Move the requests for such files below the html that loads your above the fold content, right? Well yes that is correct and in fact we place it right at the bottom of the code before the closing body tag but that does cause an issue.
The above fold content requires information from the CSS file in order to display properly. So what we do is place all the CSS required to display the above-the-fold content within the html file itself. We place it within style tags above the html and within the header tags as shown below.
<style> REQUIRED CSS </style>
<div> REQUIRED HTML FOR ABOVE-THE-FOLD CONTENT </div>
This may sound very complicate however there are some tools that help us do this.
The simplest tool I have found is “Sitelocity’s Critical Path Generator”
Simply enter your site address including the http:// or https:// and click the ‘GENERATE CRITICAL PATH CSS’ button. The tool will then automatically download your sites CSS file and copy the required section for the above the fold content. It then minifies the CSS and outputs it ready for you to input into your HTML file as described above.
Another tool is the “Critical Path CSS Generator”
- 1. enter your website address
- 2. Paste your entire CSS file into the box indicated
- 3. Hit the “create Critical Path CSS” button
Then it will generate the CSS required to display the above fold content. You then simply add the generated CSS into your html file as described above.
To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.