What the largest element is on homepages, by platform
| Group | Image | Text | Text block | CSS background image | Video | Homepages |
|---|---|---|---|---|---|---|
| Shopify | 77.7% | 6.4% | 2.9% | 5.9% | 5.4% | 45,614 |
| WordPress | 48.5% | 21.3% | 3.4% | 20.9% | 2.4% | 112,081 |
| Webflow | 29.9% | 37.1% | 7.0% | 18.2% | 7.2% | 2,528 |
| Other platforms | 47.6% | 24.8% | 7.0% | 17.0% | 1.4% | 576,999 |
| All homepages | 49.6% | 23.2% | 6.2% | 16.9% | 1.9% | 738,473 |
Source: PageSpeed Matters, Sept 2026. HTTP Archive top 1M crawl, mobile. Rows do not sum to 100% because other image-URL elements are left out; Wix and Squarespace count only in All homepages.
Summary
The hero is the first thing a visitor sees on a homepage, and on a phone it is usually the largest element on the screen. That makes it the Largest Contentful Paint (LCP) element, the moment Google's loading metric measures. How a site builds its hero shapes both its first impression and its speed.
We classified the LCP element on 738,473 top 1M homepages. The largest element is an image on 49.6% of them, ahead of text (23.2%), CSS background images (16.9%), text blocks (6.2%) and video (1.9%). Background-image heroes stand out for the wrong reason: they pass Core Web Vitals least often.
What we measured
We used the HTTP Archive crawl of the top 1M sites from September 2026, on mobile, and took every homepage with a recorded LCP element: 738,473 in all. For each, we read the element type and whether it carried an image URL, and sorted it into one of five types: image, text, text block, CSS background image or video. Text and text block are both text heroes, split by the kind of element that holds the text.
Hero type is the lab LCP element on a mobile viewport, so a desktop visitor may see a different largest element. 1.6% of homepages have other elements carrying an image URL and are left out of the five types.
For speed, we joined homepages to Chrome UX Report (CrUX) field data at the 75th percentile. Pass rates and good-LCP rates come from real visitors, so the speed differences between hero types are correlations. Platform comes from the HTTP Archive crawl.
Images are the most common hero
Of the 738,473 homepages with an LCP element, the largest element is an image on 49.6%. Text comes next at 23.2%, then a CSS background image on 16.9%, a text block on 6.2% and a video on 1.9%.
Put another way, about half of homepages lead with a photo or graphic in an image tag, and text heroes of both kinds are the next most common choice. Video heroes are rare across the top 1M.
49.6%
Share of 738,473 top 1M homepages whose largest (LCP) element on a phone is an image.
Background-image heroes are the slowest group
Homepages whose hero is a CSS background image pass Core Web Vitals least often, 35.1% of the time. Only 49.9% of them have a good real-user LCP (100,477 homepages with CrUX data), against 66.1% for image heroes and 67.4% for text heroes.
A likely reason is discovery. A browser finds an image tag as soon as it reads the HTML, but it only learns about a background image after it has downloaded and applied the stylesheet that sets it. That usually means the hero image starts downloading later. Background images also cannot use the srcset attribute or a fetchpriority hint, which makes it harder to serve a phone-sized file early.
Platforms build heroes differently
On Shopify the hero is an image on 77.7% of 45,614 homepages and a video on 5.4%, almost three times the 1.9% rate across the top 1M. Only 5.9% of Shopify homepages use a CSS background image. Many Shopify themes build the hero as an image banner or slideshow section, which likely explains much of the high image share.
WordPress homepages lean on CSS background images more than any other group: 20.9% of 112,081, against 17.0% for sites on other platforms and 5.9% on Shopify. Many WordPress page builders set section backgrounds through CSS, so a hero built that way likely ends up as a background image.
Webflow homepages are the most text-led: 37.1% of 2,528 have a text LCP element and only 29.9% an image, with 7.2% using video. A likely reason is design style: a large headline can easily become the largest element on a phone screen.
The biggest sites use fewer background-image heroes
The most popular sites rely on CSS background-image heroes less often. 9.4% of homepages in the Top 10K (6,812 homepages) use one, against 14.3% in the 10K to 100K band and 17.2% in the rest of the top 1M.
Larger sites more often have their own engineering teams and custom-built front ends, rather than themes and page builders. That likely makes them more deliberate about how the hero image is loaded.
What this means for your site
Start by finding out what your hero actually is. Run your homepage through PageSpeed Insights on mobile and look at the LCP element it reports.
- If it is a CSS background image, consider rebuilding the hero with an image tag, so the browser finds it in the HTML and you can use srcset and fetchpriority="high".
- If you must keep a background image, preload it, and serve a smaller version to phones.
- If it is an image, do not lazy-load it, and make sure phones get a phone-sized file.
- If it is a video, use a light poster image and check that the video does not delay the first paint.
Then compare your field LCP in CrUX or Search Console after the change, since the lab test only shows one load.
Sources
- HTTP Archive crawl of the top 1M sites, September 2026, mobile
- Chrome UX Report (CrUX) p75 field data, September 2026
- Largest Contentful Paint (LCP), web.dev: https://web.dev/articles/lcp
Embed this research
Paste this on your site to embed the chart. It links back to the source automatically.
<iframe id="psm-homepage-hero-statistics" src="https://www.pagespeedmatters.com/embed/data-studies/homepage-hero-statistics" width="100%" height="600" style="width:100%;border:1px solid #E2E3E1;border-radius:12px" loading="lazy" title="Homepage Hero Statistics 2026: Images Lead at 49.6% - PageSpeed Matters"></iframe>
<script>window.addEventListener("message",function(e){if(e&&e.data&&e.data.psmEmbed==="homepage-hero-statistics"&&e.data.height){var f=document.getElementById("psm-homepage-hero-statistics");if(f){f.style.height=e.data.height+"px";}}});</script>
<p style="font:14px/1.5 system-ui,sans-serif">Source: <a href="https://www.pagespeedmatters.com/resources/data-studies/homepage-hero-statistics">Homepage Hero Statistics 2026: Images Lead at 49.6% - PageSpeed Matters</a></p>
Frequently asked questions
What percentage of homepages use an image hero?
49.6% of 738,473 top 1M homepages have an image as their largest element on a phone. Text is the largest element on 23.2%, a CSS background image on 16.9%, a text block on 6.2% and a video on 1.9%.
Are CSS background-image heroes bad for Core Web Vitals?
They are linked to worse results. Homepages with a background-image hero pass Core Web Vitals 35.1% of the time, and only 49.9% have a good real-user LCP, against 66.1% for image heroes and 67.4% for text heroes.
How common are video heroes on homepages?
Rare. Video is the largest element on 1.9% of top 1M homepages. Shopify (5.4%) and Webflow (7.2%) homepages use video heroes more often than average.
The hero is the first thing visitors see and often the slowest thing to load, so rebuilding it is one of the clearest wins for both first impressions and speed. Need help with this? See our conversion rate optimization agency.