Speed Prioritize Visible Content

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...

Why should a user wait to see the page just so you can download the CSS, Javascript, images, etc. for your footer when you are not even sure if a user will ever see it?

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.

It has a bio with a photo (an image to download), it is in columns which require CSS that the rest of your page does not require, and maybe it has a twitter feed which uses javascript and must communicate (make external calls, get external files) with a third party - twitter in this case - to present information.

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
• If external resource is CSS or Javascript it then parses that file
• 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...

• HTML
• CSS
• Javascript

HTML

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.

Problem

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.

Solution

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.

Result

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...

CSS

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

Javascript

The javascript that is on your webpage can really add to the page load time, but it doesn't have to.

You can defer your javascripts from loading until the content loads. This is another thing that takes some serious thought, but it is likely the biggest improvement you can make to the loading time of your above the fold content, especially if you are using things like social buttons (Google+, Facebook, Twitter, etc.) or using javascript libraries like jQuery.

How to defer Javascript

I have written an in depth article that explains how to defer javascript for pagespeed

In closing

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.
• Javascript: Defer javascript until after the pageload where ever possible.

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.