Hero Section

A hero section is the topmost, attention-grabbing block on a webpage usually visible above the fold, that introduces the page’s main message and primary call-to-action (CTA). It commonly includes a headline (H1), short supporting copy, one or two CTAs, and a strong visual (photo, illustration, video, or simple color block). In many guides, the visual is called a hero image (or hero header). 

Why It Matters

  • First impressions drive action: Users spend disproportionate attention above the fold; a clear hero helps them decide to stay and scroll. 

  • Clarity beats clutter: If the hero looks like an ad (stocky, flashy, carousel-ish), users may ignore it due to banner blindness. 

  • Performance impacts SEO & UX: The hero often contains the Largest Contentful Paint (LCP) element; optimizing it improves Core Web Vitals and perceived speed.

Examples

  • SaaS homepage: H1 = “Automate Your Invoices.” Short subhead + Primary CTA “Start free trial” and Secondary “See pricing,” with a product screenshot hero. 

  • E-commerce landing: Seasonal image + clear value (“Up to 30% off backpacks”) and a “Shop now” CTA, kept readable on mobile (no tiny text baked into the image).

Best Practices

  1. Make the value obvious in seconds: Use a concise H1 and a single, high-intent primary CTA. Avoid vague copy and competing actions. 

  2. Design for the fold (but earn the scroll): Keep the core pitch and CTA visible without scrolling; support with cues to explore further. 

  3. Avoid “ad-like” patterns & noisy carousels: Static, focused heroes often outperform auto-rotating carousels, which have frequent UX issues. 

  4. Ensure mobile readability: Don’t bake critical text into images; overlay live text and check contrast and size on small screens. 

  5. Optimize LCP: Serve responsive images, set correct dimensions, compress aggressively, and consider priority hints/preload for the hero asset so the largest element renders quickly.

  6. Test, don’t guess: Use heatmaps and A/B tests to validate headline, art direction, and CTA placement, avoid assumptions.

Related Terms

  • Above-the-Fold Content — content visible before scrolling. 

  • Hero Image / Hero Header — the visual used within the hero section. 

  • Call-to-Action (CTA)

  • Core Web Vitals / LCP — performance metrics influenced by the hero.

FAQs

Q1. Is a “hero section” the same as a “hero image”?
Not exactly. The hero section is the full top block (headline, copy, CTAs, and visual). The hero image is just the visual component inside it. 

Q2. Do carousels make good heroes?
Often not. Research finds many homepage carousels have UX problems and get ignored. If you must use one, follow strict accessibility/controls—or prefer a simple, static hero. 

Q3. How big should the hero be?
Big enough to communicate value without pushing everything else out of view. Keep key content and the primary CTA visible above the fold on common breakpoints. 

Q4. Why does my hero affect speed scores?
The hero image or headline block is often the LCP element, slow loading hurts Core Web Vitals and perceived quality. Optimize the asset and delivery. 

Q5. What causes users to ignore heroes?
“Banner blindness”: elements that look like ads are skipped subconsciously. Use authentic imagery, clear copy, and restrained motion. 



Heatmaps ›