What to do when your videos slow down your WordPress website?

HomeBlogWhat to do when your videos slow down your WordPress website?

You know it, Google consider speed as one of the new rules for SEO and you probably know as well that videos are extremely demanding when it comes to loading your pages right?

I’ve spent an incredible amount of time looking on how to optimize my loading time and I become really good at it, but I was always blocking on one part… Videos.

The problem is that you have a lot of different video hosting provider; Youtube, Vimeo, Wistia for the more famous one. And what they all have in common is the amount of javascript they add to your loading time in order to work.

Well, good for me and for you, I’ve found a solution to fix this and you don’t need to be a developer to actually use it.

So let’s take a look at how long it takes for those 3 video services to actually load their code.

I’ve done a test run with a blank HTML page and the 25s video presentation of Unlimited Landing (which is offline now as it as been replaced with Divi Design Service).

Note that speed will be subject to the length of your video and to where your visitors are from when watching it. I’ve done the test with GTmetrix, based on Chrome browser and unrestricted connection from Dallas USA. The point here is to see what the embed code load in term of code and of course how it impact speed and I think you will be surprised.

Youtube

Let’s start by Youtube (Free), the most famous one. As you can see it took 5.9s for the player to load with 11 requests. That quite a lot and it will add this to your actual loading time multiply by the number of Youtube players you have on your page.

Speed test with Youtube video embed code.

Wistia

Wistia ($99/y) which is the favorite one for marketers as you can customize pretty much everything and even add an email opt-in to your videos. Well, as surprising it will be, they are as bad as Youtube with their embed code. Even a little worst as they have 14 requests. But it’s mostly because they have to load all those fancy marketing interactions options.

Speed test with Wistia video embed code.

Vimeo

And finally Vimeo (Free & Paid), the big surprise of this test! Look at this loading time, 0.6s, BOOM. End the code only ask for 9 requests. That pretty damned fast. And now if you are on the Vimeo business account, they just add the ability to ask for email at the end of your videos. And as Wistia starts at $99 and Vimeo Business at $50 you will maybe want to consider it.

Speed test with Vimeo video embed code.

Now we know how long it took for those platforms to load their code into your landing pages, but some of you are already using one or another for your video for whatever reason and migrate everything to Vimeo is not on the table.

Well, fair enough. I personally use Youtube, Wistia, and Vimeo for different reasons and purpose.

So here the solution to your loading problem.

Replace your video embedded code by an image that once clicked will open your video player and load the embed code! Simple right? And you don’t need to know how to code because we going to use a very simple light and cheap ($8) plugin to do that.

It’s not just a popup plugin. This one will load the embed code only if you click the image. Normal popup plugin will just add a layer of code to your video embed code and everything will load within your page.

Disclaimer: I’ve been testing different plugins and this one is the lightest and simplest. The only downside of it is that this plugin only works with Youtube & Vimeo as Wistia as it own “Popup” style code (that will slow down your loading time as like the normal code). Sorry for that if you use Wistia.

At Divi Design Service, as I work with Divi for all our clients websites I will show you how to do it with the Divi builder, but as it’s just a simple short-code to add to your content, you can reproduce this with any other WordPress templates/builder.

So, after downloading and installing the plugin, in your Divi builder you can now add a new text module:

Divi text module for video embed code.

Then add this piece of code:

[vimeoyoutubepopup_video displaytype="image" path="https://dividesignservice.com/wp-content/uploads/2017/06/video_1.jpg" videoplayer="youtube" videoid="nwymFhYxRo4" width="900" height="510" autoplay="true"]

Replace (path=””) by your image location. I’ve just taken a screenshot of the Youtube video player and add a big play icon in the middle with Photoshop. You can achieve the same think using online service like Canva.

Otherwise, just take a screenshot, upload it to your WordPress media library, copy paste the direct link into your short-code and you are good to go.

If you want your video to be in the center, don’t forget to choose “Text Orientation: Center” in the text module option:

Divi text module for video embed code 2.

Et voila!

Conclusion

Bye, bye slow time loading website page and hello to more conversions and happy customers. Now in case you would like to have me to move your website to Divi and speed up your loading time I do website creation for $597.

About the author

I’m Lesly,  a French web designer, full-time traveler, and WordPress enthusiast since version 0.1. I write mainly about WordPress, web design, security, speed, and that kind of thing. I’m also the creator of The Guardians of WordPress.

Got thoughts? I’d love to hear them! Drop a comment below and let’s get the conversation started!

9 Comments

  1. Avatar

    Hey Lesly, this is a really cool little speed hack! I’m going to try the video popup plugin on my personal blog and see how it improves the load times. 🙂 Now, if you would write a tutorial post about how to make that awesome little “Key Takeaways” box at the beginning of your post…THAT would be cool! 😉

    Reply
    • Avatar

      Thanks mate! The takeaway box is a custom styled for now. But I think to transform it into a shortcode when I’ll get the time ;).

      Reply
  2. Avatar

    Great post. Small thing conclusion has a typo of conclustion.

    Reply
    • Lesly Garreau

      Thanks Sam, I corrected it :).

      Reply
  3. Avatar

    Hi Lesly, this posting is two years old but the issue (unfortunately) still not fixed by divi team. Videos are slowing down my website dramatically. Even if it is just a small 2 MB video.
    Your posting is a solution for Youtube and Vimeo videos. What about self hosted videos? Due to GDPR, I host videos by my own. They are embedded with the Divi video module. This module seems to load everyhthing anytime.
    And the recommended Plugin on codecanyion has it’s last update 2 years ago. Seems that developers are not interested in this topic anymore.
    Do you have an advice for self hosted Videos with Divi Video module? Thanks a lot in advanced.
    Merci. Sabrina
     

    Reply
    • Lesly Garreau

      Hey Sabrina, thanks for your comment. Indeed this post is 2 years old but it still hold it’s ground though :).
       
      I’m not sure Divi will ever change the way the video module behave as it’s a very specific problematic we are talking about here and the module do what it’s supposed to do.
       
      You can try to use the plugin Popup Maker and embed your video in there, but I’m not 100% sure the code will load with the page or when the popup is opened.
       
      On another end you can use https://www.youtube-nocookie.com/embed/>yourvideocode< to load a GDPR ready Youtube video. So I supose that you can modify the plugin code to reflect this?
       
      Finally you can try to just use the Divi module with the no cookie url and use WpRocket option to replace Youtube videos with a clickable image.
       
      Hope it’s help, let me know.

      Reply
      • Avatar

        Thanks a lot Lesly! Did not think about this solution but it is: great!!!!
        Will try it! Thank you!!!

        Reply
  4. Avatar

    Why does this insert a horizontal scroll bar???

    Reply
    • Lesly Garreau

      Hey Janelle, could you share a link? It’s hard for me to answer your question without seen it :).

      Reply

Submit a Comment

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