What is lazy loading images?
Lazy loading images means that images on a web page are not loaded until they become visible in the user's viewport. This is done by adding a small script to the page that checks when each image becomes visible as the user scrolls down the page.
The actual image files are replaced with small placeholder or blank images in the HTML code. Once the user has scrolled down and the image is just about to become visible, the script loads the full image file from the server.
Why should you use lazy loading?
There are two main benefits of lazy loading images on your website:
- Improves page load speed - Images can account for 60-65% of a web page's total size. Lazy loading prevents dozens or hundreds of images from slowing down the initial page load.
- Saves bandwidth - Lazily loaded images are only requested from the server when needed, reducing unnecessary bandwidth usage.
Both of these lead to a faster, more optimized user experience.
How does lazy loading work?
Lazy loading works by running a script on each page that checks when an image appears in the user's viewport as they scroll.
- The
<img>element is given aloading="lazy"attribute. - The true image source is specified in a
data-srcattribute instead ofsrc. - A small placeholder image is shown using the
srcattribute.
When the image is scrolled near, the script sets the src to the data-src to load the full image file.
What are the browser requirements for lazy loading?
Native lazy loading is supported in:
- Chrome 76+
- Firefox 75+
- Safari 13.1+
For full cross-browser support, a JavaScript lazy loading library can be used like Lazysizes or Lozad.js.
How do you implement lazy loading in WordPress?
There are a few ways to lazy load images in WordPress:
- Using a plugin like EWWW Image Optimizer, Lazy Load by WP Rocket, or SG Optimizer. These handle lazy loading automatically.
- Adding
loading="lazy"to your theme's<img>tags. You'll need to also add adata-srcattribute with the full image URL. - Using a JavaScript library like Lazysizes and calling the script in your theme.
- For embedded videos, use a plugin like Lazy Load for Videos.
What are the downsides to lazy loading images?
A few potential downsides include:
- Sudden loading of images may briefly alter page layout and be jarring.
- Lazy loading libraries add a bit more weight to the page.
- Users quickly scrolling may notice images visibly loading in.
- SEO crawler bots may not process lazily loaded images.
Proper implementation can avoid most of these drawbacks.
Does lazy loading work for mobile?
Yes, lazy loading can improve mobile site speed and data savings. The same loading="lazy" attribute and JavaScript works for mobile browsers.
Reduced image loading is especially impactful on mobile due to slower connections and data costs. Testing is key to ensure a smooth loading experience.
What types of images should you not lazy load?
Avoid lazy loading images above the fold or critical to the user experience, like:
- Your logo
- Hero images
- Featured product images
- Any image in the initial viewport
Ideally, users shouldn't notice or be impacted by lazy loading. Load critical images normally while leveraging lazy loading lower down the page.
Conclusion
Lazy loading defers offscreen image loading until users scroll near them. This technique can significantly improve page speed and mobile experience.
When properly implemented, lazy loading provides a smoother, more optimized browsing experience. Be mindful of critical above-the-fold images that should be loaded normally.
