Product hero video and LCP: poster, preload, no loading=lazy

If a product page opens with a hero video, that video can be the page's largest contentful paint (LCP) element. web.dev's advice for that case is: use a poster image, preload the poster with fetchpriority="high", and do not put loading="lazy" on a video that is the LCP element. You can make the poster with Sume's video-frames, which pulls a still from your clip at a time you pick, at the clip's own size unless you clamp it.

What does web.dev say about each attribute?

The page says that videos can qualify as LCP candidates and that a poster image is quicker to load than the video. Browsers that do not support loading on media elements ignore it, so the poster loads right away there.

Why not just lazy-load everything?

loading="lazy" prevents the poster from loading at all until the video is in or near the viewport. For a video far down the page, that saves bytes. For one at the top, it delays the largest thing a visitor sees. web.dev puts it the same way it treats images: videos that are LCP elements should not use loading="lazy".

web.dev also notes that most browsers default preload to metadata, and a portion of the video is fetched even then, because browsers cannot know where the metadata sits in the file. If the hero does not autoplay, preload="none" is the best chance of avoiding the download, optionally with an onmouseenter handler that switches it to metadata.

<link rel="preload" href="/cdn/mug-hero-poster.jpg" as="image" fetchpriority="high">
<video controls preload="none"
       poster="/cdn/mug-hero-poster.jpg"
       onmouseenter="event.target.setAttribute('preload','metadata')">
  <source src="/cdn/mug-hero.mp4" type="video/mp4">
</video>

How do you make the poster with Sume?

Video frames takes the clip's media.sume.com URL and at, one to 24 seconds, each inside the clip. It returns durable JPEG or PNG artifacts, and omitting max_edge keeps the source size. Submit always returns 202; poll GET /v1/video-frames/:id until resource_status is ready, then read frames[{t,url,width,height}]. The width and height come back with each still, so you can set matching attributes on the <video> and avoid layout shift.

Pick the moment carefully. The poster is what the visitor sees first, so choose a frame with the product centered and sharp rather than the first frame, which is often a fade. Then copy the file to your own host and point both the poster attribute and the preload link at that copy.

curl -X POST https://api.sume.com/v1/video-frames \
  -H "Authorization: Bearer $SUME_API_KEY" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: hero-poster-001" \
  -d '{
    "video_url": "https://media.sume.com/artifacts/artf_demo/talk.mp4",
    "at": [1.5],
    "format": "jpeg"
  }'

A short hero is easier to load

The poster fixes the first paint; the video file still has to arrive. A hero that is only a few seconds long is a smaller file. Video trim can cut the range and conform the frame with output, and it drops the audio with audio: "drop" if the hero is silent. Measure the real page with your own tools after the change; this post has no benchmark to offer.