What is Above The Fold Time and What to Do With It

Ganesh The Awesome Senior Pre & Post-Sales Engineer at GlobalDots

30th August, 2016 5 Min read

• 
• 

If you’re doing business online, you have noticed the huge impact of your web asset’s performance on customer conversions. In other words, the faster your website’s content reaches your audience, the better results you will achieve. Online users are impatient and expect immediate solutions to their requests and problems. As mentioned in previous articles, a slow site is not an option and 57% of visitors will leave a website if it doesn’t load within 3 seconds. The site’s performance affects everything from conversion rate (number of visitors performing the desired action), bounce rate (number of visitors navigating away from your website) to overall revenue loss or gain. Tons of articles have been written on why it’s important to speed up your website and how it all affects conversion rates, and they mostly come down to advising on-site optimization and Content Delivery Network (CDN) deployment in order to improve (reduce) the time it takes to download and display the content of a web page in the browser window. It’s known as Page Load Time (PLT) and is the main metric to follow and improve.

Tweet this: The online industry needs a user-centered approach to measuring web performance

How One AI-Driven Media Platform Cut EBS Costs for AWS ASGs by 48%

However, there is another important segment to consider when optimizing user experience of your site as load time and doc complete time don’t fully cut it as measurement figures. The online industry needs a user-centered approach to measuring web performance, one that shows site owners precisely when visitors are able to see and interact with page content. For that matter, Above The Fold Time (AFT) is a useful user-centered metric to look at.

Defining Above The Fold Time

The “above the fold” expression originated from the newspaper world. It’s the upper half of the front page of the newspaper where the top stories are placed. The main postulate is that the content published above the fold will get the most attention. While a reader might not read the entire paper, he will likely read the front page story and main headlines.
The same principles got applied online as above the fold is the portion of a web page that is visible without scrolling and will get the most attention and will set the stage for future content. Everything above the fold affects visitors to decide whether your site is worth reading at all.

Tweet this: AFT is the time required to load the first sight that visitors encounter on a web page

As mentioned earlier, PLT is the portion of time between the user’s request and the moment when the page is fully rendered and available within the browser. Even if the page takes, for example, 10 seconds to load, a portion of content is often displayed and is available before the page is fully loaded. It’s in this context that AFT becomes useful as metric.

While Page Load Time represents the time the page requires to fully load, Above The Fold Time is the time required to fully load the first sight that visitors encounter on a web page.

The first to tackle the issue was a team at Google, working on project WebPagetest. Their AFT algorithm performed advanced calculation and differentiated between content and ads by classifying static pixels as content and dynamic pixels as ads.

What To Do With AFT?

To put it simple, it’s all about applying on-site optimizations which make it is possible to prioritize and deliver above the fold content to visitors quickly, while the rest of the page is being loaded. Start by identifying the fold lines (a tool like Where Is The Fold or similar) and focus on the visible content. Also, it’s much easier to deliver a portion of the page while the non visible part is being prepared. There’s no need to wait for the footer resources to be loaded.

Google suggests two main strategies:

• Structure HTML to load the critical, above-the-fold content first
• Reduce the amount of data used by resources

Tweet this: HTML, CSS & Javascript: 3 key areas to consider when improving Above The Fold Time (AFT)

However, prioritizing visible content doesn’t have one quick answer. It requires each aspect of the page to be considered in order to improve AFT. There are three key areas to focus on:

1. HTML – most important content needs to be requested by HTML before lany other content. To display above the fold content first, rethinking some basics of HTML layout may be necessary.
2. CSS –  an inlined CSS block that is page specific allows above the fold content to load immediately and external CSS that loads the rest of the site. A webpage loads impressively fast when all the above the fold content doesn’t have to wait for the external CSS files.
3. Javascript – deferring javascripts from loading until the content loads will greatly reduce AFT, especially if it’s using elements like social buttons (Google+, Facebook, Twitter, etc.) or javascript libraries like jQuery.

This article provides more guidelines on how to prioritize above-the-fold content.

Conclusion

There is still no completely precise algorithm or tool that can be applied to any site to consistently and accurately measure performance from a user’s perspective. Coming up with a universal algorithm for such measurement is an enormous undertaking.

The guys working on WebPagetest have since replaced their old AFT measurement with the Speed Index which is a much better representation of user experience. Lately a Perceptual Speed Index (PSI) was established, a novel metric that measures the above-the-fold visual performance of a webpage, while accounting for the layout stability. The issue is being constantly challenged and new solutions are being researched in order to provide a universal and precise solution.

In other words, while AFT is useful as a validation metric, it is not yet a substitute for handling functional readiness although it can provide that much needed edge for understanding and improving overall user experience. If you find yourself battling with your site’s speed, feel free to contact our experts at GlobalDots as they can help you boost your web assets performances.