Embedded video slowing down your website and giving bad speed scores

By: | September 17, 2019 | Tags: , ,

Is your YouTube or Vimeo video slowing down your Website?

As many of you know I am freakishly obsessive when it comes to site speed. Whenever I make some big changes I always test the speed of my creations. With that in mind my question is this – Is an embedded video slowing down yours or my website?

I recently made a few changes to this website and blog. That was to add some frequently asked questions to my Home Page. One of the questions is about Hosting and why it’s needed. My answer included a video that I embedded off YouTube. This is how it affected my site speed at the time…

Video slowing down your website
  • Save

Still pretty fast a you can tell but the Pagesped and and Yslow scores took a hit. What to do then. It may sound counter-intuitive to the normal layman but embedding a video from another site can actually impact your site to perform at its best, especially if the embed is in an Iframe.

Simple answer is the Host the video on your servers

If you don’t have your original MP4 Video then you will need to download the video off YouTube. I did a Google search to download YouTube videos and settled on This Site to Re-download mine.

After that, you simply upload the video to the media section of your blog. Media > Add new, Then you simply embed the video into a blog post or page using the simply Gutenberg interface.

However, in this case, I did something different. I had to add it to my homepage file which is primarily a bunch of PHP and HTML code. I uploaded the video file to my Theme’s assets folder and added this piece of code to the answer section underneath the question about hosting.

<div class="full-embed">
  <video class="hosting-video" controls>
    <source type="video/mp4" 
src="<?php echo get_template_directory_uri(); ?>/assets/What-is-Hosting.mp4">

Of course, the video needs styling to make it look right so with that in mind I added this small CSS code snipped just before the full-embed div.

  .full-embed {position:relative;width:96% !important;height:0;padding-bottom:56.25%}
  .full-embed .hosting-video {position:absolute;top:0;left:0;width:100%;height:100%}

And what difference does that make? Well essentially it makes the video part of the theme and it also means I can be cached more easily meaning your pages-peed scores will go up. Here are my result now.

Pagespeed results after
  • Save

There you have it. A quick five min Job and my site is back to Grade A’s.

  1. Bintang F | at 4:31 pm

    Not only videos actually, even pictures can slow down the speed of our website. For example, I never cared about image formats before. The result? My website is very slow. Then I got information that the WEBP format was well liked by Google. So I changed all the image formats on my website to WEBP and Voila! My website score for the PC platform is almost 100!

Would you like to share your thoughts?

Your email address will not be published. Required fields are marked *

CommentLuv badge