Above the fold is the part of a web page which can be seen without scrolling down further. Above the fold content is most important for site owners to provide eye-catching information to users. The term is derived from the newspaper usage where important information is offered on the first half of the paper. The information on the top fold can be seen when the paper is folded half. This has the same literal meaning for a web page with the content seen on top without scrolling down is called as “above the fold” content.
Importance of Above the Fold
Above the fold or top of the fold content has important usage both for displaying content and ads on a page.
User Experience
Users interact more with above the fold content rather than below the fold. Hence publishers and site owners should consider placing all business goals of the site above the fold clearly visible to viewers. Business goals include placing a good navigation, a banner or text ad, breadcrumb, featured image and the good beginning for the article. The visible part when a users land on a page should provide a better user experience and encourage them to visit other articles on the site. Following are the most general items placed above the fold area on a web page:
- Site logo so that the users can remember the brand
- Navigation menu to help users to move to most important pages on the site
- Search box to quickly search and get the required pages from the site
- Shop or cart icon to increase online sales
- Call to action button to drive traffic to particular page
- Top notification bar to show important announcements
- Slideshow with links to important pages
- Advertisement to generate revenue
Advertisements on Above the Fold
Besides the user experience placing advertisements on above the fold area improves the click through rate thus improving the advertising revenue of a site. PPC programs like AdSense advises publishers to place ads above fold to make it visible and shows warning message if the ads are placed below the fold area.
Testing Above the Fold
It is important to test how the content on top looks on different devices and browsers. Different users may view a site on different browsers, operating systems and devices. Hence, site owner should test the site’s visibility on different platforms to ensure better user experience. Using responsive site layout is one of the easy ways to adapt a site on all devices.
Especially on smaller devices like phones, the web page should have readable content visible to users.
Issues with Above the Fold
Since more importance has been given to the visible area, publishers tend to place more ads there without focusing on content ad ratio. This will annoy users and force them to block ads using ad blockers or leave the site and not returning any more. Besides users, search engines also penalize sites showing too many ads on top of the site with very less content. Hence if you are a site owner, ensure to offer an appropriate content ad ratio on above the fold area. This will not only help to achieve your site’s goal but also improve the readability of users.
If you are a website owner, optimizing above the fold area is important to get good page speed score. Here are some of the factors you should consider along with the warning message you will see in speed testing tools like Google PageSpeed Insights.
| Warning | Solution |
|---|---|
| Eliminate render blocking resources | Move JavaScript to footer section of your website and load the scripts in header asynchronously. |
| Removed unused CSS | Reduce dumping all CSS in above the fold area and consider using critical CSS or inlining CSS that is needed for loading above the fold content. |
| Remove unused JavaScript | Reduce JavaScript files in the header and move them to footer area. |
| Reduce impact of third-party code | Move Google Analytics, AdSense and any other code in the header section after body content. |
| Defer off-screen images | Use lazy loading to defer loading of images that are not needed in above the fold area. |
