I have performed some tests and reached the conclusion that we should lazy load images, iframes and videos.
There are several plugins that can help you do that such as PerfMatters, WP Rocket and FlyingPress
Since I like to keep plugins to do exactly what I need, I was trying to find a very light plugin to optimize images and videos.
The main problem are YouTube videos since they load a few scripts and resources even when the video hasn’t been clicked on.
After playing with several plugins, these are the ones that you can use to lazy load all types of media that you add to your content.
Table of Contents
LazyLoad Plugin by WP- Rocket
I chose LazyLoad Plugin – Lazy Load Images, Videos, and Iframes over the other options because the plugin does what you want without any complication.
This plugin by WP Rocket adds some unminified code to your pages and loads a single script which is 3.23 KB in size.
The plugin also replaces YouTube iframes with a preview thumbnail.
Optimize More! – Images
I kept reading about optimization and code snippets and I ended up reading an article from the thinkweb.dev website.
While I was checking the rest of the articles, I realized that they have a plugin to optimize images.
Optimize More! – Images uses Lozad.js which is lighter than the library used by WP Rocket
I gave the plugin a try and it delivers on its promises.
The script loads a single file which is 1.68KB so I fell in love with it so you should give it a try
I ran some tests since this plugin doesn’t have the option to replace the YouTube Iframes with a preview thumbnail but the videos get lazy loaded and don’t create any external requests unless they are about to be viewed.
The plugin has less than a hundred installations so I hope it gets the credit it deserves soon.
Native Lazy Loading
I installed Native Lazyload a plugin created by Google which has 10,000+ installations.
I ran some tests and the images and videos get lazy loaded and no external requests are made
The plugin only adds a script as a fallback when the user’s browser does not support the native loading attribute yet.
Native Lazy Loading without a Plugin
Native lazy loading is great for site performance because it doesn’t rely on inline JavaScript or external scripts.
Sometimes optimization plugins disable native lazy loading so they can take care of the optimization of videos, images, and Iframes using scripts and JavaScript libraries.
When you disable those optimization plugins, you will notice that the class that indicates to the browser that they should lazy load images, videos and frames is missing.
If you can figure out what the problem is, you will have to add the class to all your images, videos, and Iframes.
Adding a class to these types of resources manually will take lots of time so you should better use a code snippet to add the class to all files, images and videos.
This code checks if the loading="lazy" attribute has already been added to the element before adding it again.
function add_lazy_loading_to_images_iframes_and_videos($content) {
// Check if the content contains any img, iframe, or video elements
if (preg_match_all('/<(img|iframe|video)\b[^>]*>/i', $content, $matches)) {
foreach ($matches[0] as $match) {
// Check if the element already has the loading="lazy" attribute
if (!preg_match('/\sloading="lazy"/i', $match)) {
// Add the loading="lazy" attribute to the element
$lazy_loading_element = preg_replace('/<(img|iframe|video)\b/i', '<$1 loading="lazy"', $match);
$content = str_replace($match, $lazy_loading_element, $content);
}
}
}
return $content;
}
add_filter('the_content', 'add_lazy_loading_to_images_iframes_and_videos');This function uses the preg_match() function to check if the loading="lazy" attribute has already been added to the element. If it has not been added, the attribute is added using the preg_replace() function.
The loading="lazy" attribute added by the previous code is not permanent and will only be applied to the element when the page is loaded or refreshed.
When the page is loaded or refreshed, the function will search for img, iframe, and video elements in the content and add the loading="lazy" attribute to each element that does not already have it.
The code doesn’t make permanent changes to your site elements.
Run your own Tests
There are other plugins for lazy loading images, iframes and videos but they need more than one script or they have way too many options.
I wanna keep things as lightweight as possible. The fewer scripts my sites needs, the better.
Test and test some more. I can’t tell you what works for you. All sites are different.
