Prioritize Visible Content


This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to prioritize visible content. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

What is visible content?

Visible content (also known as above the fold content) is what a user first sees on a website. This is normally the title and navigation menu as shown in the diagram.


Why Prioritize Visible Content?

Many webpages are fairly large and no user wants to wait for an entire page to load before they see any visible content. Loading the visible content before other elements of a page creates a much better user experience.

How to Prioritize Visible Content?

There are many ways to reduce the loading time of the above the fold or visible content and thus prioritizing this content.

One way is to reduce the memory required to display this content which reduces download time and increases the load time. If you have been following this tutorial in order then you will have already reduced the memory of all images, CSS and html.

The next step is to make sure that the html required for the above the fold content is placed at the top of the html file (within the <body>……</body> tags).

 This is because a web browser reads the html one line of code at a time and in order. So if you have placed the code for the visible content below another page element then the browser has to read and execute this code first.

To fix this simply cut and paste the html block that contains the visible content above all the other elements.

Another way to speed up the loading of the visible content is to place all the CSS required to display the content within the HTML file itself instead of a separate file. But this is the next chapter in our tutorial.

Congratulations, you have managed to prioritize visible content. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.


 Improving page speed using the Google page speed insights developer tool