Key takeaways
- Export MP4 (H.264/AAC) at 1080p or less with fast start; add WebM optionally.
- Stream anything longer than a minute or two from a platform or CDN.
- Use posters, preload="metadata" and lazy loading below the fold.
- Reserve space to avoid layout shift; load player scripts only when needed.
- Add VideoObject structured data so search engines understand your videos.
Format and codec
MP4 with H.264 video and AAC audio plays in every modern browser. WebM (VP9/AV1) is smaller; offer it as an extra <source> if you want.
Size and bitrate
| Use | Resolution | Target size |
|---|---|---|
| Background loop | 720p–1080p | A few MB |
| Product clip | 1080p | Under ~10 MB |
| Long video | Any | Stream from a platform, don’t self-host |
Compress before uploading
Free tools like HandBrake or ffmpeg can cut file size dramatically. Remove the audio track from background loops.
Load video lazily
Use preload="metadata" or none, a poster image, and load players only when they scroll into view. Elfsight Video Gallery is lazy-loaded by default.
Add video schema
Help search engines understand your videos with VideoObject structured data — generate it with our video schema generator.
Web-ready export recipes
# General web MP4: H.264 + AAC, fast start ffmpeg -i input.mov -c:v libx264 -crf 23 -preset slow -c:a aac -b:a 128k -movflags +faststart out.mp4 # Downscale to 720p ffmpeg -i input.mp4 -vf "scale=-2:720" -c:v libx264 -crf 24 -c:a copy out-720p.mp4 # Remove audio (for loops) ffmpeg -i input.mp4 -an -c:v copy silent.mp4
+faststart moves the index to the beginning of the file so playback starts before the download finishes.
Progressive download vs. streaming
A single MP4 is downloaded progressively: the browser fetches one file at one quality. That’s fine for clips under a minute or two. Longer videos should be streamed with adaptive formats such as HLS: the video is split into small chunks at several qualities, and the player switches depending on the viewer’s connection. YouTube, Vimeo and video CDNs do this for you.
Video and Core Web Vitals
| Metric | How video affects it | Fix |
|---|---|---|
| LCP (largest contentful paint) | A large poster or player can be the largest element | Use a compressed poster; don’t lazy-load the hero poster |
| CLS (layout shift) | Players without a reserved size push content down | Set aspect-ratio or width/height |
| INP (responsiveness) | Heavy players and scripts slow interactions | Lazy-load players; load one script, not one per video |
WordPress tips
- Don’t upload long videos to the Media Library — use YouTube, Vimeo or a video CDN.
- Make sure your lazy-load plugin also handles iframes.
- You rarely need a video preloader plugin; a poster and lazy loading are enough.
- Check that caching or optimization plugins don’t delay the scripts your video player needs.
Optimization checklist
- Right format
MP4 (H.264/AAC), optional WebM.
- Right size
1080p or less, compressed, fast start.
- Right delivery
Stream long videos from a platform or CDN.
- Right loading
Poster, preload="metadata", lazy-load below the fold.
- No layout shift
Reserve space with aspect-ratio.
- Structured data
Add VideoObject markup so search engines understand the video.
Frequently asked questions
How do I compress video for a website?
To compress video for a website, export MP4 (H.264/AAC) at 1080p or less with a moderate bitrate, remove audio from background loops and lazy-load videos below the fold. You rarely need a WordPress website video preloader plugin — a poster image and lazy loading do the job.
What is the best video format for websites?
MP4 with H.264 video and AAC audio.
How big should a website video be?
Keep background loops to a few MB; stream long videos from a platform.
Does video hurt page speed?
Only if it loads early and large — lazy-load it and use posters.
Does video slow down a website?
Only when it loads early and large. With posters, lazy loading and streaming from a platform, video barely affects page speed.
What resolution should website video be?
1080p is plenty for most sections; 720p is often enough for backgrounds.
What is a good bitrate for website video?
For 1080p web video, a few megabits per second is usually plenty; use CRF-based encoding (for example CRF 23–28 in x264) and check the result by eye.
Should I host video on my own server?
Only short clips. Long videos cost bandwidth and need adaptive streaming — use YouTube, Vimeo or a video CDN.
Does lazy loading hurt SEO for video?
No — search engines render the page and can read structured data. Don’t lazy-load the main hero poster, though.
How do I test the impact of video on page speed?
Run PageSpeed Insights or Lighthouse with and without the video, and compare LCP, CLS and total blocking time.