Native lazy loading is great for site performance because it doesn’t rely on inline Javascript code 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 a resource 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.
Since I am not a coder, I turned into an AI tool so it could generate code snippets that add the class attribute to all my images, videos, and Iframes.
Table of Contents
How to Add a Class to Images, Videos, and Iframes
I add code like the ones provided here using code snippet plugins such as:
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.
Results
I have used the code in several websites and now my site images, videos, and Iframes are being lazy loaded.
My sites haven’t experienced any issues.
Having said that, I recommend making a copy of your site using All-in-One WP Migration, restoring the copy in a local environment, and testing the code.
Once you know for certain that the code works, you can add it to the functions.php file using a code snippet plugin, a child theme, or a custom plugin.
More Code Snippets for WordPress
You might want to check some of these posts before you leave:
- How To Remove the Category From the WordPress URL
- How to Delay The Execution of JavaScript without a plugin
- How to Create a Table of Content without a Plugin
- How to Disable Heartbeat in WordPress
- How to Disable Rest API and Rest API Links
- How to Disable Comments in WordPress
- How to Disable RSS Feeds and RSS Feed Links in WordPress