What is visible content?
- Visible content is the portion of a webpage users see on their screen before they scroll
- Sometimes referred to as "above the fold"
Prioritize content that is initially visible to a user
Websites that seem very fast and crisp to load are often just as large as slow websites, they have just prioritized above the fold content so that the site appears to load very fast.
Users love webpages that show content quickly and so does Google. This article will provide some guidance on how to concentrate on above the fold content for significantly faster page loads. If you are getting the "prioritize visible content" error on the Google pagespeed tool, this will help you fix it.
Reducing the size of the above the fold content
Google suggests two main strategies for accomplishing this, and they provide us a pretty good outline for examining our pages. We will cover both in depth.
- Structure your HTML to load the critical, above-the-fold content first
- Reduce the amount of data used by your resources
Prioritize main content
One of the quickest, simplest and common ways to improve how a user perceives your webpage load time is to ensure your HTML is presenting the content of your webpage first before it is presenting other things. To illustrate this let's look at a very common scenario...
Page with a sidebar
In the image above we see a webpage that has a sidebar on the left and the content on the right. We also see that in the HTML the sidebar comes before the content in the HTML.
This is an example of critical content being pushed behind other things. The reason for this is that if the sidebar is mentioned first in the HTML then the sidebar will have to load first, before the content area.
In a typical sidebar there are advertisements and social buttons and other such content that relies on third parties. So if your sidebar is loading before your main content then you are actually making the user wait to see the content they came to see. Let's say you have a Google adsense ad, a twitter button, facebook button, and a Google plus button in that sidebar. In this scenario, you are not only adding seconds to the page load time, you are doing something worse. You are adding seconds to the time that it takes a user to see your content.
If the things in your sidebar are taking time to load, the browser will have to wait until all of it loads before it can show the user the main content. To a user this is frustrating because they didn't come to your page to look at your sidebar, footer or social buttons, they came to see your main content.
This could be changed with one simple action. Doing this step will present your users with the main content first.
Place the content section before the sidebar section
If you simply copy and paste the sidebar section and paste it after the content section, you page will present the main content first without having to wait for the things in your sidebar.
When the content section comes first in your HTML, the content will load first...
- Your webpage downloads and displays your content
- Users can see the content almost immediately
- While your user is reading, your sidebar ads and buttons can be loading
- Users are happy because they are not waiting
This is an example of changing the structure of your HTML to provide critical content first, but there is more we must do to make sure our webpages load the way users (and Google) want to see a pageload.
Loading above the fold content first
The concept of loading above the fold content can be confusing. To explain what Google means by this, think about your footer...
I would venture to say that quite alot of of your visitors will never even see your footer. Consider these situations...
- A user visits your home page, sees what they are looking for in your main navigation, clicks and goes to that page.
- A user goes to one of your webpages, sees an ad and clicks it (leaving your page)
- A user is looking for a lamp to buy and ends up on your lamp page, user sees a lamp they want and clicks on the image to go to the item detail page.
In all the above scenarios, the user never saw your footer! Yet, you are making those users load several files for your footer before they are even presented with the information they actually came to see.
This is an unwise way to do things in our newer, faster world.
The footer is at the bottom of the page for a reason
In the image above we see a webpage that has a rather busy footer. Many wordpress blog themes have such a footer.
In short, this footer does alot of great things, but in most situations the browser must figure out and download all those footer things before it loads the page. This makes no sense to load up so many things for something the user may never even see, while keeping the user from seeing what they came to see.
How to load the above the fold content first
In an ideal situation, the user would see the main content of your webpage without waiting for your footer to load. But how is this accomplished?
The way it is done, I am not going to lie to you, requires some thought and planning. However once you figure out how to do it for one page you will be able to make it work across your entire website rather easily. But you have to start with one page. Let's overview how a webpage loads...
How a browser loads a webpage
When your webpage loads, the browser takes certain steps that determine how the page will load (this is a simplified version, but basically what happens):
- Browser downloads HTML file
- It parses (looks through) the HTML
- It encounters something it must load (image, external CSS file, etc.) and stops parsing HTML
- It loads the external resource
- It then continues to parse the HTML until it comes to another resource that must be loaded
Throughout this process, the browser it trying to show as much of the content as possible, as soon as possible. There are therefore ways to ensure some of our webpage content loads first and completely, before the browser encounters hurdles like external resources.
Above the fold content can be prioritized by not making it rely on any external resources, or loading those resources early, before the browser has to load anything that must be parsed.
We will look at a few things that we are familiar with, but as I will show you, can be used better. The things we will look at are...
We have already seen above that the way your HTML calls things can affect how a page is loaded. The things mentioned in your HTML will load sequentially for the most part (first line first, second line second, etc.), so one of the most important ways to prioritize content is to ensure your most important content is called by your HTML before less important content. To display above the fold content first, you may need to rethink some basics of your HTML layout.
Here is a very common layout and a solution to illustrate how we can change the way our page loads just through HTML layout.
We have a webpage that has a side bar div and a main content div. If we try to "load above the fold content first" with this layout, we can't, or are very limited.
Let's make our webpage visually the same, but with a different layout. In our new layout we have an above the fold sidebar and an above the fold content area & a below the fold sidebar and below the fold content area.
Now that we have above the fold elements separate from other page things, we can have inlined CSS for the above the fold and an external CSS file that loads the rest of the site CSS.
The difference is now when someone comes to our webpage it loads impressively fast because all the above the fold content stuff doesn't have to wait for the external CSS files to load. Which brings us to...
Your CSS is where much of the magic of a speedy page load occurs. I will summarize below, but I have written about it extensively on my optimize CSS delivery page.
An ideal CSS setup will speed up your page, not slow it down. The way this is done is to have...
- one (and only one) external CSS file
- an inlined CSS block that is page specific and allows your above the fold content to load immediately.
You can discover how your CSS is loading using the CSS delivery tool.
Learn more about render blocking css.
Prioritizing visible content doesn't have one easy answer, but requires you to look at each aspect of your page and think how it could be better.The first things to look at (a summary):
- HTML: Make sure main content is loading before anything else. Layout your webpage with above the fold content in mind (even if you have to add some divs).
- CSS. Examine your CSS delivery with the CSS tool.
An example page that makes no external calls at all
I have made an example page that humorously (hopefully) explains why it is so fast. The page is here
The page makes no external calls whatsoever. The CSS and images are completely contained within the HTML, so as soon as the HTML file is downloaded, the page displays. This example provides us with an ideal, but unrealistic situation. Pages like this simply do not fill most of our needs. However, the page does a great job illustrating that the majority of pagespeed problems come from what is being called by the page and how it is being called. We see that if a page is not calling any external resources, it loads pretty much instantly.