Sign in Start free

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.

CATEGORY
On-page SEO
FORMAT
above-fold-content-weight.md
STEPS
6
PRICE
Free - no account
WHEN TO REACH FOR THIS

Use when a page has strong content that begins only after a large hero, carousel or announcement bar.

The skill file

above-fold-content-weight.md 
---
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
Free to download · no account, no email

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

Use this skill in your own AI

The download is a plain markdown file with the name and trigger in its frontmatter. Where an assistant supports skills it can load itself, that frontmatter is what it reads to decide this one applies.

Claude Code Save it as ~/.claude/skills/above-fold-content-weight/SKILL.md and Claude loads it on its own when what you are doing matches the trigger line. Put it in .claude/skills inside a project instead if the whole team should have it.
Claude Upload the file in the skills section of your settings. Once it is there it applies itself in any conversation where the trigger fits, so you do not have to remember it exists.
ChatGPT There is no skills format to install into, so paste the file contents into a Project instruction or a Custom GPT instead. It then applies to every chat in that project rather than only the one you paste it into.
Anything else Paste the markdown into the chat before your question. It works in any assistant, it just has to be pasted again each time.

Questions about this skill

When is measuring the fold the right method rather than shrinking the hero?

When a page has good content that only starts after a hero, carousel or announcement bar. The reflex is to shrink the hero or the type, which damages the design and trades one problem for another. Measuring where the H1, first paragraph and primary call to action actually land at two real viewport sizes tells you what to move instead.

What do I need in hand before starting?

The page loaded at 1366x768 and 375x812, and its heading and body structure. Measuring on a large desktop monitor only is how this gets signed off wrongly, because everything fits on a tall screen and nothing fits on a laptop. You also need to know which elements are promotional, since that is the judgment about what gets demoted.

What do I end up with, and which part gets used?

Recorded vertical positions before and after at both sizes, with the elements moved and why each was demoted. The before and after numbers are the part that gets used, because this argument is usually with a designer and a measured 900px delay is harder to wave away than an opinion that the hero feels too tall.

What most often ruins this?

Treating a tall hero as automatically wrong. It is only wrong when it delays the message, and a large image that carries the message is doing its job. The expensive version of this mistake is stripping a hero a team spent weeks on, seeing no change, and losing the credibility to ask for the next layout change.

More in On-page SEO

Title rewrite diagnosis

Use when Search Console shows impressions for a page but the title in results is not the title y...

Keyword cannibalisation resolution

Use when two or more of your pages trade places for the same query, or when a page that used to...

Internal link equity audit

Use when important pages are buried deep in the site, or when new content takes weeks to be inde...

Intent mismatch repair

Use when a page ranks on page one but gets almost no clicks, or gets clicks and immediate bounce...