For an online business, website performance is a make or break factor. So how does your website stack up? If you’re looking to improve your website performance, lazy loading is a great solution for improving both load times and website performance.
Lazy loading is a method that delays the downloading of certain elements (like images or videos) on a webpage until those elements are needed. By delaying resources until they are needed, such as not loading an image till the viewer reaches its location on a page, website performance is improved. This is different to eager loading, which loads all assets on the page at once. (insider-gaming.com)
This article will explain how to implement lazy loading manually and we’ll recommend the best tools to support its implementation. Once you’ve read our guide to lazy loading, you will be able to easily implement it and boost your website performance.
How Lazy Loading Impacts your Website’s Performance
Slow loading websites can be a serious problem. Your website speed affects user experience, as visitors will often leave a site that doesn’t load quickly. This, in turn, impacts your bounce rate, conversion rate and your SEO ranking. Portent explores page load times, saying that an optimum page load is between 0 and 4 seconds, but ecommerce sites that load within 1 second can convert up to 2.5 times more customers.
A common cause of slow loading is having a lot of images or videos to load when initializing. But very large images, or self-hosted videos, can still delay page load times even more. Yet there are a variety of sites that depend on media to be successful, especially photography and ecommerce websites.
There are a number of solutions that can help address this problem, such as image optimization or using a CDN (Content Delivery Network). But lazy loading remains one of the simplest solutions to speed up website performance. This is because loading only essential elements on initial page load decreases the amount of data that needs to be loaded, which results in faster loading times the first time a page is loaded. Note that this is not literally speeding up loading, but strategically prioritizing which resources to initialize so that the necessary elements for the user appear faster.
Another important benefit of lazy loading is the impact it has on Core Web Vitals. As images are only loaded when entering the viewport, this shortens the time for the page to load, which can improve your Largest Contentful Paint (LCP) score. (You can use a tool like Search Console to track these metrics.)
Of course, this impact will depend on how lazy loading is implemented on your website and the search engine’s capabilities. Elvis Omondi from FooPlugins points out that “Lazy loading, when implemented strategically, can significantly enhance user experience by prioritizing content delivery. However, its impact on SEO depends on meticulous execution, ensuring crucial content remains accessible for search engine crawlers while optimizing page load times.”
Optimizing Mobile Websites with Lazy Loading
Considering the growing number of mobile users, it is particularly important to make a website mobile-friendly. In the first quarter of 2023, mobile traffic accounted for 58.3% of global website traffic. But according to Tooltester, mobile page load times are still considerably worse than those on desktop.
However, loading speed is particularly important on mobile devices, which may already struggle to load websites that don’t have a responsive design. Lazy loading can therefore drastically improve a mobile website’s performance as there is less bandwidth usage and data fetched.
When comparing a website with lazy loading to one without, you will see a notable difference to both performance and user experience on mobile devices. Taking all of this into account, it is easy to see why enabling lazy loading is essential – let’s look at some options for how to do this.
Methods for Implementing Lazy Loading on your Website
As you can see, lazy loading comes with a host of benefits, making it essential for any WordPress website. But it needs to be implemented correctly, so let’s look at the best practices for implementing lazy loading while keeping SEO in mind. There are two methods that we’ll look at today: manual implementation and using a plugin.
The Technical Process
If you want to manually implement lazy loading on your site then you can follow these technical steps from the backend to making it live. This process will require manual coding, using coding languages like JavaScript, HTML, and CSS.
- Access Theme Files: Open the WordPress theme directory and locate the relevant files, like header.php and functions.php.
- Include Lazy Loading Libraries: In the <head> section of the header.php file, include JavaScript libraries for lazy loading, such as jQuery and lazysizes. This could be achieved with:
<script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>Code language: HTML, XML (xml)- Edit Image Tags: Within theme files, update <img> tags by replacing the src attribute with data-src and adding the class lazyload:
<em><img data-src="your-image.jpg" class="lazyload" alt="Your Image Description"></em>Code language: HTML, XML (xml)- Configure Background Images: If your theme uses background images in CSS, modify the CSS accordingly, changing background-image to data-bg and providing a lazy-load placeholder:
<em>.your-element {
background-image: url('data:image/svg+xml,%3Csvg...'); /* Lazy-load placeholder */
data-bg="your-image.jpg";</em>Code language: JavaScript (javascript)To optimize the lazy loading you can also implement srcset for responsive Images in the functions.php file. This will ensure proper image sizes are loaded based on the device being used. You should also check that the sitemap is configured and submitted to search engines. This assists in proper indexing and ensures that lazy-loaded images are accounted for in search results. Adding srcset properties to your images and utilizing a sitemap both contribute to a positive impact on SEO and overall website efficiency.
There are various lazy loading techniques that you can use, but each has its benefits and drawbacks:
- On-Click Loading: This is user-initiated, but may lead to frustration for the user.
- On-Scroll Loading: This technique is automatic, but the loading of images may be delayed.
- On-Hover Loading: This provides a balance between user control and automation, but isn’t always mobile-friendly.
Manual implementation gives you full control over how your lazy loading is set up and can result in better performance and user experience. However, it requires technical knowledge and there is potential for errors. If you’re uncomfortable with coding or web development, you could consider working with a developer or expert to ensure that the desired result is achieved.
Plugins: An Easier Option for WordPress Users
Using WordPress plugins for lazy loading provides a simpler solution. It’s an easier, efficient, and less time-consuming method compared to manual implementation, while giving you the same (or better) results.
You can find some plugins that specifically function for lazy loading, such as Jetpack or Lazy loader. Jetpack is a plugin designed to boost the overall performance and speed of your website for a professional user experience. Lazy loader allows you to enable lazy loading on certain site elements. (There are also a number of image optimization plugins that you might want to consider adding to your site to improve performance even more.)
When looking for the right plugin, there are factors you want to consider, such as compatibility, ease of use, settings flexibility, and support and update frequency. A good plugin will be updated frequently and compatible with the latest version of WordPress (as well as other essential plugins). You want a plugin that is intuitive and easy to use, while still giving you a range of options for settings and customizations. And you should look for a plugin that offers decent support – especially if you’re paying for it.
Easily Implement Lazy Loading on Image and Video Galleries with FooGallery
One such plugin is FooGallery, a WordPress photo gallery plugin, that comes with lazy loading by default. This means that when adding image or video galleries to your site using FooGallery, you will not need to take any further steps to enable lazy loading. It simply works.
This allows you to easily customize your site with aesthetic galleries without worrying about negatively impacting your site’s performance. FooGallery’s lazy loading works through on-scroll gallery loading, ensuring that only images that are about to come into the viewport are loaded. Anything off-screen will only be loaded as the user scrolls to it. FooGallery goes a step further and preserves image quality while performing lazy load, so the visual impact of your site isn’t compromised.
Aside from the standard benefits of lazy loading, FooGallery ensures that the SEO impact of lazy loading will be positive. Let’s explain that a bit more – as files are downloaded on demand, search engines may not recognize them. This could actually have a negative impact on your SEO. FooGallery accommodates for this by integrating with a range of SEO plugins, including Yoast SEO and RankMath, which inserts all images into a sitemap automatically to make sure that Google knows about them. This then ensures that lazy loading will have a positive impact on your SEO.
FooGallery is a lightweight plugin, which means that it itself has a minimal negative impact on your site. It has comprehensive image optimization features to effectively display images on your website, including simple pagination which assists with page performance by limiting the number of images to be displayed. This is especially useful for extensive galleries. Plus, all of the gallery layouts in FooGallery, along with the built-in lightbox, are responsive, which can further help page speed times for mobile users.
Its paid plans, particularly PRO Expert and up, come with additional features that further increase performance, such as filtering and multi-level filtering – this lets users quickly filter galleries to find the images they want to see. Advanced Pagination, such as infinite scrolling further complements lazy loading by only loading images when they are scrolled to. Here’s an example:
All of this makes FooGallery a straightforward and effective solution to implementing lazy loading of images and videos on your site.
Take your Website Performance to the Next Level with Lazy Loading
Lazy loading is an effective way to improve the performance of your site, as it ensures elements are only loaded when they need to be. This results in improved site speed, better user engagement and a more mobile-friendly website.
This guide has set out both how to implement lazy loading manually and with the support of WordPress plugins for various use cases. However, we’ve seen that it can be difficult to implement relatively niche code like this, especially if you’re not a developer. A plugin can therefore be a much simpler solution.FooGallery allows you to add customizable photo galleries to your site, and comes with lazy loading enabled by default (no set up required).
If you are serious about improving your site’s performance, implementing lazy loading today is a must. You should definitely check out FooGallery as a great tool to enhance the addition of image and video galleries to your site while supporting high performance.