How to Add loading=”lazy” to Images in WordPress

Enhance Your WordPress Site with Lazy Loading

In today’s fast-paced digital world, website performance is crucial. One effective way to improve your site’s loading speed is by implementing lazy loading for images. This technique ensures that images are loaded only when they are about to enter the viewport, thus reducing the initial load time and saving bandwidth. In this blog post, we will explore how to add the loading=”lazy” attribute to images in WordPress, utilizing various methods to cater to different needs and preferences.

Why Use Lazy Loading?

1. Lazy loading can significantly enhance user experience by:
2. Reducing initial page load time
3. Saving bandwidth for users
4. Improving SEO rankings as search engines prioritize faster-loading sites

Methods to Add loading=”lazy” in WordPress

1. Using functions.php

One way to add lazy loading to images is by editing your theme’s functions.php file. This method automatically applies the loading=”lazy” attribute to all images in your content.

Steps: Access functions.php:
1. Go to your WordPress dashboard.
2. Navigate to Appearance > Theme Editor.
3. Open the functions.php file.
4. Add the Lazy Loading Filter:

Insert the following code snippet into the functions.php file:

function add_lazy_loading_to_images($content) {
if (is_feed() || is_preview()) {
return $content;
}
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
return $content;
}
if (false !== strpos($content, 'loading="lazy"')) {
return $content;
}
$content = preg_replace('/<img(.*?)\/?>/', '', $content);
return $content;
}
add_filter('the_content', 'add_lazy_loading_to_images');

Save Changes: Save the functions.php file to apply the changes.
This code uses a regular expression to find all tags and adds the loading=”lazy” attribute to them.

2. Using a Plugin

For those who prefer not to edit code, several plugins can automatically add lazy loading to your images.

Steps: Install a Lazy Load Plugin:
1. Navigate to Plugins > Add New in your WordPress dashboard.
2. Search for "Lazy Load" and choose a plugin such as "Lazy Load by WP Rocket" or "a3 Lazy Load".
3. Install and activate the plugin.
4. Configure the Plugin:

Go to the plugin settings page, usually found under Settings or directly in the Plugins menu.
Adjust the settings according to your needs. Most plugins will automatically add loading=”lazy” to images.

Complete Web & Mobile Designer: UI/UX, Figma, +more
Become a UX/UI Designer! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS

3. Gutenberg Editor (Block Editor)

If you’re using the Gutenberg editor, you can manually add the loading=”lazy” attribute to individual image blocks.

Steps: Edit Your Post/Page:
1. Open the post or page you want to edit.
2. Select the Image Block:
3. Click on the image block to select it.
4. Add the Attribute: In the block settings on the right-hand side, find the "Advanced" section.
Manually add the loading="lazy" attribute to the image HTML.

4. Editing Theme Template Files

For those comfortable with code, adding the loading=”lazy” attribute directly in your theme template files is another option.

Steps: Access the Template File:
1. Go to Appearance > Theme Editor and open the template file where your images are output (e.g., single.php, page.php).
2. Add the Attribute: Locate the image tags and add the loading="lazy" attribute manually. For example:
<img src="<?php echo get_the_post_thumbnail_url(); ?>" loading="lazy" alt="<?php the_title(); ?>">
3. Save Changes: Save the template file to apply the changes.

Mastering WordPress Cache Clearing
Expert Techniques to Boost Your Site’s Speed with WordPress Cache Clearing. A Step-by-Step Guide to Streamlining Performance and Enhancing User Experience.

Bottom Line:

Implementing lazy loading for images in WordPress is a straightforward process that can significantly improve your site’s performance and user experience. Whether you prefer editing the functions.php file, using a plugin, adjusting settings in the Gutenberg editor, or modifying theme templates, there’s a method to suit every comfort level. By following these steps, you’ll ensure your images load efficiently, enhancing both speed and SEO for your website.

If you enjoy this article or find it helpful. Please like, comment, and share this post.