Hero section

The hero is the first thing most visitors see, and it has one job: tell them they are in the right place and what to do next. It is related to, but not the same as, the area above the fold. The hero is a designed section of the page; the fold is wherever the screen happens to end on a particular device, which may cut through the hero or fall well below it.

A hero is not compulsory. Some pages, such as articles, shop listings or search results, work better when they start directly with their content.

How it works

A typical hero contains a headline stating the offer in the customer's terms, a supporting sentence adding specifics or proof, a primary call to action and sometimes a secondary one, and a visual that shows the product, place or result. Trust signals such as a review rating often sit just below. On phones the layout usually stacks, with the headline first.

Because the hero image is often the largest element on screen, it frequently determines the Largest Contentful Paint score in Core Web Vitals. Compressing the image, serving it in a modern format such as WebP and avoiding heavy autoplay video keep the hero fast.

Writing the headline is usually the hardest part. A useful test is whether a stranger could repeat back what you offer, for whom and where after reading only the headline and the supporting line. Specific beats clever: naming the service and the location helps visitors and search engines alike. Then check performance by running the page through a speed test, which shows whether the hero image is the largest element and how long it takes to appear.

Example

A travel agency's hero shows a stock beach photo with the headline Your journey begins here, and visitors cannot tell which destinations it sells or where it is based. The new hero reads Holidays from Prishtina to Turkey, Egypt and Greece, adds a line about flights included and payment in instalments, shows a real photo of a popular resort and offers two buttons: See this summer's offers and Call the office.

The hero image is also reworked technically. The original was a large uncompressed photo; the new one is exported in several widths, compressed, and set to load straight away rather than lazily, since it is the first thing visitors see. The headline sits on a solid panel instead of directly on the photo, so it stays readable whatever the crop. On phones the photo appears below the headline and buttons, keeping the message on the first screen.

Why it matters for your business

The hero shapes whether visitors stay, especially those arriving from ads or search who are comparing several businesses. A specific, fast-loading hero gives every other section a chance to be read, while a vague one wastes traffic. The trade-off is that bigger is not better: an oversized hero with a full-screen video can push your real content off the first screen and slow the page, so size the hero to its message.

Common mistakes

• Writing a slogan that sounds good but does not say what the business offers or where.
• Using a full-screen image or video that pushes all content below the first screen on phones.
• Placing light text over a busy photo where it becomes hard to read.
• Rotating several messages in a slider instead of choosing the strongest one.

Questions people ask

What should a hero section include?

A clear headline that states what you offer and for whom, one or two supporting sentences, a primary call to action and a relevant image that shows the real product, place or result. A short trust signal, such as a review score, helps. Leave out anything that does not help a visitor decide whether to stay.

Should a hero section use video?

Only if the video shows something a photo cannot and it does not slow the page. Background video adds weight, often distracts from the headline and may not autoplay on every phone. A well-chosen still image usually does the job faster. If you use video, provide a poster image, keep it short and muted, and respect reduced-motion settings.

How big should a hero image be?

Big enough to look sharp on the screens your visitors use, but no bigger. For many sites that means preparing several sizes so phones receive a smaller file than desktops, saved in a modern compressed format. Check the result in a page speed test, since the hero image often decides how quickly the page appears to load.