Tip to prevent videos from impacting page load: - Set a low-quality poster image with the `poster` attribute - Set `preload="none"` (only works if there's a poster) The latter tells the browser to avoid downloading the video file until the user requests playback. - ThreadSky

About ThreadSky

aleksandrhovhannisyan.com • 26 days ago

Tip to prevent videos from impacting page load:

- Set a low-quality poster image with the `poster` attribute
- Set `preload="none"` (only works if there's a poster)

The latter tells the browser to avoid downloading the video file until the user requests playback.

Comments

aleksandrhovhannisyan.com•26 days ago

Minor correction: you technically don't _need_ a poster image for preload="none" to _work_. It's just that if you don't add a poster image, most browsers will render nothing in place of the default thumbnail, so it'll look a bit weird.

aleksandrhovhannisyan.com•26 days ago

You could also set preload="metadata" to fetch the video length. Otherwise it'll show 00:00/00:00. But I still prefer "none" as it's more lightweight.

aleksandrhovhannisyan.com•26 days ago

You can use a tool like ffmpeg to get the first frame (or any frame) of a video to use as the poster image:

https://stackoverflow.com/a/44073745/5323344

kokode.io•25 days ago

The downside is that you increase time-to-first-frame when your user actually wants to interact with the video. Depends on the use case and how central video is to your site.

aleksandrhovhannisyan.com•25 days ago

Definitely! If it's an above-the-fold video, as with loading="lazy", you might want to eagerly load it instead.

My use case is my blog where I sometimes want to include video demos in long-form content but don't want to load megabytes' worth of data.

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply