web performance and seo
Above the fold
The visible portion of a webpage before scrolling, critical for image loading and web performance.
What is Above the fold?
Above the fold refers to the portion of a webpage that visitors can see immediately when the page loads, without needing to scroll down. This concept originated from newspaper design, where editors placed the most important stories above the physical fold of the newspaper. On websites, the fold line varies depending on screen size, device type, and browser settings, typically ranging from 650-750 pixels on mobile phones to 900-960 pixels on desktop monitors.
Importance of Above the fold
Understanding above the fold placement is crucial for optimizing your images because it directly affects page loading speed and user experience. Images that appear above the fold must load immediately to avoid delays in the Largest Contentful Paint (LCP) score, while incorrectly applying lazy loading to above fold images can add 1-2 seconds to your page load time. When you compress and resize images for web use, knowing their above the fold placement determines the loading strategy you should implement.
Above the fold in Practice
When you upload a hero image to your website, you need to determine if it appears above the fold on both desktop and mobile viewports. A desktop monitor at 1920x1080 resolution typically shows 960 pixels of height above the fold, while an iPhone 14 in portrait mode shows approximately 750 pixels. If your hero image appears within these dimensions, it should load immediately with fetchpriority="high" rather than using lazy loading. This ensures the image contributes positively to your LCP score rather than delaying it.
Above the fold Best Practices
- → Test your images on both desktop and mobile devices to confirm above the fold placement.
- → Load above the fold images immediately without lazy loading attributes.
- → Set fetchpriority="high" on your largest above the fold image to prioritize its download.
- → Specify exact width and height attributes in HTML to prevent layout shift when images load.
Example of Above the fold
Related Terms
Frequently Asked Questions
What is above the fold on a website?
Above the fold is the portion of a webpage that visitors can see immediately when the page loads, before they scroll down. The term comes from newspaper design where the most important content was placed above the physical fold of the paper. On websites, this visible area varies by device but typically ranges from 650-750 pixels on mobile phones to 900-960 pixels on desktop monitors.
How do above the fold images affect page speed?
Above the fold images directly impact your Largest Contentful Paint (LCP) score, which Google uses to measure page loading performance. These images must load immediately to avoid delaying the LCP measurement, so applying lazy loading to above the fold images can add 1-2 seconds to your page load time. Instead, above the fold images should use fetchpriority="high" and load without delay.
How do I know if my image is above the fold on mobile?
Mobile devices typically display 650-750 pixels of height above the fold, depending on the specific device and browser. You can test this by viewing your website on actual mobile devices or using browser developer tools to simulate mobile viewports. If your image appears within the initial viewport without scrolling, it's above the fold and should load immediately rather than using lazy loading.