What is Above the Fold Content?

If you use many performance testing tools like Google PageSpeed Insights and GTMetrix, you might run across a recommendation: “Optimize Delivery of Above the Fold Content.” So what is Above the Fold Content anyway? And how can you optimize it?

Defining Above the Fold

“Above the Fold” is an industry term for files and content that has to load before your page can start displaying anything. It means the content above the bottom of your visitor’s browser window. Until your “Above the Fold” items have loaded, the user simply sees a blank page. Prioritizing what items load “Above the Fold” and what items can load later on is one of the important steps in optimizing your site for a faster browser load time.

What goes Above the Fold?

Most importantly, you want your site’s “Critical CSS” to load “Above the Fold” – this CSS is the styling information from your theme (and possibly plugins). There may be other CSS files that aren’t as important to load up front though – for instance, styles for your footer (often “Below the Fold”), or styles for certain features or widgets. You can use a tool like Above the Fold Optimization to extract your site’s CSS, and then use a “Critical CSS” extractor to find what should be prioritized first.

What shouldn’t go Above the Fold?

Most often, JavaScript shouldn’t have to load before your site can begin rendering. Since JavaScript usually controls an action like a popup, autoscroll, or loading more content, those files can needlessly bulk up your Above the Fold content. Whenever possible, these files should be deferred to load in the footer instead. The one primary exception to this rule is with sliders: the jQuery files that control the slider need to be loaded Above the Fold in order to properly rotate the slider images.

How can I see what’s loaded Above the Fold on my site?

Use a testing tool that offers a waterfall view, like WebPageTest or Pingdom. Look at what is being loaded before the “start render” line to see what is critical. If it’s not critical, defer it! If it is critical, be sure to minify it so the browser can read it easily.