Hero Banners and Sliders: Keep the Impact, Cut the Weight

The hero is the large banner at the top of a home page: a full-width photo, a slider that rotates through several, or a background video. It sets the tone, so it's understandable that it gets the biggest image on the site. It's also where weight tends to pile up: a 3 MB photo exported straight from a camera, or five slides that all load before anyone has seen the second one. You don't have to give up the impact to fix it. This article covers the choices that matter most for heroes specifically.

Why the hero matters for speed

Google measures how quickly the main content of a page appears with Largest Contentful Paint (LCP): the time until the largest image, text block or video visible on screen is shown. web.dev suggests aiming for 2.5 seconds or less, measured at the 75th percentile of page loads. LCP counts images, video posters or first frames, and background images set in CSS, so on most home pages the hero is the LCP element. A heavy hero makes the page feel slow as well as adding to its weight.

Two consequences follow from Google's guidance on optimising LCP:

• Don't lazy-load the hero. web.dev is blunt: “Never lazy-load your LCP image”. Lazy loading is for images further down the page.
• Make it findable in the HTML. A hero placed in the page's HTML can start downloading straight away. One set as a CSS background, or inserted by a slider script, has to wait for those files first.

One image, sized properly

For most small business sites, the simplest strong hero is one good photograph. To keep it light:

• Export it at the size it's shown. A full-width hero rarely needs to be wider than the largest screen you design for, and phones need a much smaller version. Our guide to image weight explains how to offer several sizes so each screen gets the right one.
• Use a modern format. Our comparison of image formats covers when WebP or AVIF makes sense.
• Keep the words as text. Headlines and buttons belong in the page, not baked into the picture. web.dev's carousel guidance notes that text inside images is bad for accessibility and compression.
• Give it priority, once. Adding fetchpriority="high" to the hero image tells the browser it matters. web.dev warns that setting high priority on more than one or two images makes the hint unhelpful.

If you keep a slider

Google's carousel best practices are cautious about them: they say it's “rare that autoplay is a good choice” and that navigation should ideally be left to the visitor. If a slider is part of your design, these make it lighter and kinder:

• Fewer slides. web.dev advises that each slide should be “sufficiently relevant”. Every slide you drop is an image nobody has to download.
• Put the first slide in the HTML. web.dev calls loading carousel content with JavaScript probably the biggest performance mistake to avoid, and suggests loading the first slide statically.
• Don't rush the others. Only the first visible image needs high priority. The Fetch Priority guide shows the later slides marked fetchpriority="low". Check your slider's settings too, and in the Network panel see whether every slide's image downloads as soon as the page opens.
• Same size for every slide. web.dev recommends giving all items in an autoplaying carousel the same intrinsic size to keep LCP low.
• Let people pause it. The W3C's carousel tutorial says users need control over animation, and that it should pause on hover or keyboard focus (WCAG 2.2.2, Pause, Stop, Hide).

Video heroes

A looping background video can look great, and it is usually the heaviest kind of hero. If you use one:

• Keep it short and small. A few seconds, compressed, and no larger than it's displayed. If it plays silently, remove the audio track rather than just muting it.
• Set a poster image. MDN describes poster as the image shown while the video downloads. LCP uses the poster or the first frame, whichever is earlier, so a light, well-sized poster helps.
• Know what autoplay costs. MDN notes that autoplay takes precedence over preload: the browser has to start downloading the video to play it. A video that plays only when clicked can use preload="none", which web.dev describes as the best chance of avoiding loading it.
• Consider a still on phones. Showing the poster image instead of the video on small screens keeps the look and saves mobile visitors the download.

Check before and after

GreenTracer measures one initial, uncached load of the page with Google PageSpeed Insights, on mobile and desktop, and uses the heavier run. It doesn't scroll or click, but a hero sits at the top, so whatever it loads at the start is counted, including slides and video data fetched before anyone interacts. Under the Sustainable Web Design Model v4, a 3 MB hero alone accounts for about 0.44 g CO₂e per view (about 0.36 g on a host listed as green). Bring it down to a few hundred kilobytes and most of that goes with it.

Check your home page before you change the hero and again afterwards, and see how the grades map to page weight.

Sources

• web.dev: Largest Contentful Paint (LCP)
• web.dev: optimise Largest Contentful Paint
• web.dev: best practices for carousels
• web.dev: optimising resource loading with Fetch Priority
• web.dev: lazy loading video
• MDN: the <video> element
• W3C WAI: carousels tutorial, animations
• Sustainable Web Design: estimating digital emissions (SWDM v4)