Site speed ...
A vital SEO factor ... and a never ending problem ...
A problem that involves (too) many factors.
And we all know, that images and videos take the most time to load on your website compared to anything else.
But using eye-catchy images and engaging videos is almost manadatory nowadays ... And obviously, each image and video will increase your page load time ...
Of course, everything starts with an effective offline optimization that will allow you optimize your images and videos for web (size, format, etc). But, you'll have to do more than that, because every single new - already optimized - media element will automatically increase the loading speed of your page ...
And this is where the so-called lazy loading method comes in handy ...
How does lazy loading work? Well, basically, you are "delaying" the load of all those media elements which are not visible in the above the fold area.
In plain English: instead of loading all your images and videos at once, lazy loading downloads only the images and/or the videos that will be visible on users screen. It replaces all other images and videos with a placeholder element, and when the user scrolls down, your website will load the "new" images and videoas that are now visible in the browser’s viewing area.
On January 19, 2019 I've already published a related tutorial to show you how can you implement the lazy loading mehod for your images. Here it is again:
How to increase your site speed with lazy-loaded images
Needless to say, images are a lot smaller in size than videos, so the lazy loading technique becomes even more useful when it comes to videos ...
This is why I've decided to create a new tutorial where I will show you how to set up a similar lazy-load solution for your videos.
Interested?
Let's dance ...