- 47% of consumers expect a web page to load in 2 seconds or less.
- Use Youtube or Vimeo to host your landing pages videos.
- Use a plugin to pop up your video embed code from image click.
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 landing 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.
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.
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 connexion 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.
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.
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.
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.
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 Unlimited Landing, as we work with Divi for all our clients landing pages I will show you how to do it with the Divi builder but as it’s just a simple shortcode to add to your content, you can reproduce this with any other WordPress templates.
So, after downloaded and installed the plugin, in your Divi builder add a new text module:
Then add this piece of code:
[sourcecode language=”plain”][vimeoyoutubepopup_video displaytype="image" path="https://rapidbeardesign.com/wp-content/uploads/2017/06/video_1.jpg" videoplayer="youtube" videoid="nwymFhYxRo4" width="900" height="510" autoplay="true"][/sourcecode]
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 or Rapid Bear Design if you need regular graphics design to be done.
Otherwise, just take a screenshot, upload it to your WordPress media library and copy paste the direct link into your shortcode and you are good to go.
And; if you are tired to do the creative work & management of your landing pages become an Unlimited Landing customer and we will do it for you ;).
If you want your video to be in the center, don’t forget to choose “Text Orientation: Center” in the text module option:
Bye, bye slow time loading landing page and hello to more conversion and happy customer.