Above the Fold

Above the fold refers to the portion of a web page that is visible without scrolling when the page first loads. The term originates from print newspapers, where the most important headlines and stories were placed above the physical fold of the paper to attract readers at newsstands. In web design and SEO, above the fold describes the initial viewport content that users see before any interaction.

Why It Matters for SEO

Above-the-fold content directly impacts several ranking factors and user experience signals. Google evaluates page experience through Core Web Vitals, and two of these metrics are heavily influenced by what happens above the fold: Largest Contentful Paint (LCP) measures how quickly the largest visible element loads, and Cumulative Layout Shift (CLS) measures visual stability as elements load and reposition.

Pages where above-the-fold content loads slowly or shifts around as resources load receive poor Core Web Vitals scores, which can negatively affect search rankings. Google has also historically penalized pages where above-the-fold content is dominated by ads rather than useful content, through algorithm updates specifically targeting this practice.

User engagement metrics are shaped by above-the-fold content as well. Visitors form first impressions within seconds. If the visible content does not immediately communicate relevance and value, bounce rates increase. High bounce rates and low engagement signal to search engines that the page may not satisfy user intent.

How to Optimize

Prioritize loading above-the-fold content first. Use critical CSS inlining to render the initial viewport without waiting for full stylesheet downloads. Defer non-essential JavaScript that is not needed for the initial view. Preload key resources like hero images and fonts that appear above the fold to ensure they render quickly.

Minimize layout shifts in the above-the-fold area by specifying width and height attributes on images and video elements. Reserve space for dynamic content like ads or embeds so they do not push other content down when they load. Avoid inserting elements above existing content after the initial render.

Ensure your above-the-fold content clearly communicates the page’s purpose. For landing pages, this means a clear headline, supporting text, and a primary call to action visible without scrolling. For content pages, the title, author information, and the beginning of the article should be immediately visible.

Best Practices

• Inline critical CSS: Extract the styles needed for above-the-fold rendering and inline them in the HTML head. Load the remaining stylesheet asynchronously.
• Optimize hero images: Compress and properly size the main above-the-fold image. Use modern formats like WebP or AVIF. Add preload hints for hero images.
• Avoid render-blocking resources: Defer JavaScript and non-critical CSS that block the initial paint. Every blocking resource delays when users see above-the-fold content.
• Set explicit dimensions: Always declare width and height on images, iframes, and ad slots in the above-the-fold area to prevent layout shifts.
• Limit ad density: Keep ads from dominating the initial viewport. Google’s Page Layout algorithm targets pages where ads push meaningful content below the fold.
• Design for multiple viewports: Above the fold varies by device and screen size. Test your layout on mobile, tablet, and desktop to ensure critical content is visible across all common viewport sizes.
• Use lazy loading below the fold only: Never lazy-load images or content that appears in the initial viewport. Lazy loading above-the-fold elements delays their appearance and hurts LCP scores.

Optimizing above-the-fold content is one of the most impactful performance improvements you can make, directly improving Core Web Vitals scores, user engagement, and perceived page speed.