Above-fold content weight

Content placement affects both what people read and how the page is assessed. A page whose substance starts 900px down is judged on whatever sits above it. This skill measures what is actually visible first and rebalances.

The skill file

---
name: above-fold-content-weight
description: Use when a page has strong content that begins only after a large hero, carousel or announcement bar.
---

# Above-fold content weight

Content placement affects both what people read and how the page is assessed. A page whose substance starts 900px down is judged on whatever sits above it. This skill measures what is actually visible first and rebalances.

## What you need first

- The page at 375px and at a common laptop height
- Its heading and body structure

## Method

1. Load the page at 1366x768 and 375x812 and record the vertical position of the H1, the first body paragraph and the primary call to action.
2. Measure how much of the first screen is spent before the first substantive sentence. Anything over half is a problem.
3. Identify what occupies that space. Announcement bars, oversized heroes and decorative blocks are the usual causes.
4. Check whether promotional elements outrank the value proposition - a feature announcement written for existing users sitting above the explanation of what the product is.
5. Rebalance by moving promotional and secondary elements below the primary message rather than by shrinking the hero, which usually damages the design.
6. Re-measure at both sizes and confirm the primary call to action is fully above the fold on a 768px-tall screen.

## What this produces

Measured positions before and after, with the specific elements moved and the reason each was demoted.

## Where this goes wrong

- Measuring only on a large desktop monitor where everything fits
- Shrinking type to fit more in, which trades one problem for another
- Assuming a tall hero is always wrong - it is only wrong when it delays the message

---

From the QuQi skill library - https://www.quqi.io/skills/above-fold-content-weight

What you need first

• The page at 375px and at a common laptop height
• Its heading and body structure

Method

1. 01 Load the page at 1366x768 and 375x812 and record the vertical position of the H1, the first body paragraph and the primary call to action.
2. 02 Measure how much of the first screen is spent before the first substantive sentence. Anything over half is a problem.
3. 03 Identify what occupies that space. Announcement bars, oversized heroes and decorative blocks are the usual causes.
4. 04 Check whether promotional elements outrank the value proposition - a feature announcement written for existing users sitting above the explanation of what the product is.
5. 05 Rebalance by moving promotional and secondary elements below the primary message rather than by shrinking the hero, which usually damages the design.
6. 06 Re-measure at both sizes and confirm the primary call to action is fully above the fold on a 768px-tall screen.

What this produces

Measured positions before and after, with the specific elements moved and the reason each was demoted.

Where this goes wrong

• Measuring only on a large desktop monitor where everything fits
• Shrinking type to fit more in, which trades one problem for another
• Assuming a tall hero is always wrong - it is only wrong when it delays the message

More in On-page SEO