Performance Scores and Videos
Understanding how video affects performance scores.
As a team we've spent a lot of time considering Core Web Vitals. Of the four categories (performance, accessibility, best practices, and SEO), performance has been the most head scratching. It's the only score that seems to vary wildly. You can run the same URL through Google's online measurement tool multiple times and receive a very different performance score every single time. After months of testing, one thing I can tell you is that video greatly affects the performance score.
Testing the Performance Score
Fastspot has prominently leveraged video services like YouTube and Vimeo. We know there was some overhead associated with referencing a resource from an external source but these video services are just so dang efficient at serving video. So this is where I started my testing. Let me explain.
I began with a typical interior template that included multiple components and several different images ranging from small to very large but no video was present. I ran this page through the measuring tool and averaged a performance score of 95. That's a fantastic starting point!
My next step was to use YouTube's provided embed code to add a video to the page. This was the one and only change and my new average performance score plummeted to 56. A single video embed dropped the score by nearly 40 points.
Not to be deterred, I thought setting content-visbility might help. This raised the average score to 59. A little better. What if I lazy loaded the iframe? 74. Interesting. But not really enlightening. What would the scores be like if the video was autoplaying? What if I didn't use YouTube and instead we referenced a local video file? I ran all of these tests and here are the results:
| Approach | Lazy Loading | content-visibility | Autoplay | Performance Score |
|---|---|---|---|---|
| No video | 95 | |||
| YouTube embed | 56 | |||
| YouTube embed | X | 74 | ||
| YouTube embed | X | 59 | ||
| YouTube embed | X | 42 | ||
| YouTube embed | X | X | 78 | |
| YouTube embed | X | X | 60 | |
| local mp4 file | 82 | |||
| local mp4 file | X | 84 | ||
| local mp4 file | X | 91 | ||
| local mp4 file | X | 77 | ||
| local mp4 file | X | X | 82 | |
| local mp4 file | X | X | 88 |
For each one of these variations I ran the page through the tool five times and averaged out the score. I bet if I were to rerun these same pages another five times we'd still get different results. Even though we can't take any of this as concrete data it does give us some direction.
Key Takeaways
-
Autoplaying video should be avoided when possible. Autoplaying video is most used to establish a first impression at the top of the page. Video at this location would render tools like lazy loading and content-visibility useless. If autoplaying video is required I would prefer to use a local video file to a third party embed.
-
Basic YouTube embeds should be ditched in favor of loading a custom YouTube video with JavaScript. Instead of loading this video on page load I would prefer to load on user interaction, like pushing a play button on a still image of the video.
Video on the web is here to stay. It's a valuable arrow in our quiver but we have to use it in the right way. If we load videos responsibly I'm confident we can still see great performance scores.