Core Web Vitals pass rate by hero (LCP element) type and site popularity
| Hero type | Top 10K | Top 100K | Top 1M | All homepages | Median p75 LCP (all) |
|---|---|---|---|---|---|
| Text | 53.4% (1,462) | 48.6% (11,608) | 48.0% (106,614) | 48.1% (119,684) | 1,971 ms |
| Text block (div) | 49.1% (489) | 45.5% (3,494) | 47.7% (27,586) | 47.5% (31,569) | 1,897 ms |
| Image | 50.5% (3,270) | 43.6% (26,888) | 44.5% (263,147) | 44.5% (293,305) | 2,049 ms |
| Video | 30.8% (78) | 30.4% (713) | 43.0% (10,969) | 42.1% (11,760) | 2,295 ms |
| CSS background image | 43.9% (572) | 34.3% (7,513) | 35.1% (92,392) | 35.1% (100,477) | 2,506 ms |
Source: PageSpeed Matters, HTTP Archive and CrUX, Sept 2026. Top 100K is ranks 10K to 100K and Top 1M is the rest; homepages with CrUX data in brackets.
Summary
A full-width video at the top of a homepage looks great in a design review. The question is what it does to loading speed for real visitors, because the hero is usually the largest element on the first screen and so it often sets the Largest Contentful Paint (LCP).
We grouped top 1M homepages by the type of element that sets their LCP and compared Core Web Vitals pass rates. Homepages with a video hero pass 42.1% of the time, against 44.5% for image heroes and 48.1% for text. Heroes built as CSS background images do worst of all, at 35.1%.
What we measured
We used the HTTP Archive crawl of the top 1M sites from September 2026, on mobile. For each homepage we took the LCP element from the lab crawl and sorted it into a hero type: image, video, text, text block (a div with no image) or CSS background image (a container whose LCP comes from a background image URL).
We then joined each homepage to Chrome UX Report (CrUX) field data at the 75th percentile. A homepage passes Core Web Vitals when loading, responsiveness and visual stability are all good. Counts in this study are homepages with CrUX data.
Two limits matter. The hero type comes from a lab crawl while the pass rates come from real users, so this is a correlation, not proof that a hero type causes a result. And some groups are small: the Top 10K video group is only 78 homepages.
Video heroes pass less often than text or image heroes
Among top 1M homepages with CrUX data, those with a video as the LCP element pass Core Web Vitals 42.1% of the time (11,760 homepages). Image heroes pass 44.5% (293,305), text heroes 48.1% (119,684) and CSS background images 35.1% (100,477).
The loading metric shows the same order. Only 58.9% of video-hero homepages have a good real-user LCP of 2.5 s or less, against 66.1% for image heroes and 67.4% for text. Median p75 LCP is 2,295 ms for video, 2,049 ms for image and 1,971 ms for text.
That fits how heroes load. A text hero can paint as soon as the HTML and fonts arrive. An image needs one more download. A video usually needs its poster image or first frame, and the player code around it, before anything large appears on screen.
42.1%
Share of top 1M homepages with a video as the LCP element that pass Core Web Vitals, against 48.1% for text heroes.
The gap is widest on the most popular sites
Splitting by popularity makes video look worse, not better. In the Top 10K, video heroes pass just 30.8% of the time (78 homepages) against 53.4% for text heroes (1,462). That video group is small, so treat the exact figure with care.
Among homepages ranked 10K to 100K the pattern holds on a much larger base: video heroes pass 30.4% (713 homepages) against 43.6% for image heroes (26,888) and 48.6% for text (11,608). Popular sites may run larger, more produced videos with heavier players, though the data cannot confirm why.
WordPress shows a wider video gap than Shopify
Comparing within a platform removes some of the platform mix. On Shopify, video heroes pass 54.6% (2,393 homepages) against 58.6% for image heroes (34,071) and 60.2% for text. On WordPress the gap is wider: 41.1% for video (2,480) against 51.4% for image (47,962) and 52.7% for text.
Our data cannot show why. One possible reason is how the video gets added: a theme's built-in video section on one side, page-builder sliders or third-party embeds on the other. The data only shows pass rates, not how each video is set up.
Background-image heroes do worst overall
Heroes built as CSS background images pass least often overall, at 35.1%, and have the slowest median p75 LCP of any hero type, 2,506 ms. On Shopify they are the lowest group, at 51.4% (2,612 homepages). On WordPress they pass 42.8% (20,960), just above video heroes at 41.1%.
The likely reason is discovery. A browser finds an image tag in the HTML right away, but it only finds a background image after it has downloaded and applied the CSS. That pushes the hero download later, unless the site preloads it.
What this means for your site
A video hero is not automatically slow, but it starts at a disadvantage. If you keep one:
- Give the video a lightweight poster image and preload that poster, so the first paint is an image rather than a wait.
- Keep the clip short and compressed, and avoid loading a full third-party player above the fold.
- Check your real-user LCP in Search Console or PageSpeed Insights after any hero change.
If your hero is a CSS background image, switch it to a regular image element with fetchpriority="high", or preload it. And if the hero does not need to move, a text or image hero is the safer choice for Core Web Vitals.
Sources
- HTTP Archive crawl of the top 1M sites, September 2026, mobile
- Chrome UX Report (CrUX) field data, p75, September 2026
- Largest Contentful Paint documentation: 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-hero-video-speed" src="https://www.pagespeedmatters.com/embed/data-studies/hero-video-speed" width="100%" height="600" style="width:100%;border:1px solid #E2E3E1;border-radius:12px" loading="lazy" title="Hero Video Speed 2026: 42.1% Pass CWV vs 48.1% Text - PageSpeed Matters"></iframe>
<script>window.addEventListener("message",function(e){if(e&&e.data&&e.data.psmEmbed==="hero-video-speed"&&e.data.height){var f=document.getElementById("psm-hero-video-speed");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/hero-video-speed">Hero Video Speed 2026: 42.1% Pass CWV vs 48.1% Text - PageSpeed Matters</a></p>
Frequently asked questions
Do hero videos slow down a website?
They go with slower results. Top 1M homepages with a video as the largest element pass Core Web Vitals 42.1% of the time, against 44.5% for image heroes and 48.1% for text, and their median p75 LCP is 2,295 ms against 1,971 ms for text.
What type of homepage hero is fastest?
Text heroes pass Core Web Vitals most often, at 48.1% across the top 1M, with a median p75 LCP of 1,971 ms. CSS background-image heroes do worst, at 35.1% and 2,506 ms.
Are hero videos slower on WordPress or Shopify?
The gap is wider on WordPress. WordPress video heroes pass 41.1% against 51.4% for image heroes, while on Shopify video heroes pass 54.6% against 58.6% for images.
How do I check what my LCP element is?
Run your homepage through PageSpeed Insights or the Performance panel in Chrome DevTools; both name the element that sets Largest Contentful Paint. If it is a video or a background image, that is where to start.
A hero can keep its visual impact and still load fast, once the poster, file size and loading order are set up with speed in mind. Need help with this? See our conversion rate optimization agency.