There’s no denying that video files are large. In fact, videos made up around 81% of global internet traffic in 2021. On most webpages, video content is usually the biggest asset a browser needs to process, unless something unusual is happening with images or JavaScript.
Because of this, some inexperienced developers and SEO professionals look at waterfall charts from site speed tools and conclude that “video harms site speed.” That assumption isn’t entirely accurate. While videos can affect performance, following the right practices ensures they don’t slow down your website—or the playback experience.
Waterfall charts often make videos appear problematic for page speed.
The goal is to deliver smooth video playback without buffering while keeping your website fast overall. To achieve this, you should monitor key performance metrics known as Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Tip 1: Deliver videos using a CDN
The easiest way to add a video to a WordPress website is to upload it directly to the media library and place it on a page using the Gutenberg Video Block.
However, this approach is often the least efficient. When a user presses play, the browser must load the full video file directly from your server. Since the file isn’t optimized and no delivery network is involved, this setup can easily lead to buffering and negatively impact FID. It also doesn’t account for server performance, user location, or connection speed.
A better solution is to deliver videos through a CDN. Platforms such as YouTube and Wistia automatically distribute video files through their global CDN networks when you embed videos on your site.
Tip 2: Use adaptive streaming
The HTML5 <video> tag is a powerful and clean piece of web technology, but relying on it alone can cause performance problems. The tag simply loads a video file and lets the browser handle playback.
When the video file is large or high-resolution, users with slower internet connections may experience long buffering times while the browser loads enough data to begin playback. This situation negatively affects FID.
A better approach is adaptive streaming. This method provides multiple versions of the same video at different resolutions and bitrates. The server automatically delivers the best version based on the user’s connection speed.
For example, if someone is watching from a mobile device with a slow 500 kbps connection, the server may deliver an SD version with a 300 kbps bitrate instead of a 4K file requiring 35 Mbps.
You can implement adaptive streaming yourself using MPEG‑DASH, or rely on hosting platforms like YouTube or Wistia, which already include this technology.
Tip 3: Export videos using a variable bitrate
Another way to improve video loading speed is by optimizing files during export. A Variable Bitrate (VBR) compresses video by adjusting the bitrate depending on the complexity of the scene.
The goal is to keep the bitrate as low as possible while maintaining acceptable quality. Fast-moving scenes with complex visuals require higher bitrates, while simple shots—such as a person speaking against a plain background—can use much lower bitrates.
Using VBR allows video compression tools to make intelligent bitrate adjustments throughout the video, which significantly reduces file size.
This method works with common web codecs like VP9 and h.264.
Tip 4: Avoid looping autoplay videos (or keep them short and silent)
Autoplay videos—especially those used as homepage backgrounds—remain popular. However, if implemented poorly, they can create significant performance issues.
In many cases, they greatly increase Largest Contentful Paint (LCP). When a video starts playing while the page is still loading HTML, images, and JavaScript, the browser has to process many tasks simultaneously. On slower connections, this results in sluggish performance.
If autoplaying background videos are necessary, keep them extremely short—ideally under 10 seconds. Removing audio also helps reduce file size.
Tip 5: Load videos asynchronously
Using asynchronous JavaScript for video delivery offers two major advantages.
First, it prevents videos from blocking other elements from rendering on the page. Second, it allows critical resources related to LCP and CLS to load before the large video file itself.
For example, if you load your video player using AJAX, the browser first renders a small script (usually only a few hundred kilobytes). The rest of the video assets can then load in the background while the page continues to display other elements.
Additionally, components visible before playback—such as the video frame or thumbnail—can be prioritized so they load immediately. This approach improves Core Web Vitals and overall user experience.
Tools like Yoast Video SEO for WordPress apply this method to ensure even large videos do not harm site performance.
Tip 6: Avoid placing videos behind render-blocking JavaScript
Sometimes videos are placed inside sliders or carousels instead of static images.
Unfortunately, many plugins that power these features load content only after a trigger event. This means other JavaScript may block the video from loading initially.
When this happens, the browser must download the entire video file at the moment it appears in the carousel instead of preparing it earlier. This increases loading time and negatively affects First Input Delay.
It can also cause SEO issues. If search engine crawlers cannot access the video properly, they may fail to index it.
To confirm whether your videos are accessible to crawlers, check the Video Pages report in Google Search Console.
Summary
When working with video and site speed, remember these key principles:
- Use infrastructure designed to handle large media files, such as a CDN
- Ensure videos adapt to the viewer’s connection speed through adaptive streaming
- Reduce file sizes without lowering quality by using variable bitrate compression
- Load essential page elements before loading the video file using asynchronous delivery
- Avoid blocking video loading with render-blocking JavaScript
FAQs
What affects video loading speed on a website?
Video loading speed is influenced by factors such as file size, video format, hosting method, server performance, and the user’s internet connection. Optimizing these elements can significantly improve how quickly videos start playing.
Why is video loading speed important for SEO?
Faster video loading improves user experience and reduces bounce rates. Search engines like Google consider page speed as a ranking factor, so faster-loading videos can contribute to better search visibility.
How can video compression improve loading speed?
Video compression reduces the file size without drastically affecting quality. Smaller files load faster, making compression one of the most effective ways to improve video performance on websites.
Should you host videos on your website or use a third-party platform?
Hosting videos on third-party platforms such as YouTube or Vimeo can improve loading speed because these platforms use powerful content delivery networks and optimized streaming technology.
What video formats load faster on websites?
Modern formats such as MP4 (H.264) and WebM are widely recommended because they provide a good balance between file size and video quality, which helps videos load and play smoothly.
What is lazy loading for videos?
Lazy loading delays the loading of videos until they are about to appear in the user’s viewport. This prevents unnecessary loading when the page first opens and helps improve overall page speed.
How does a CDN help video loading speed?
A Content Delivery Network (CDN) stores copies of your video files on servers around the world. When a user visits your website, the video is delivered from the closest server, reducing loading time and buffering.
What is adaptive streaming?
Adaptive streaming automatically adjusts video quality based on the user’s internet speed and device. This helps ensure smooth playback and faster loading, even on slower connections.
How can thumbnails improve video performance?
Using thumbnails instead of automatically loading videos reduces the amount of data loaded when a page first opens. The video only loads when the user clicks the thumbnail, which helps improve initial page speed.
How do caching techniques help with video loading?
Browser caching allows certain elements of your website, including video components, to be stored locally on a user’s device. When the user revisits the page, the content loads faster because fewer files need to be downloaded again.
What tools can help measure video loading speed?
Tools like Google PageSpeed Insights, GTmetrix, and Lighthouse can analyze page performance and provide suggestions to improve video loading speed.
