Hero section

The hero section is the large block at the top of a page. It typically contains the main headline, a subheadline, an image or video and the primary call-to-action. Because it fills most of the first screen, it does most of the work of convincing visitors to keep reading.

A good hero answers three questions quickly: what is this, why should I care and what do I do next. The headline carries the main promise, the subheadline adds detail or proof, the visual shows the product, the result or the people involved, and the button gives one clear next step. A short trust line, such as a star rating or a few client logos, can sit nearby without crowding it.

The most common problems are a headline that sounds clever but says little, a background image so busy the text is hard to read, a slider that rotates through several messages, and a layout that looks fine on desktop but pushes the button off screen on a phone. Heavy hero images and videos are also a frequent cause of slow loading, because the largest element on the first screen is often the hero image itself.

How to improve it

• Use one H1 headline that states the main benefit, plus a supporting subheadline.
• Keep one primary CTA button in the hero and make sure it is visible on mobile without scrolling.
• Use a visual that shows the product, service or outcome rather than generic stock imagery.
• Compress and correctly size the hero image so it does not slow down loading.
• Add one small trust element, such as a rating or client logos, near the CTA.

How PageScore checks it

PageScore checks for a first-screen CTA, rates headline clarity and length, looks for a subheadline and counts H1 headings. It also measures Largest Contentful Paint on mobile, which is often the hero image, and its AI review looks at a mobile screenshot of the page.