Lazy loading is a technique used to improve website performance by delaying the loading of images until they are needed. This can significantly reduce the initial page load time and improve the overall user experience. To enable lazy loading for images in WordPress, you can use the wp_lazy_loading_enabled filter hook.
Here’s an example code snippet that enables lazy loading for images in WordPress:
function wpsnippets_enable_lazy_loading( $enabled ) {
return true;
}
add_filter( 'wp_lazy_loading_enabled', 'wpsnippets_enable_lazy_loading' );
This code snippet adds a filter to the wp_lazy_loading_enabled hook and sets the value to true. This enables lazy loading for all images on your WordPress site.
You can place this code in your theme’s functions.php file or in a custom plugin. Once you’ve added the code, save the file and refresh your website to see the lazy loading in action.
Note: Lazy loading is supported in WordPress 5.5 and above. If you’re using an older version of WordPress, you may need to update it to take advantage of this feature.
By enabling lazy loading for images, you can improve the loading speed of your website, especially for pages with multiple images. This can lead to better user engagement and a more positive browsing experience.
Examples
Example 1: Enable Lazy Loading for Images using a Plugin
This use case demonstrates how to enable lazy loading for images on a WordPress site using a plugin. The code example shows how to use the “Lazy Load by WP Rocket” plugin to achieve this functionality.
// Install and activate the "Lazy Load by WP Rocket" plugin.
Explanation: To enable lazy loading for images, you can install and activate the “Lazy Load by WP Rocket” plugin. This plugin automatically replaces the image tags with a placeholder and loads the actual image only when it becomes visible in the viewport.
Example 2: Enable Lazy Loading for Images using JavaScript
This use case demonstrates how to enable lazy loading for images on a WordPress site using JavaScript. The code example shows how to use the loading attribute in the image tag to achieve lazy loading.
// Add the 'loading' attribute to the image tag.
echo '<img src="image.jpg" alt="Image" loading="lazy">';
Explanation: By adding the loading="lazy" attribute to the image tag, the browser will automatically lazy load the image. This attribute tells the browser to load the image only when it is about to come into view, improving the site’s performance.
Example 3: Enable Lazy Loading for Images using Custom PHP Function
This use case demonstrates how to enable lazy loading for images on a WordPress site using a custom PHP function. The code example shows how to modify the image tag using a custom function to add the necessary attributes for lazy loading.
// Custom PHP function to modify the image tag for lazy loading.
function wpsnippets_lazy_load_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
$lazy_load_html = str_replace('<img', '<img loading="lazy"', $html);
return $lazy_load_html;
}
add_filter('image_send_to_editor', 'wpsnippets_lazy_load_image', 10, 8);
Explanation: This custom PHP function hooks into the image_send_to_editor filter and modifies the image tag by adding the loading="lazy" attribute. By using this function, all images inserted into the editor will have lazy loading enabled, improving the site’s performance.