Above the Fold Content: What You Need to Know

The term “above the fold” in digital marketing lingo is used to refer to the part of a web page that is visible in the user’s browser window when a page is first loaded. Any portion of the page that the user would have to scroll down to see is considered “below the fold.”

The origins of the term date back centuries to the birth of the printing press. Newspapers are printed on larger-than-standard paper, and therefore have to be folded in half before they go on newsstands, which means that only the top half of the paper was visible to anyone upon first glance. Because of this, the most important stories, images, and headlines were placed on the first page, “above the fold,” so that the casual skimmer would get the most important information without having to unfold the paper.

This placement strategy has translated from traditional publishing into the world of digital publishing. Just like newspaper publishers learned that they needed to place the most important information in the primest real estate in order to hook a reader’s attention, so do digital marketers. In order to maintain low bounce rates and keep visitors on your site, placing the most striking headlines, images, and information “above the fold,” without making readers scroll down, is key.

What counts as “Above the Fold”

Because window sizes, device displays, and custom browser settings differ wildly from user to user, the point at which scrolling down becomes necessary isn’t standard. It’s impossible to truly know which information will be cut off by the user’s display, so as a general rule, pack the top of your pages with the most important and useful information, so that even if they never scroll down, they’ll get all the information they need.

While you’ll likely have users with all sizes of displays, depending on if they’re visiting from a phone, tablet, or desktop computer, the most critical display to account for is mobile. In 2018, number of mobile users far surpasses any other device. In fact, last year, 63% of all website visits from Google came from a mobile device. When it comes to mobile browsing, “above the fold” means anything that loads on the first screen page without scrolling down when a user navigates to a site. The point at which a user would need to start scrolling therefore becomes “below the fold.” One big problem though: phone screen sizes also vary widely. It’s difficult to know exactly how big your users’ displays are going to be, so it’s important to design your mobile version to be responsive to the user’s browser window so that images and text are resized correctly, allowing the user to view the “above the fold” content that you have deemed most important.

In addition, Google’s new Mobile First Indexing policy means that the search engine’s crawlers will be looking primarily at your site’s mobile version when determining rankings. You can’t afford to ignore mobile – your rankings and your user experience depend on it. You can tell whether your site is ready for the switch to Mobile First Indexing by using the Fetch and Render tool in your Google Search Console. If your website is verified in your console, navigate to “Crawl,” and then click “Fetch as Google.”

When you complete these steps, you should see something like this in your Console:

Image via Big Leap

With this tool you can test any page on your website to see how the Googlebots are crawling it. This is very useful for testing which parts of your content show up above the fold and below the fold on different displays so you can optimize your pages accordingly.

Why Above the Fold matters

According to usability expert Jacob Nielsen, website users spend 80 percent of their visit viewing the above the fold content, meaning this is the most critical real estate on your website and the part of the page that you should consider most in your design process and content creation.

When it comes to actually designing your site, take the above statistic into strong consideration. Place navigation bars, key site functions, and any content directly tied to your business goals at the top of the page so users can easily find them without scrolling down. You can ensure that these items will remain above the fold regardless of the user’s screen size by employing responsive design strategies, which allows your site’s layout, images, content, and CSS elements to automatically resize depending on the size of the user’s display widow. A second big incentive for using responsive design strategies? Google highly favors this design method for mobile search over all other design methods, and will reward your site’s search engine rankings accordingly.

Another important element to consider when you’re deciding what goes above the fold (ATF) is ad placement. Google penalizes sites with too many ads above the fold as it harms the user experience and makes it difficult for a visitor to find what they’re looking for. You shouldn’t be burying your most important content under layers of ads anyway, not to mention using up valuable site real estate with content that doesn’t improve your user experience.

Google explained this further in a post from its Inside Search blog:

“We’ve heard complaints from users that if they click on a result and it’s difficult to find the actual content, they aren’t happy with the experience. Rather than scrolling down the page past a slew of ads, users want to see content right away. … If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold, or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience.”

Google’s crawlers pay attention to what content you place above the fold and if you choose to layer ads instead of including content that’s helpful and relevant for your visitors, your search engine rankings will likely be penalized.

How Google uses your ATF content to determine rankings

Any content that is “below the fold” is “on page load” when a user navigates to that page, meaning it hasn’t loaded yet because it isn’t yet visible to the user. In general, the first 600 pixels of a page, or the ATF content, has loaded when a user navigates to that page. This is important to know because Google recently started taking above the fold content into consideration in a site’s page speed score as more and more searches are being done via mobile search.

A Google Analytics user like yourself might navigate to their Google Console and see the following suggestion on Page Speed:

• Eliminate external render-blocking JavaScript and CSS in above-the-fold content.

But what does that mean? Google wants to see that your CSS fully styles all of your above the fold content. Google’s crawlers will check the load time of your ATF content by taking a screenshot of the completely loaded page and compare that to the visual of the page as it loads to determine the point when the ATF content is considered fully loaded. In order to earn a high score on pagespeed, you need to place the CSS for your above the fold content directly into the HTML of the page. If you don’t, the page won’t load quickly enough to be complete within the first second, which is what Google (and your users) require to be considered a site with high page speeds.

You can learn more about how to optimize the critical rendering path of your website by watching this Google tutorial on rendering paths.

Maximize your above the fold content

The vast majority of your website visitors are viewing your site on a mobile device, and nearly all of them spend most of their time viewing your above the fold content. That means you can’t afford not to strategize how you will use that prime real estate most effectively. As you design your site, take into consideration what navigational elements and company information your users need to see immediately upon page load, and ensure that your site’s design is responsive to any screen size. As you create content, write clear, concise headlines and leads, and include the most important imagery up top. Always assume your readers won’t scroll down, and structure your content accordingly.

Using your above the fold space strategically in your web design and content marketing strategy is critical to the success of your digital marketing strategy. If you’re feeling overwhelmed by the task of optimizing your above the fold content on top of all of your other marketing tasks, we can help. Big Leap partners with small businesses just like yours to make the task of digital content more manageable and more cost effective for savvy business owners like yourself. Interested in learning how Big Leap could help you improve your website strategy? Schedule your free Big Leap Content Marketing consultation today.