What is Lazy Loading?
While some tech terms can be confusing, lazy loading does exactly what it says. Lazy loading is a technique in web development that delays loading an element or resource until it is needed by the user.
How does Lazy Loading images affect SEO rankings?
If you let your images load later than the more-important resources on your page, it can speed up your overall performance and make a difference in how your site is perceived by users, and therefore how it is prioritized in Search Engine Results.
- Google relies heavily on image information when ranking a website, that’s why it’s a factor in the Core Web Vitals.
- Both Largest Content Paintful (LCP) and Cumulative Layout Shift (CLS) are important measures of a webpage’s speed.
- Googlebots can still read images that are lazy-loaded, so don’t worry about a spot holder that users won’t see – instead, focus on good-quality images, optimized files, and descriptive alt tags.
How to enable lazy loading images in WordPress
Lazy loading resources became a web standard in 2020, and today lazy loading in WordPress has become a critical part of technical SEO, image optimization, and accessibility best practice. As of WordPress 5.5 Lazy Loading is default on all <img> tags. That means that WordPress will automatically add loading=”lazy” to all <img> tags that have a set width and height attribute.
How to test if your WordPress theme supports lazy loading
If you’re using a popular custom theme, like Kadence, or a WordPress theme builder, your images likely already have a javascript-based lazy loading or browser-based lazy loading features built-in. Unfortunately not all themes are the same, so it’s a good idea to check your site for this UX performance tool.
You can use the Toolsaday checker for a quick way to analyze the images on a single page, or you can dig deeper into your browser and find out if they’re loading using the “Network” tab in your dev tools.
- In Google Chrome open chrome dev tools by using rt-click “Inspect” or use Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac)
- Select the “Network” tab at the top of the window
- Set the “No throttling” option
- Reload the page so all elements are displayed as they are loaded in real-time
- From here, you will be able to see that as you scroll down the page, more resources – and specifically images – will begin to load in the list.
If your page has finished loading and you scroll down the page but no more images appear in the list, then your images are loading before the rest of the content and lazy loading is not active for your images.
Adding lazy loading to your custom WordPress theme
Most of the modern browsers support lazy loading by default, so when you’re building a theme you can enhance the end-user experience and the usability of your product by potential buyers just by adding the lazy-load property yourself.
Whether you’re creating a parent or child theme, building support for image lazy load is an easy way to boost your tool. Make sure your <img> tag supports the loading, width, and height attributes and you’re one step ahead of the lazy developer.
<img src=”https://picsum.photos/800” width=”400px” height=”300px” loading=”lazy”>The good news is, lazy loading attributes degrade gracefully. If a browser doesn’t support lazy-loading, it doesn’t impact the way your image loads on a page, and it doesn’t break your website.
When to disable lazy loading images on your website
While lazy loading images is good for website performance, it can actually hurt in a couple of cases:
- Don’t lazy load images that are “above the fold” or present on page load. These should be visible right away and hiding them can cause an increase in your LCP.
- When you add the “loading” attribute to your images but it is not used with the width and height attribute, it can cause a shift in content as the image is rendered. This will create a Cumulative Layout Shift and negatively impact your site speed scores.
How to disable lazy loading in a WordPress theme:
If your site is loading images in the initial viewport, or if you aren’t employing all of the requirements of the lazy-load setup, you might consider disabling lazy loading on your website. To stop lazy loading images on a WordPress site, you can add this script to your functions.php file:
/* disable WordPress auto-adding Lazy Loading to all image tags */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Klaxon Themes Cloud Library patterns all support lazy loading
All of the Klaxon Theme patterns support lazy loading by default. The Klaxon Blox custom blocks for Gutenberg all support the default WP system for loading images, and where necessary offer browser support for lazy loading directly on <img> tags.
If you’re ready for fast-loading, SEO-friendly website tools that help you build WordPress sites faster, explore the Klaxon Themes Cloud Library.