A strong hero section tells visitors what this is, who it is for, and why they should care, then hands them one clear action. Visitors judge value in about five seconds, so clarity beats cleverness every time. Build for that, then measure Largest Contentful Paint (LCP), click-through rate on your main button, and scroll depth to prove it works.
TL;DR:
- Keep headlines between 6–12 words, name a specific visitor outcome, and use one primary button unless a secondary action serves a different goal.
- Expose the hero image in HTML, avoid lazy loading, compress it, and serve responsive sizes; target LCP at 2.5 seconds or less.
- Check hero text against the busiest image area for a 4.5:1 contrast ratio, and verify every control works by keyboard with visible focus.
- Change one element per A/B test, wait for enough traffic to trust the result, and pair scroll depth with primary button clicks to interpret engagement.
Table of Contents
- What should every hero section include?
- How do you write hero copy and CTAs that get tested first?
- How do you optimize hero images and video without slowing the page?
- How do you keep a hero from breaking on different screens?
- What accessibility checks does a hero section need?
- Which metrics tell you whether a hero is working?
- Which hero patterns are worth copying and testing?
- Our approach to hero optimization
- Why most hero advice is backwards
- Need a hero that is fast, clear, and built to convert?
- FAQ
- Sources
What should every hero section include?
Think of the hero as four parts that each have one job. When one part tries to do another part’s work, the whole thing gets noisy. Here is the functional checklist we use when we assemble a hero:
- Headline: Lead with the outcome the visitor gets, not your company’s history. Research on hero sections points to 6–12 words as the sweet spot for scanning, because short, specific headlines lower the mental effort needed to understand your offer.
- Subheading: One or two sentences that clarify the promise in the headline. If the headline says what you do, the subheading says how or for whom. It should never introduce a second, unrelated idea.
- Primary call to action (CTA): One clear, verb-led button. A secondary CTA is fine only when it serves a genuinely different goal, such as “Book a call” next to “See pricing” for visitors at different stages.
- Visual: A supporting focal point that reinforces the message. It should never compete with the headline for attention, and it should sit so that no crop or resize cuts off your copy.
A quick test for the whole stack: cover everything except the headline and subheading and ask a colleague what you sell. If they hesitate, the copy needs work before any design polish.
The order matters too. Visitors read the headline first, glance at the visual, then look for what to do next. Your layout should make that path obvious, with the CTA sitting where the eye lands after the subheading, not hidden below a decorative element.
Keep the navigation simple above the hero as well. A crowded menu pulls attention away from the primary action. If the page has a clear goal, the menu can stay lean and let the hero do its work.
How do you write hero copy and CTAs that get tested first?
Good hero copy is benefit-led and micro-specific. “Better websites for your business” says almost nothing. “A WordPress site that books more consultations” tells the visitor what changes for them. The goal is that one scan shows the outcome.
Here are the copy rules we start with, each paired with the first A/B test to run:
- Benefit-led headline. Write what the visitor gains, then trim. Test: your current headline against a version that names the specific outcome.
- Headline length. Stay inside the 6–12 word range. Test: a 7-word version against a 12-word version, with everything else unchanged.
- Low CTA count. One primary button. Test: removing the secondary button entirely and watching what happens to clicks on the primary.
- Verb-led labels. Say what happens on the next page. Test: “Get pricing” against “See pricing,” since a small wording shift can change how committed the click feels.
- Input-capture CTAs. An email field or short form in the hero makes sense only when it truly shortens the path to conversion. Test: a plain button against a one-field form.
Pro Tip: Change only one thing per test. If you swap the headline, button label, and image at once, you will never know which change moved the numbers.
If you want ready-made button copy to borrow from, we put together call to action templates for small business websites you can adapt. For a deeper look at label psychology, this guide to crafting effective CTAs covers what to test next.
Give each test enough time to collect a fair sample. Calling a winner after a day or two of traffic is how teams end up chasing noise. Write down your hypothesis before you start, so the result teaches you something even when the variant loses.
How do you optimize hero images and video without slowing the page?
The hero is usually the biggest thing on the screen, which means it is usually your LCP element. LCP measures how long the largest visible element takes to render, and good performance means 2.5 seconds or less for 75% of page visits. A heavy, late-loading hero image quietly wrecks that number.
Roughly 76% of mobile pages use an image as their LCP element, which means your hero image is very likely the single biggest lever on your loading speed.
Start with what the image is. Authentic visuals tend to outperform generic stock imagery, because real photos and custom graphics build trust and give visitors something specific to remember. A staged handshake photo tells people nothing about you.
Then handle the technical side:
- Make the LCP resource discoverable. The browser should find your hero image in the HTML itself, not after a script runs. If it has to wait on JavaScript to learn the image exists, you have added delay for no reason.
- Never lazy-load the hero image. Lazy loading is great for images below the fold. On the LCP image, the guidance is to avoid
loading="lazy"and to usefetchpriority="high"where it fits, which tells the browser this file matters most. - Use modern formats and compression. Modern image formats and sensible compression keep file sizes reasonable without visible quality loss. WebP is the practical choice for most WordPress sites. We wrote a staging-first WebP rollout so you can switch without touching live traffic.
- Serve responsive sizes. Use
srcsetso a phone downloads a phone-sized image, not a desktop banner scaled down by CSS. - Use a CDN or properly proxied image host. A CDN helps optimize document and resource response times, which shortens the wait before your hero can even start loading.
- Set explicit dimensions. Declaring width and height prevents layout shifts as the image arrives, so your headline does not jump.
Video heroes deserve extra caution. Autoplaying background video looks impressive in a demo and often hurts speed on real connections. If you use one, load a lightweight poster image first, keep the clip short, and give users a way to pause it (more on that in the accessibility section).
For WordPress specifically, our image optimization guide walks through reducing file sizes for cloud, local, or CDN setups. And if you are chasing a slow LCP across the whole site, our technical SEO for WordPress breakdown covers the performance-first fixes in order.
One last habit: after every image swap, run your page through a lab tool and check the field data later. A beautiful new hero that adds a full second to LCP is a bad trade, no matter how good it looks in the design file.
How do you keep a hero from breaking on different screens?
A hero that looks perfect on your monitor can fall apart on a phone. The fix is to design for the smallest screen first, then expand.
- Design mobile-first. Put your headline, subheading, and CTA in a center-safe zone, the middle area that survives most crops. Anything critical near the edges is at risk when the viewport changes shape.
- Set a focal point and plan flexible crops. A wide landscape photo will be cropped hard on a tall, narrow phone screen. Prepare an alternate crop for portrait layouts so the subject stays visible instead of being cut in half.
- Keep text off busy parts of the image. If your headline sits across a detailed area, it gets harder to read as the crop shifts. A calm area of the image, or a subtle overlay, keeps copy legible.
- Test at real breakpoints. Check common phone, tablet, and laptop widths, and look at high-resolution screens too. Do not trust a single browser window you drag around.
- Watch for overlap. Navigation bars, cookie banners, and device interface elements can sit on top of your CTA. Scroll the page on an actual phone and confirm the button is fully visible and tappable without scrolling.
Centered layouts with generous whitespace tend to survive resizing well, because there is less fine detail to lose. When a design feels fragile at one breakpoint, simplify it rather than adding more rules.
What accessibility checks does a hero section need?
Accessibility is not an extra layer you add at the end. The hero is the first thing every visitor meets, including people using screen readers, keyboards, or high-contrast settings. WCAG 2.2 gives clear, testable targets, and these are the ones we check on every hero:
- Contrast. Text over an image needs at least a 4.5:1 contrast ratio at the AA level. Check the worst part of the image behind your text, not the best part. A semi-transparent overlay or a solid text panel often solves this.
- Keyboard operation. Every button, link, and carousel control in the hero must work with a keyboard alone. Tab through the section and make sure nothing is skipped or trapped.
- Visible focus. Users navigating by keyboard need to see where they are. A clear focus outline on your CTA is part of predictable, usable navigation, so do not remove it for looks.
- Motion controls. If your hero has video or moving content, it needs easily accessible pause and play controls. Respect the
prefers-reduced-motionsetting so people who are sensitive to movement get a still version. - Alt text. Give meaningful hero images descriptive alt text. If the image is purely decorative, an empty alt attribute tells assistive tech to skip it.
- Heading structure. The hero headline should be the page’s H1, followed by a logical order. Well-organized content and clear headings help people orient themselves quickly.
Pro Tip: Run a keyboard-only pass before you ever open an automated checker. Put your mouse aside, press Tab from the top of the page, and see whether you can reach and trigger the hero CTA. This can reveal common failures quickly.
Fixing contrast and focus rarely costs design quality. It usually makes the hero cleaner, because it forces you to simplify what sits on top of the image.
Which metrics tell you whether a hero is working?
You cannot improve what you do not measure, and a hero has more than one kind of success. Track both speed and behavior:
- LCP. Aim for 2.5 seconds or less for 75% of visits. This is your loading yardstick.
- CTA click-through rate. The share of visitors who click your primary button. It is the clearest read on whether your message and offer land.
- Scroll depth. If most people never scroll past the hero, it may be doing its job or hiding the rest of the page. Pair this number with CTR to tell which.
- Bounce rate. A high bounce on a page with strong traffic often signals a mismatch between the promise people clicked on and what the hero shows.
Use both lab and field data. Lab tools let you test a change before it ships, while field data shows what real visitors on real devices experience. Web is a good reference for validating results.
When it is time to fix things, go after LCP first, in this order:
- Make the LCP resource discoverable in the HTML.
- Reduce the size of that resource.
- Minimize render-blocking CSS and JavaScript that delay it.
- Avoid animations that trigger layout-induced shifts, since layout shifts hurt the experience even when load time looks fine.
Then move on to experiments. A good testing queue starts with headline length, then CTA label, then image versus graphic treatment, then focal-crop variants. Run one test at a time, give it enough traffic to be trustworthy, and write down what you learned.
Our conversion-focused web design article explains how these design choices connect to the numbers on your dashboard, which helps when you are deciding what to test next.
Which hero patterns are worth copying and testing?
You do not need to invent a new layout. A handful of proven patterns cover most situations. Each one below comes with the first thing to test.
- Minimalist center. A headline, one line of support, one button, and lots of whitespace. Whitespace reduces cognitive load. Copy pattern: “[Outcome] for [audience]” with “Get started.” First test: a shorter headline.
- Input-capture. A single email field replaces the button. It works when the next step really is just an email. Copy pattern: a clear benefit plus “Send me the guide.” First test: field versus plain button.
- Split column. Copy on one side, visual on the other, which keeps text off the image entirely. First test: image on the left versus the right.
- Product showcase. A real screenshot or product photo is the hero. Copy pattern: “See [product] in action.” First test: a screenshot versus a short loop.
- Social proof lead. A headline plus a line of real customer credibility. First test: with the proof line versus without.
When should you skip a hero? If you cannot make it meaningful and fast, drop the oversized banner and lead with a plain headline and button. A lean top of page beats a slow, vague one.
Our approach to hero optimization
Tommy Cosimano founded tcosi and has spent his career building and redesigning WordPress sites, then keeping them healthy through ongoing maintenance. When we improve a hero for a client, we work in staging first. We audit the headline and LCP together, take the quick speed wins, then refine the copy using live CTR data instead of opinions.
Why most hero advice is backwards
Most hero advice starts with how the section should look. I think that is the wrong end to start from. The research here points to something less glamorous: a hero wins on clarity, speed, and a single obvious next step, and almost everything else is decoration.
The popular habit of chasing a dramatic video background or a clever tagline falls short because it ignores two quiet failures. It slows the page, and it makes the offer harder to understand in the five seconds you get. A plain, fast hero with a specific headline will usually beat an impressive, heavy one.
What should you do first? Fix your LCP and rewrite your headline so a stranger can tell what you do. Check contrast and keyboard access while you are in there. Only after those basics are solid should you test fancier treatments. Resist the urge to redesign everything at once; one measured change at a time teaches you more than a full overhaul ever will.
— Tommy Cosimano
Need a hero that is fast, clear, and built to convert?
We design and develop custom WordPress sites, tune image delivery and page speed, and keep everything running through ongoing maintenance, so your hero looks sharp and loads quickly. If your current top of page feels slow or unclear, we can review it with you and show exactly what to change first.
Our review can help identify opportunities to improve your hero. You can see our packaged options on our website pricing page, or contact us to book a review.
FAQ
What is a hero section on a website?
A hero section is the first large block visitors see, usually holding a headline, short supporting text, a main button, and a visual. Its job is to explain what you offer and point people to one clear action. Visitors tend to judge value in about five seconds, so this area carries a lot of weight.
How long should a hero headline be?
Aim for roughly 6–12 words. Research on hero sections points to that range as easy to scan while still stating a specific outcome. Shorter is fine when it stays clear, so test a short and a longer version against each other.
Should a hero section have more than one button?
Usually one primary button is best, because choices split attention. Add a secondary button only when it serves a different goal, such as learning more versus buying. If your secondary option does not support a distinct need, remove it and see if clicks on the main action improve.
How do you make a hero image load faster?
Make sure the image is discoverable in the HTML, do not lazy-load it, and consider fetchpriority="high". Compress it, use a modern format, and serve responsive sizes. Web recommends an LCP of 2.5 seconds or less for 75% of visits.
How do you make hero text readable over an image?
Check that text over an image meets WCAG’s 4.5:1 contrast ratio for normal text. A subtle overlay or a solid panel behind the text usually solves problems without changing the image. Test against the busiest part of the photo, not the cleanest.
Sources
- Nitropack
- Web
- Web Content Accessibility Guidelines (WCAG) 2.2
- Hero images: Best practices and examples
