Some said it was irrelevant, others said it was dead, and many are even calling it a “myth”. But what is the real score with “above the fold”? Let’s find out together.

With an SEO agency, you can have information like this and more, just contact us in ProfitCommerce to get what need in your business.

What does “above the fold” mean?

Above the fold (ATF) describes the content that is visible when a page is loaded and before any scrolling of that page takes place. Anything lower down is classed as below the fold. Where does it come from? Most people in the Western World read pages from left to right and from top to bottom so what people see first, is the initial view of the webpage. However, on average, five times as many people read the headline as read the body copy.

Traditionally, in the early days, it refers to the top half of the front page of a broadsheet newspaper and is so visible when the paper is folded. In web terms, ATF is any content your visitor sees the moment they land on your website, before scrolling. Users are used to scrolling these days (especially on mobile), but this area of online real estate is still incredibly important. For another example, think of a book cover.

The cover of a book will influence a reader’s opinion before they even turn the pages. For example, the New York Times of today mimics the old-school newspaper layout, but still has the most important content at the top fold of the page.

Today,  as it applies to Web design, is the portion of a Web page that is visible in a browser window when the page first loads.

The half portion of the page that requires scrolling in order to see content is called “below the fold.” The exact location of where above and below the fold change depending on different screen sizes, resolutions, toolbars, browser customizations, along with whether a website is being viewed on a desktop or mobile device. 84% is the average difference between how above vs below the fold content is viewed and consumed. But, many visitors will only see the first fold and they will not scroll down the page. 

There are so many screen sizes the idea of a common fold is long gone. Yet, ATF holds a great deal of importance for web pages. Still, the changing behavior of users can be largely attributed to the increased usage of mobile devices.

Why is above the fold important?

While there’s no literal fold on a website, the reasons why the fold was important for newspapers still exist for web pages. The information above the fold should attract attention, hold interest, and convince viewers to take action. The information should quickly communicate what the site is about and why visitors should say to it.

It is prime real estate that gets the most attention from users, but users will scroll if what they see ATF interests them enough to keep them reading, and are beginning to take in more as they scroll.

Here again, analytics can give you insight into how your users interact with elements above the fold and how likely they are to scroll down the page. You may find that users click ATF to find something that was actually further down the site, but they didn’t know to scroll down.

As publishers moved their businesses online and web design evolved in the 1990s, the term continued to stick. Today, the fold no longer refers to an actual fold in a newspaper, but the bottom of a browser window or approximately 600 pixels from the top of the page. 

Does the above fold matter anymore?

Yes, being “above the fold” still matters – just not for the same reasons it once did. Content marketing is king in today’s Web marketplace. Whereas obeying the law of “staying above the fold” was once about design and functionality, it is now a cardinal rule of content development and creation.

Those who call “above the fold” dead are typically marketers who are referring to conversions and sales. They argue that having a big CTA, or sign-up box isn’t the best way to convert visitors the moment they land on your site. However, above the fold content isn’t meant for visitors to become subscribers or buyers right away.

As we already knew, the original version has a conversion rate (CR) that in this case is 54%. This matches the data of the web analytics tool that I mentioned before. On the other hand, the variant has achieved a CR greater than 60%, which represents an improvement of 12.3%. The data is statistically significant, with a confidence value greater than 95%. 

The above the fold area of a landing page is like the storefront of a brick-and-mortar business or the cover of a book. It’s the first thing a visitor sees and needs to make a good impression if you want to keep them from bouncing. That’s why above the fold still matters.

However, there are multiple studies that show how elements placed below the fold attract similar (or higher in some cases) user attention, compared to elements placed ATF.

The average many websites use above the fold measured is 1000 px wide X 600 px high consensus. 

How to optimize above the fold content?

This region of your website is one of the most important areas of your website to optimize. Without taking the time to properly optimize this area, you’re going to lose or even confuse visitors, and potentially see a drop in your search engine rankings. 

If you can properly optimize your above-the-fold content, you’ll find it’s much easier to hook your visitors and get them to stay on your site, read your content, and even become a subscriber or customers.

The increasing usage of mobile devices for web browsing further complicates the concept of optimizing web design for ATF.

Here’s how to optimize above the fold content:

1. Add a powerful H1 tag

Above-the-fold optimization, why first fold of website and H1 tags SEO are important?

Your H1 tag (also known as your heading tag) is the first thing people will see. Your header can communicate your unique selling proposition (USP). This is what sets your site apart from the competition, and helps to spell out what makes your website unique.

If you’re creating the header for your homepage you’ll want this to describe your company in as few words as possible, while still making it stand out. Your header will communicate this unique value, while the copy further down the bottom will further expand upon this headline, or promise you made to your visitors.

2. Add keywords in the opening paragraphs

If possible, include your SEO keywords as early on within the content as possible. Ideally, within your opening paragraphs.

This lets the search engines know what your site is going to be about, plus it helps to let your readers know they’re in the right place.

3. Optimize for Google featured snippet

Featured snippets typically appear at the top of Google’s search results and seek to answer the search term in the search results themselves.

Usually, this information is pulled from the top ranks, but it can also be pulled from places that aren’t ranking as high. This means you can get more traffic and rankings without as much SEO effort.

These are how you optimize your featured snippet:

Start by answering the question – Instead of starting your post with a long intro, try to answer the user’s question, or the main information from the keyword as early in the text as possible. Then, you can proceed with everything else that backs up that answer.

Format your content properly – If there’s already a piece of content ranking for the featured snippet, then make sure you format your post the same way.

Make your answer brief  – Most featured snippets are pretty short and have a length between 40 to 50 words. You want to provide an answer to the question posed by the keyword in the shortest amount of words possible.

4. Add visible call to action buttons

Ultimately, the call-to-action you choose to place ATF will depend on the type of website you’re running.

Smart Passive Income has a very simple and straightforward CTA of ‘Get Started’, but it makes sense within the context of the headline and the body copy.

Keep in mind that the call to action doesn’t have to be tied to making a purchase either. It could even be joining your email list, or simply learning more about what you offer.

Here are a few tips to keep in mind when crafting your CTA:

• It needs to capture your visitor’s attention
• It needs to be engaging (not something boring like “Click Here”)
• It needs to make sense in the context of the rest of the content
• It needs to be short, don’t make your CTA a sentence
• It needs to invoke urgency so your visitors take action now, not a week from now

Banner Blindness is when a visitor of a website subconsciously avoids advertisements and misses key website information or calls to action instead. 

What if, for example, the CTA tucked away down at the bottom? Putting the call to action button below the fold results in the same conversion as having it above the fold.

Higher conversion rates have nothing to do with whether the button is above the fold, and everything to do with whether the button is below the right amount of good copy.

 Indeed, in industries where web designers know enough about marketing to use calls to action in the first place, you see an awful lot of “templatification”—websites all starting to look suspiciously alike.

5. Make sure that there is text content above the fold

This more so applies to blog post length. However, the same can be said for most other places of your website. But, this also applies to your homepage or other landing pages where you’re asking people to sign-up, up, or take action based on your CTA.

You’ll need additional content to educate your visitors and provide them with useful information. It’s easy to see why so many brands build their shopping experience around the customer journey. Hence, a well-thought above folding design should always be coupled with awesome content. 

6. Add Alt text for images

There are a few different ways to optimize your images, but the most important is what’s known as “Alt text” or “alt tag”. If you’re using WordPress you’ll find a small text field that lets you input relevant keywords. These will show up when a user hovers over the image, in some cases.

Overall, the goal with image optimization is to provide the search engines with even more context about what your web page/website is about while providing a better user experience to your visitors. Just as people are searching for written content, they’re doing the same thing for images and other visual content. 

7. Disable lazy loading for above the fold images

Lazy loading is a process that only loads content when a user visits that part of the site. So, if a user only views the top part of your web page and immediately leaves, the bottom of the page will never load. This can greatly improve site loading speeds.

 For example, if you have a large header image on your homepage or a featured image at the top of your blog post, you’ll want these to load before anything else below it loads. 

If you’re using lazy loading across your site, make sure you disable it for images that are located above the fold. You can still use it for other areas of your website. Especially for image-heavy blog posts, or listicles.

8. Avoid loading unnecessary scripts in the header

Most websites have very minimal header scripts to start, but as you start adding plugins, and integrating different tools, it can start to add up.

Keep Info Short & Sweet Don’t try and condense a metric ton of copy into your header. This clutters up the space and takes away from the key point you are trying to say. Keep your headers short with an impact. Make a statement without several paragraphs to get your point across. 

If possible, try to move any unnecessary scripts to the footer. These will still execute properly, but won’t be the first thing rendered by your web browser.

Although it is often a good practice to place ads above the fold so that their viewability is maximized, going overboard with ads can have negative consequences as well.

Google has released several different algorithm updates over the years that penalize websites that place too many ads above the fold. By prioritizing advertising too much you can create a poor user experience, which could lead to a reduction in the amount of organic traffic you’re getting.

Sites that go overboard in placing tons of ads at the top of the page provide a bad user experience, and doing so can result in a steep reduction in free SEO traffic.

This means you’re above the fold content is primarily meant to grab attention, drive engagement and then strategically convert that attention.

9. Optimize page speed

With so many people accessing web pages across such a variety of devices, current web design practices entail using responsive design: making use of flexible layouts, images, and cascading style sheets. In responsive design, there is no fixed layout for a web page, and content reflows to a screen of any size.

In addition, users on phones generally browse in portrait mode rather than in landscape mode, turning the traditional screen design sideways.

For users on networks with high latencies such as mobile networks, this can cause a significant delay in loading speed. 

To improve your loading speed you’ll need a baseline for how fast your site currently loads. You can evaluate your current page speed by using a tool called Google PageSpeed Insights. You can also optimize your images by creating descriptive image filenames, and by decreasing the total size of your images, so they load faster. 

However, here are some of the best ways to improve your loading speeds across the board:

• Enable compression. This will reduce the file size of your CSS, HTML, and JavaScript files. This will optimize your codebase and can greatly speed up your site.
• Enable caching. Caching will store a lot of site information in the browser, so the site loads quicker when visitors come back again.
• Use a CDN. A CDN lets you use a network of servers to distribute the load of delivering content to your visitors.
• Optimize your images. Make sure your image file sizes aren’t too large and your images are run through optimization software.

Tips For Creating Above The Fold Content

While the important content still needs to be higher on the page, nowadays, the pages should be designed to encourage scrolling more so that they don’t miss important content.

But, if you’re struggling to come up with ways to add more content to your site, try these ideas:

• Add a FAQ section to your homepage or landing pages
• Create service page sections that break down your offerings
• Create a team bio section that highlights roles and responsibilities
• Add sales page elements to your pages including stories, benefits, and more

Bottom Line

Optimizing your above-the-fold content involves creating a powerful heading, adding keywords to your opening paragraphs, ensuring there’s enough text, and creating a killer CTA.

The way we see it, as long as above the fold exists and it gives you benefits on your business strategy, it is not dead or irrelevant, no matter what others say. What is important, it helps your business to grow and prosper.

As with anything in digital marketing, you should always test, test and test again to improve your conversions and garner more interest from your visitors. I genuinely hope this post brought you value.