How to Optimize and Compress Video for Your Website

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

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

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

1. 1.

   Right format

   MP4 (H.264/AAC), optional WebM.

2. 2.

   Right size

   1080p or less, compressed, fast start.

3. 3.

   Right delivery

   Stream long videos from a platform or CDN.

4. 4.

   Right loading

   Poster, preload="metadata", lazy-load below the fold.

5. 5.

   No layout shift

   Reserve space with aspect-ratio.

6. 6.

   Structured data

   Add VideoObject markup so search engines understand the video.