Video on Websites: Best Practices for Performance

Video is compelling. It increases time on page, improves conversion rates, and communicates better than text alone. But video files are massive, and a poorly implemented video can make your entire website feel sluggish.

The Video Performance Challenge

A typical webpage might be 2-3MB total. A single minute of decent-quality video? 10-50MB. That's a problem.

For more insights on this topic, see our guide on HTTP vs HTTPS: Why SSL Certificates Matter.

Even worse: if video loads automatically, visitors on slow connections wait forever. On mobile data plans, you're burning through their data. The key is giving people the video experience without the performance penalty.

Embed vs. Self-Host

Embed from YouTube or Vimeo

The simplest approach. Upload to YouTube or Vimeo, embed on your site. They handle encoding, delivery, and bandwidth.

Pros:

No hosting costs for video
Automatic quality adjustment based on connection
Global CDN delivery
SEO benefits (YouTube is a search engine)

Cons:

Their branding and interface
Suggested videos at the end
Embed code adds third-party scripts to your page

Best for: Most businesses, especially for testimonials, tutorials, and marketing videos.

Self-Hosted Video

You store the video file on your own server and serve it directly.

Pros:

Complete control over presentation
No third-party branding
No outside scripts

Cons:

Bandwidth costs (video = expensive)
You handle encoding for different devices
Need to implement adaptive streaming

Best for: Background videos, critical brand content where control matters.

Dedicated Video Platforms

Services like Wistia, Vidyard, or Bunny Stream offer professional hosting without YouTube's distractions.

Best for: Businesses wanting professional video without YouTube limitations.

Background Video Best Practices

Those atmospheric videos behind hero sections look great but need careful implementation:

Keep them short: 10-30 seconds, looped. Longer = larger files.
No audio: Autoplay with sound is blocked by browsers anyway.
Compress aggressively: Background videos can be lower quality — they're atmosphere, not content.
Provide image fallback: Show a static image while video loads, or on mobile.
Consider mobile: Often better to show just an image on phones.
Use modern formats: WebM offers better compression than MP4 for web.

Lazy Loading Video

Don't load videos until they're needed. Strategies:

Facade pattern: Show a thumbnail. Load actual video player only when clicked.
Intersection observer: Load video when it scrolls into view.
User interaction: Load on click or hover.

For YouTube embeds, the facade pattern is particularly effective. Instead of loading YouTube's heavy player immediately, show an image with a play button. The real player loads only when someone clicks.

Video Optimization Checklist

Compress: Use HandBrake or similar to reduce file size.
Right resolution: 1080p is often overkill for web. 720p looks fine and is much smaller.
Remove audio if unnecessary: Audio track adds significant size.
Choose the right format: MP4 for compatibility, WebM for better compression.
Provide multiple resolutions: Let the player choose based on connection speed.
Set poster images: Show something before the video loads.

Accessibility Considerations

Captions: Always provide captions for audio content.
Transcripts: Text alternative for the video content.
Pause control: Auto-playing videos must be pausable.
Motion sensitivity: Respect prefers-reduced-motion settings.

When to Use Video

Video makes sense for:

Testimonials (more believable than text)
Product demos (seeing is understanding)
Tutorials and how-tos
Team introductions (builds trust)
Atmosphere/branding (subtle background video)

Video might not be worth it for:

Information that works fine as text
Mobile-first audiences on data plans
Pages where speed is critical (checkout, forms)

The Bottom Line

Video is powerful but needs careful implementation. The key is being strategic: use video where it adds value, host it appropriately, and implement lazy loading so it doesn't slow down the rest of your site.

Done right, video enhances your site. Done wrong, it becomes a liability.

Need help implementing video?

We can add video to your website the right way — engaging content that doesn't sacrifice speed.

Let's Talk Video