What Does ‘Above the Fold’ Mean?
Above the fold (ATF) is the part of a webpage that you can see without scrolling down.
The fold is the bottom edge of this initial view. Anything below that line requires scrolling and is considered “below the fold.”
![above the fold illustration](https://static.semrush.com/blog/uploads/media/6f/4d/6f4d0d27989a0dacd02aaa731f38be6f/1e5bf795e8917560f4a7638541662b8e/AD_4nXexWL_6ovTEreoryzlBQyodlRfmgn48EOigaHHCnQEwhGRgk6W0o7auR-7ZGqKJmBs8n7oK_WuxMIPtSruVXQJmfaLr7LsPZPPlO8cr_dEzggd_I0zKi7RNzK1rl4mDqQD-iawWyg.png)
The exact fold line varies by device and browser settings. The size of the viewing window (also known as the viewport) affects where the fold appears.
Why Is Above the Fold Important?
Above the fold is important because it influences what visitors see first, helps capture their attention, and encourages them to stay on the webpage.
It shapes first impressions. Users often expect key features (e.g., a sign-up link) in this prime viewing area.
If they don’t find what they need right away, they may leave the page.
This behavior can harm business performance and SEO since search engines strive to deliver results that engage users.
Many search engines also consider near-the-top content more important. That means ATF content can have a greater impact on your rankings than below-the-fold content.
Above-the-fold SEO should, therefore, be a priority.
Above the Fold Best Practices
Above-the-fold content is essential for capturing visitors’ attention. It boosts user experience (UX) and can increase revenue.
Read on to learn more about ATF design best practices and above-the-fold SEO strategies that can help your pages rank higher in search engines.
Use a Responsive Website Design
A responsive website design adapts to the user’s viewport size and shape. It ensures images, text, and other elements fit properly.
This approach optimizes both above-the-fold and below-the-fold content across all devices, whether large desktop monitors or small smartphone screens.
Here’s an example of responsiveness in action on the Semrush blog:
For advice on implementing a responsive layout, consult Google’s help guide.
Then, run regular technical audits to check your site for performance issues.
Semrush’s Site Audit tool performs over 140 checks to confirm performance on desktop and mobile devices.
You can schedule a daily or weekly audit, or re-run crawls manually.
![Site Audit overview dashboard](https://static.semrush.com/blog/uploads/media/a0/84/a084130d35beb9aecb38d5f0d1db7907/01f1fc19b9688e72354f1fefef5c16c0/AD_4nXcLqNQqpHkZw6yOduaizHD7_-m8vzXHvAec2y73c6BcUIxXjf6w_Hqr7q5q1kVd2iPaV5tmG3PPFScLJA1_OU-OqIODTTR7DW66UJmI0n3_CvZJhdjnQx8SNIbwEHQdm3x7oIKfBQ.png)
Optimize Your Website Header
The website header sits at the top of a webpage and usually appears on every page of a site, keeping key elements in a consistent location.
This consistency helps users navigate your website.
![website header levis](https://static.semrush.com/blog/uploads/media/5b/ad/5bada39d36480a478f45f9069f2f4e4e/67469a2ff2391df2dbf9c47589e8574a/AD_4nXcud7e320ltHh89uQHT5oOqwnfGz9zMVf4C1SMm_xXAp8Zm5aqFQidWRyqel4GXEn9347GoOi9f3SU3b_rSQ9Bl6NXZQz6FSYNU5OuCQFK16QRQEW6g_NfspBj4UJHKIaELzlUA.jpeg)
A header typically includes the brand logo, which links to the homepage.
![Levis logo linking to homepage](https://static.semrush.com/blog/uploads/media/b5/53/b553abedc5a0d05db12b878d5653bde8/1145ac039678b4365c19f20f4d0a9a29/AD_4nXczQYPGa8XLhyTAMu5X3tmx-Fw49frMg2VvJ0cJ8gIIdHST1Yf7Ggr3RtDzmIehyHdtneXfaWnbnmGdZTJXoFvYmmwhw6FSue9HDAPzDGF7UV9BJPDcp1fk4oJveWswoii2OnTR.png)
The header also often includes the main navigation menu, which contains links to your site’s main sections.
![main navigation menu](https://static.semrush.com/blog/uploads/media/42/70/4270aba0b7068a8a82064533d97c4ca0/0954b4230532ccc3954f4f88d4656270/AD_4nXcc8AljoTHO4s1IZTzxajvkrWs-bWG8z6IAO2OJcCvb5LGp7QNZCRHD31YP8VFkcg2X0xSBYCpsKJmkFojvQZi_BlYLnLyvpl413vX9qtmNLUE_ZTvDUmCUQpWDpr9iwGNH8aNX.jpeg)
Many web designers save space by using a hamburger menu (especially on mobile). But this adds an extra click for users to reach key pages.
![hamburger menu](https://static.semrush.com/blog/uploads/media/f5/8c/f58cc2bada4492599fb6545fa8ac62a7/980fd571a3ca1dce2e15fa1e275bf4e5/AD_4nXdudT-vf3ulhWy7ek25tEFQSQNYEsKCWU8e-hhdXpTfeEKqecabM_4G9P4bBMg8XxaAr6kGRzg8q2KvcqxEiOK9f-o4jw7-Wjnj5OxFvaG9_jkERTgXRAq4pXNgYjRVRzNsYOz7pA.jpeg)
Here are other elements to consider for your header:
- Banner: Use the website banner to advertise unique selling points (e.g., free shipping)
- Sign-in or sign-up links: Encourage visitors to create an account or log in so you can get insights into customer behavior
- Region or language flag: Let users switch locales on multi-regional or multilingual sites
- Search function: Include a search bar or icon to help visitors quickly find what they want
- Shopping cart icon: Make starting the checkout process from any page easier
![website header elements](https://static.semrush.com/blog/uploads/media/37/75/3775f68166ab5001eadd3cebd98f21c7/e661e17dc3d2e2915f8d44c73c9286cb/AD_4nXdm5YH8G2XejvAGIvKq_y8L1NsjiM5Z7kwj90whks4uAIzQR-4yg1_4o0dEsRniQktu4VXUlAjiY2s02mQPFiN87K4_nWhgtv5hZITEebjt1E7RevV2aq7fuIQi_zEg43kNN8xI_w.png)
Adding more elements can increase functionality. However, a cluttered header occupies valuable above-the-fold space and can confuse users.
Designers must find a balance.
Include a Unique Heading
Each page should feature a unique, descriptive heading above the fold. This heading quickly shows users the page’s purpose.
On popular news sites, prominent headlines tell visitors exactly what to expect.
![Mashable site](https://static.semrush.com/blog/uploads/media/41/5c/415cfccc802b78967bca800ffe761415/36164a83652aed175d6f98d762a9c4ec/AD_4nXfW18Qio6GhDtHcOJULJ7_6G39z6pwFgEbvapkTo2tbEbo93Goc_5ESzIqqg0VG1qit4Xe1wHj7SaQOenrvzVJahusbg7mwZwaR4mRHbPf-VfzF6obiCyWsJS-e8uqIw1ViQ7tArw.png)
A unique heading also helps above-the-fold SEO.
When asked about ATF’s impact on rankings, Google’s John Mueller said, “The important part for us is really that there is some amount of unique content in the above-the-fold area.
“If you have a banner on top and a generic hero image on top, that’s totally fine. But some of the above-the-fold content should be unique for that page. And that could be something like a heading.”
For on-page SEO, wrap the heading in H1 tags (the highest-level HTML heading). And make sure it includes your primary keyword.
Like this:
![wrapping the headline in H1 tags](https://static.semrush.com/blog/uploads/media/c9/6d/c96d62665e0b46f79c7795db16e18fac/1455b39c71a286f2c653269bd8e6176a/AD_4nXc9gOa9k7R2_a9LpmApVC2tzthneCxt0jlS3ij-QlGsSBy68uuzvGGK179I_4dgWZAPhBcZ-wSunaYnYwjjKIoK0PZjvr2lZDAoa-4cCuafMQ0mD_gXWjmCVOI7c3ZljLnQMZ12fA.jpeg)
To review your current headings, use Semrush’s On Page SEO Checker.
Import your pages and target keywords. The tool then shows which headings to optimize.
![On Page SEO Checker overview dashboard](https://static.semrush.com/blog/uploads/media/10/bd/10bd08de0cc8c4cd62aea36bac8712e4/973ec231cfb5eabef2212c56e06df7f2/AD_4nXdlVTIw_FCuWMm0geyHSR_rXBl4H5dQXwCsANOLT94aL2FGmalXyYc0h7fwFqKkwEw20pNKi4z3bUxoKShACdLGXtC9H3Af2E2_ILg2qrPL4-Ijw2P6KwEnJfXeae31r9qVOBXxLg.png)
Open the ideas for any page to see whether the H1 contains your main keyword—and whether it’s overused (which can be one form of keyword stuffing).
!["H1 contains a target keyword" results under Content section](https://static.semrush.com/blog/uploads/media/f0/56/f05651a6a093b89448805dcef1d4c0b5/1a4a52ef8ef516e52876b057f4bc8c54/AD_4nXddiUt1Vi6ZrJaRYqTzXgZOj_EG9vaV1E-ZulkVgWhmALCLZIf0z76Gl6zrQqptU2jlIGVZPTeqyN0y3680jXPKLDb94_VaHpiHCvI3045m7fRC1tEIfl_LG7DLexo1jV6ehsG8FQ.png)
You’ll also see ideas related to:
- Title tags: Page titles that can appear in search results
- Meta descriptions: Descriptions that can appear in search results
- Semantic keywords: Conceptually related terms
And more.
Get to the Point
Users want to find what they need quickly—ideally above the fold.
Getting straight to the point is also called improving time to value, which benefits SEO and UX.
Before building a page, ask yourself the following questions:
- When someone lands on this page, what do they want to do?
- How can I help them do it as fast as possible?
Consider category pages on retail sites. Shoppers see product options and photos immediately.
![Levis website as an example of to the point content](https://static.semrush.com/blog/uploads/media/a8/86/a886e94bd091e3cf2c99177919127efd/a501441775dbd9b72434792327e78abd/AD_4nXeD6sf8GV7u6d0WnmuqoksScFpHySetjeoYMvFv_2vfraiFMMGSypRu_Tqo-SJi1UovOxmluaVxVLIiSStvvLWUQHiVcUMPkxGlipxQdHPb_NLE4b_sq1Ez2Q0tXdT7r7bNNRFL.jpeg)
When most product images appear below the fold, visitors must scroll to see the items they came for, reducing immediate engagement.
![On the Prana website users have to scroll](https://static.semrush.com/blog/uploads/media/59/d5/59d5550c278b7e47edc8d311f2aeac59/1a4cdc0bd56f7dc3ae11f953f826f75b/AD_4nXdUOC30ufnpgFLUluEJvUZJcvQWgwnTic8aSMmqRQm_Pb5kFFZV-J4QbrvVsDyMCHmHH-kdXvfW6RCAg62D8mmWvgj6Xu4mWx4kjUXi24rzujHxNMgmFFUHxQpstyhQT0GUZWldtw.jpeg)
Semrush’s blog template is also optimized to deliver value quickly.
The estimated reading time and table of contents appear at the top. Readers can dive into the article without scrolling past unnecessary visuals.
![Semrush blog template](https://static.semrush.com/blog/uploads/media/50/f2/50f2286bc42d28fde8137f70d6805c98/8590056635ff9bb79bf0616164f5fa90/AD_4nXeCdLZL8uOqDamAuDWu9z9xcaUi0vl4pmjQOy7Lh0tsA8T34jZ7ZYq3DI458zDm3YBa1xHh_ly-R6ixZgkO5YK3FYtb3P2ACW52iKaCzCSkPiwI7EoERN5ieY1B0rcxzrmJs4wlEQ.jpeg)
The writer uses an SEO copywriting technique called BLUF (bottom line up front). This approach delivers essential information right away. It avoids long, fluffy introductions.
![BLUF example in the Semrush blog](https://static.semrush.com/blog/uploads/media/2f/17/2f17fd391a65221f948130c18486084b/1a87e4fa1703dce6657684986b17eee5/AD_4nXeRBX7XEQk9UW_CX9k_9VbKlZBOC3qm7oYYKA_re_rDExMKQh9OpmJrMoliBaLG-yluooVv_M_htXXxXbom9QWAGDgwP7D3sXJcY7WcNCIXVAY2Hyv0rlALA8HSn40Q14_05yaQ.png)
Balance Ads with Original Content
You may want to display ads above the fold to increase visibility and clicks.
But too many ads can drive users away. Large or excessive ads can prevent visitors from quickly finding what they’re looking for, which may cause them to leave or look elsewhere.
Unbalanced ads can also harm above-the-fold SEO, especially on smaller devices like mobile phones.
Search engines can penalize sites that fill too much top screen space with ads.
In 2012, Google released a major page layout algorithm update that demoted sites with excessive ATF ads.
The announcement stated: “If the part of the website you see first doesn’t have much visible content … that’s not a very good user experience. Such sites may not rank as highly going forward.”
Leading search engines advise following the Better Ads Standards. These guidelines discourage intrusive experiences like:
- Pop-up ads
- Large sticky ads
- Ad density above 30%
You can still use mobile ads above the fold, but balance it out with original content, like so:
![mobile advertising on ESPN above the fold](https://static.semrush.com/blog/uploads/media/07/bb/07bb6b39161e6184098ef13325e46f68/4fa1c46793bd1f818ce879309291a3cd/AD_4nXcLO9v1RBAbJFB6BgQq2RIIc8kmkJkz2YESbu-kF9Ztt6YuReCEXwIWMvnY_ckbB-hhE0xiHy6BO_r9JTscRdJkbdUh_1PEG8hh6FEWRrzlFMuSiArl1CgGBtEHyJLc9gFfI5nT-w.jpeg)
Increase Loading Speeds
Your above-the-fold content should load quickly. Slow load times can increase bounce rates and hurt SEO rankings.
A set of speed metrics called Core Web Vitals is especially important:
- Largest Contentful Paint (LCP): Time for the largest text block or image to appear
- First Input Delay (FID): Time until the page responds to the first user interaction
- Cumulative Layout Shift (CLS): Amount of layout shifting during loading
You can check Core Web Vitals in Google Search Console or Semrush’s Site Audit tool.
Semrush’s Core Web Vitals report shows key metrics and suggestions for improvement.
![Core Web Vitals report in Site Audit tool](https://static.semrush.com/blog/uploads/media/c5/af/c5afb731a0c048f6affe4ae39ef6b847/1093531925d8643e747c49da45c0c55d/AD_4nXdq4fQRswMWR12G_V5AeQ568Y6nRrgm7Qf1_x9SAS1ift2NMyAVEIhipOeO2DNkhZ7HGJV5-gF5hVWemMZDrcqFSQC5L9pxdnMR4zm7Pt1r-FrmdOgsTnv5aslDtPHI3fH56GF0kg.png)
Below are some best practices for improving ATF load time:
- Structure your HTML so ATF content loads first
- Minify HTML, CSS, and JavaScript to reduce file sizes and speed up processing
- Inline critical CSS by placing above-the-fold styles in the <head> section to improve initial rendering
- Optimize images by resizing, reformatting, and compressing them to reduce load times while maintaining quality
- Preload resources using the rel="preload" attribute to prioritize loading above-the-fold elements.
Make It Look Good
Above-the-fold content should function well and look appealing, as visitors often form lasting impressions in a short amount of time.
Use these top tips for ATF design:
- Make text readable with a clear hierarchy
- Break up text and aid understanding with relevant visuals
- Include videos or animations to capture attention
- Use recognizable icons to save space
- Use empty space (white space) to reduce clutter
- Ensure the design aligns with brand identity
- Comply with accessibility guidelines
Analyze Performance Metrics
Performance metrics show what’s working in your ATF design and what needs improvement.
Your top metrics depend on site goals, but the following are useful. All are available in Google Analytics or similar platforms:
Metric | Description | Why It Matters |
The percentage of visitors who leave without taking action | Strong ATF content can lower bounce rates | |
Exit rate | The percentage of visitors who leave your site from the current page | Strong ATF content can reduce exit rates |
Scroll depth | The portion of the webpage your average visitor sees | Shows if ATF content motivates users to scroll further |
Goal conversion rate | The percentage of visitors who complete a desired action (e.g., make a purchase) | Stronger ATF content can increase conversion rates |
The number of unpaid visits from search engines | Good above-the-fold SEO can increase organic traffic |
For a single dashboard view, connect your Google Analytics and Search Console accounts to Semrush’s Organic Traffic Insights tool.
Then, compare the following metrics across your landing pages:
- Keyword rankings
- Bounce rate
- Goal completion rate
![Organic Search Traffic report](https://static.semrush.com/blog/uploads/media/ea/77/ea775d137a79ec22959a3e83955c33d3/f8501d69c67363d158b31cae9a138268/AD_4nXf7nsSj_jJzoi0ZcElpK_ti5jvponCiqT43sEpMuLuu40NonfJ7MSfenDUCI-jqGSKQ96IRHsQ1IUiRYmEfrYDq3yLtx4RBbRDeiMN0FEBoyQDDzWrW-W1Ui-NBZUKqAqCnRpGo8w.jpeg)
These insights can help you refine above-the-fold content to better meet user needs.
Should CTAs Be Above or Below the Fold?
Every landing page should have at least one call to action (CTA) that prompts visitors to take a specific action (e.g., “Add to Cart” or “Sign up Now”).
Some marketers place the CTA above the fold so users can see and interact with it right away.
![CTA above the fold on Semrush site](https://static.semrush.com/blog/uploads/media/8f/ba/8fba1336cb454b40616ade290cfdcc47/b879da2889e3c163e240484d097a3b1e/AD_4nXfhtAcWVy0-aktkK9H4pklNIFSLH-VIOSX569FlKg10ISdDMUXAUvCbbcetNBuVseQBBQ2w8oXuJvpckQCP7j94-5HJQocEPVdQfHmKUdDMsz5EbuIuv-PlmJL1FoCR6m5mnIf6TQ.png)
Others argue that visitors need more information before taking action. In those cases, placing the CTA further down (below the fold) might work better.
To find out what works best on your pages, conduct an A/B test (or split test):
- Decide which CTA placement to test and create a variant design
- Show the variant to 50% of visitors and the original design to the other 50%
- Fully implement the design that produces the best conversion rate
Above-the-Fold Website Examples
These above-the-fold (ATF) examples demonstrate best practices across different site types. Use them for inspiration when designing your own ATF layout.
Lush
As soon as a visitor lands on Lush’s homepage, they’re greeted with a bold, engaging product photo for the brand’s Mother’s Day campaign.
![Lush homepage](https://static.semrush.com/blog/uploads/media/b7/f2/b7f2ce9b7cf38b2d78bf88bdc0d35e65/b6167bc64f14f0df46aacbcf98e786b9/AD_4nXc64yin2B_yE05U-ZmOmyvqeu8YSf4jbK51inCEzOjQLYK5vT6iopJmgcJOPCJ96YFXfbT2B6roIJzgoVcCFwK89zHglGIDFNGc2ttFN5vzKDhgZBbgDRPPaWK8MTehSOPWkyarHg.png)
Links appear over the background image rather than in a standard navigation bar. This keeps the website header clean and focused on a specific promotion. A search function in the header helps shoppers find what they need quickly.
Circular indicators on the right show there’s more to see below the fold.
Kombu
Kombu’s product page is simple yet effective because it assumes that most visitors already know the product and are ready to order.
The above-the-fold design emphasizes the “add to cart” button on a high-contrast background.
![Kombu website](https://static.semrush.com/blog/uploads/media/d0/60/d0603bbf4b29a25d835b0578b97a71be/8dff40b8ce24c873fbe031122ed88ef2/AD_4nXdsPXhY1IWHB68L9SIRUk2vQUFByE4kodlqUrbm6-B0f-GtErMa_xtI0As66Hn3s6EeYt6tEwE5AdsPoZA5J2MaGBloDOCJ_8ai6xkM0cU5KwnUDfmFsLtrhFxqG74UPxTySz2QOA.png)
The minimal layout removes distractions and focuses on driving conversions.
A small “Scroll” prompt in the corner invites users to learn more if they choose.
Further reading: 17 Inspiring Product Page Examples (+ Best Practices for Yours)
ESPN
ESPN’s desktop home page contains a lot of ads, but it still adheres to recommended ad stands.
![ESPN website](https://static.semrush.com/blog/uploads/media/f0/d3/f0d3b59e9fdc210dea4523d4d72af7da/6373a1a394e81cabe5193b885e7e8ca6/AD_4nXfiRudUXQ0LqujdJTSkoz6fHYmfq8_Srj-Lt1yA2U4ghmH59uux6o6mNl5VCBw34EHK6X2hZ_ju8znMU-oALp4EcDmTJzKns5fnNAosy-o1BL7csuM5CQZZkjohD1H2ZHcJjOaPIQ.jpeg)
There are no pop-up ads, no auto-play video ads with sound, and no large sticky ads.
An “upcoming events” bar appears at the top of most pages. It automatically updates to the sport in view.
This feature delivers key information upfront and keeps users on-site.
A muted auto-playing video above the fold grabs attention and prompts further scrolling, aligning with better ad guidelines.
Smile Direct Club
Smile Direct Club’s homepage addresses its target market’s main concern by displaying pricing information in the above-the-fold banner, headline, and description.
![Smile Direct Club website](https://static.semrush.com/blog/uploads/media/82/a9/82a91c288cb7804b631dbbaedbe72888/6a1e19a37bf287ddc186c38b519c03f8/AD_4nXeBuSqTuH83bp3eMuB2BGUmdDoocULdaAHGa37mFHWY0YfU1KHcWomrteF6oBPVN2YAvuIF3xsj4zfqJlIq5HaPjvpeYa9GByUDSaTkBUO4jrqIJwO4ccQdKRJQpRK4kpg5_jC5.png)
It also contains a product image and award logo to build trust. Trustpilot reviews reinforce the brand’s credibility.
Notice the CTA button appears twice above the fold (“Am I a Candidate?”). Users know exactly what step to take next.
More information is accessible through the navigation bar or the live chat feature in the corner.
Nordstrom
Nordstrom’s category pages have multiple navigational elements above the fold.
Tabs for product subcategories give an immediate sense of variety.
Meanwhile, filtering and sorting options keep users from feeling overwhelmed.
![Nordstrom website](https://static.semrush.com/blog/uploads/media/55/26/5526c158c13eefbb6fd2fa39d92424ed/41c90a7431228c1da3dfd57dd5deb1a2/AD_4nXdp0GaKTL7yMkdI5LgFLCBXrGWDeDDthowgz_YNf3PHmZZKfrljHtxAoqalCBJDQDz45BKPzIOrNd5i5xUEe1KD9Chg4RZWt_zyxw9Q0uJvqSoVZQbTAfIe7s23Ol6mIhos6qWRsg.jpeg)
This balanced approach helps shoppers believe they can find the right product without an extensive search.
Airbnb
Airbnb’s travel-focused homepage positions essential navigation tools above the fold. Icons help users visualize accommodation options.
The layout devotes ample space to a featured set of listings with compelling images.
Each listing preview highlights crucial details like ratings, location, and price.
![Airbnb website](https://static.semrush.com/blog/uploads/media/3e/a7/3ea793814eaf1246c773ae9234baed61/78d66d66f93f523b310ce021ac0cd1a3/AD_4nXfcRpfnnS1ugSZ33N4b0nHG9Hy5Dr-arJgVpqTFfBC51YHiCK3mlkn-FaNDdiR751fJnbxdfWnRMWyOOwbwjAnnsZGRadOqjA-kMLwd83TtsGLesW-ElOurOqAKjNM3EsCrhIHsEg.png)
When a user searches, top results appear above the fold. A map also appears on desktop and mobile because location matters to travelers.
![Airbnb maps](https://static.semrush.com/blog/uploads/media/1b/18/1b181693d2cb32b653ba062bc0eeded4/3a7a6a1bfdaa3d02098bd37e60acc6e4/AD_4nXeAXxkv9w3m16XZiut2XfFvw7Zml0xcbQJ2y3Sl2r7corFpBzFfUqdmCylHRWalsPDgJj5DHJjOBpvLlwVSZh1rJnKsq6SpDttlQ5HyAY8UYi96zuWYnZYq1TkMA8RcMd-wENO3EQ.png)
Make Improvements with Split Testing
When updating ATF content, compare key metrics before and after to confirm a positive impact. Better yet, use split testing to compare two above-the-fold designs:
- Create a new version of your ATF content (known as the variant)
- Serve the original version to half of the users and the variant to the other half
- Evaluate key metrics over a set time
- Implement the best-performing design
The SplitSignal app allows you to run these tests without coding or data science expertise.
You can measure the effect on organic traffic and other metrics to see which ATF design performs best.