Embedded video slowing down your website and giving bad speed scores

1
By: | September 17, 2019 | Tags: , ,
Embedded video

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">
  </video>
</div>

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.

<style>
  .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%}
</style>

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.

Rating: 5.0/5. From 1 vote.
Please wait...

GET ALL MY BEST CONTENT DIRECT TO YOUR INBOX

For value laden, high quality tips, tricks and tutorials to build a world beating blog or website

  1. Phillip Dews | at 10:58 am

    Anything you wish to add? How does your website speed compare? What do you do to improve on website speed?
    Phillip Dews recently posted…How much does a website really cost?My Profile

    No votes yet.
    Please wait...

Would you like to share your thoughts?

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

CommentLuv badge
4 Shares
Copy link
Powered by Social Snap