Adding video content on websites is growing its popularity day by day, and it is undisputed. In fact, in the USA, adults now spend nearly half a day interacting with the media. In that case, the importance of using videos cannot be overstated when it comes to developing your marketing strategy.
However, if your website is not correctly optimized, embedding video content can cause performance issues and make your website’s loading time slow. And, at this point, you can’t afford to have a site that takes too long to load as it will impact your site’s user experience as well as ranking.
Therefore, I have come up with this guide with the answer for how to speed up YouTube/Vimeo embeds in wordpress. So, if you are looking for ways to speed up your YouTube or Vimeo embeds in wordpress, let’s dig in.
Does Embedding A Video On WordPress Slow Down?
When it comes to adding visual media to a WordPress site, you may wonder if it slows down your website load time. Actually, yes, if your site is not optimized to handle video content, it will slow down after adding videos.
The reason behind this is whenever you embed a video on your site, it will automatically create an iframe and add some pieces of code or resources to the pages. For example, HTML file, one CSS, two/three JS files, additional DNS lookups, render-blocking JS files, etc.
Which in turn, makes the search engine and visitors’ browsers load the snippet each time the code is added and make a number of additional requests to render the page. This way, it will potentially slow down the loading time and affect the core web vital score of your site.
Things will get even worse if you add videos that have ads running, as these will add more requests.
Why Your Website’s Video Loading Speed Matters?
According to Google Analytics, the average session duration of converting users is 10 times longer than non-converters. This means the longer you can engage the customers on your site, the better chance you have to make a sale.
In addition, people who watch product videos are 64-85 percent more likely to make a purchase. This is where video content comes into play, as it is one of the most significant ways that can ensure an improved average session duration of your site. As a result, you can experience an increase in conversion also.
However, you can only experience these things when your site loads quickly.
- 1 in 4 visitors abandons a page that takes more than 4 seconds to load.
- 46% of visitors never revisit a page that loads slowly.
- A 1-second delay in loading can reduce customer satisfaction by 16%.
If your site takes time to load or perform poorly, the bounce rate will skyrocket. Apart from this, Google tends to prioritize faster loading sites to provide information as quickly as possible to the users. So, if your site can’t perform well, the ranking will also start to fall from the search engine result pages.
How To Speed Up YouTube/Vimeo Embeds In WordPress
So far, you have seen that videos can help your website grow, but they can also slow down your site. But, don’t lose your hope; there are some easier methods that can help you to optimize your embedded YouTube or Vimeo videos.
Before proceeding, make sure to apply any changes to your child theme first, and if everything goes right, you can apply on your main site. Now, let’s see how to speed up YouTube/Vimeo embeds in wordpress.
Method 1: Lazy Loading embedded YouTube/Vimeo Videos
Lazy loading helps you by allowing your website’s videos to play when visitors ask instead of loading initially. It is a great way to minimize the HTTP requests while loading the page initially. Besides that, this method can effectively improve your website speed performance.
Lazy Loading YouTube Embedded Videos
Well, to lazy load YouTube embedded videos, you need to go through several steps. So, here they are-
Step 1: HTML Structure
Let’s begin with building the HTML structure. Here, I’ll use only two div elements, where the first one will wrap around the embedded video and the second one is nested in the first div.
<!-- (1) video wrapper --> <div class="youtube" data-embed="AqcjdkPMPJA"> <!-- (2) the "play" button --> <div class="play-button"></div> </div>
You just need to make sure to use the above snippet and replace the video ID with the “AqcjdkPMPJA” attribute.
Step 2: CSS Structure
After that, move forward to adding the styles using the following snippets. With this code, you can retain the video aspect ratio at 16:9, which is recommended for YouTube videos.
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Step 3: JavaScript Code
Now, start fetching the image thumbnails using the following scripts based on the YouTube ID you added to the data-embed attribute. And to get started, select the div component to wrap the video embedded with the YouTube class.
var youtube = document.querySelectorAll( ".youtube" );
You may have two or more YouTube videos; in this case, you need to iterate through each of the selected elements.
...
for (var i = 0; i < youtube.length; i++) {
// add the code here
}
Now, it’s time to retrieve the YouTube image thumbnail and display it. Here, you should specify the ID in the data and retrieve it using the .dataset property.
// loop
for (var i = 0; i < youtube.length; i++) {
// thumbnail image source.
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
}
There is another way to make the page load faster which is loading image thumbnails Asynchronously. If you have 2, 3, or more videos, it will help each image thumbnail to load from the source variable simultaneously.
// loop
for (var i = 0; i < youtube.length; i++) {
...
// Load the image asynchronously
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
}
Finally, you need to add the last script with the following code snippet.
// loop
for (var i = 0; i < youtube.length; i++) {
...
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
}
And this is the final JavaScript code-
( function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
Lazy Loading Vimeo Embedded Videos
Vimeo lazy loading also helps load the Vimeo videos on demand. It will play the video only when the viewers click on the thumbnail image or play button. You just need to use the following code snippets. So, here’s how it works-
Step 1: HTML Structure
<iframe class="lazyload" data-src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media"></iframe>
Step 2: CSS Structure
.content-block {
width: 200px;
height: 3000px;
background-color: red;
}
Step 3: JavaScript Structure
var iframe = document.querySelector('iframe');
function handleLazyLoad() {
if (iframe.classList.contains('lazyload')) {
const storeSRC = iframe.dataset.src;
iframe.addEventListener('lazyloaded', () => {
delete iframe.dataset.src;
iframe.src = storeSRC;
initPlayer();
});
}
}
function initPlayer() {
var player = new Vimeo.Player(iframe);
player.ready().then(function (){
console.log('player is ready!');
// These events are not attaching? Why?
player.on('play', function () {
console.log('played the video!');
});
player.on('ended', function () {
console.log('the video has ended');
});
});
}
handleLazyLoad();
Lazy Loading YouTube/Vimeo using Plugin
Using a plugin to lazy load the embedded YouTube or Vimeo videos is one of the easiest ways. If you don’t like coding, plugins can make the process absolutely hassle-free. There are several plugins available, and here are some of them-
Method 2: Video Optimization For Website
To deliver high-quality video content with the best results without compromising the site speed make sure to consider the following tips before adding any video to your site.
Use Data Compression Tools
Typically, smaller files can load faster than larger ones. Therefore, by compressing all the video sizes of your website, you can ensure faster loading time and save users time.
While compressing the videos, you also make sure that you can’t sacrifice the quality. The reason is high-quality videos help to make a website look more professional to the audiences; also, people like to watch videos in high-quality.
There are some data compression tools that help in reducing the video file’s size without degrading the quality. For example, Blazemp or HandBrake can help you in this process.
Convert Videos To HTML5 Supported Formats
With HTML5, developers can deliver video content without using any plugin. You just need to convert the video to HTML5 formats, for example, MP4 and WebM using an online video converter.
Use A Content Delivery Network
Content delivery network (CDN) stores your website’s static asset’s cached copies. CDNs serve content from the nearest end server, and this way, it can ensure fast content delivery to the users. When it comes to larger files like videos, this is an essential way.
In this way, your website users won’t have to wait too long to download and buffer your videos. Moreover, a CDN can improve your website’s overall performance drastically.
Remove Audio From Muted Videos
Another simple way to optimize your video for the website is, removing the audio data which are muted from the video file. If the video is made by you, then you can simply remove the audio while exporting the file. Aside from that, you can also strip the audio by using FFmpeg or a video editing tool.
Method 3: Web Page Optimization For Video Content
Optimizing videos for faster loading speed is a great way to start; still, you need to ensure a smooth user experience. Thus, you need to optimize your website with the following tips, so that it can support high-quality videos.
Specify The Video Size
While optimizing videos of your website, keep one thing in mind to specify or define the width and height of videos in your HTML or CSS. This allows the browser to allocate the required bandwidth without any additional work.
Defer Loading Videos Until Page Load Is Complete
As I mentioned earlier in the first method, you need to defer or lazy load videos until page load is complete. So, if your website videos play immediately when visiting your page, you should defer it from loading, until it completes the initial page loading. This way, you can ensure a smooth user experience.
Prioritize Mobile Users
Today, more people are using mobile to access the web. Therefore, it becomes crucial to optimize your website’s videos for mobile users. Your website should be responsive to different screen sizes and display resolutions. Also, to display the videos accurately, it must be able to detect the orientation of devices.
Last Thoughts
So, this is all for how to speed up YouTube/Vimeo embeds in wordpress. I know one solution won’t fit all websites, that’s why it is recommended to consider the most suitable method that will work for you. As long as you can properly optimize your media files, adding videos won’t impact your site performance that much.
Let me know in the comment section below if you have applied any of these techniques to speed up YouTube or Vimeo Embeds in your WordPress site. Also, with any kind of queries regarding this topic, feel free to Contact Us.
