Solve the Testing Challenges of Lazy Loading

A slow website is a major turn-off for potential customers. To address this, one technique is to load resources only once they are needed on a website, hence the term “lazy loading”.

Asynchronous, or lazy loading, is a technique where content below the viewport (like images, videos, text, and other objects) is either:

• Not loaded from the server until the user scrolls down.
• Doesn’t load until the user triggers an animation by scrolling.

This makes your website more efficient and increases your bandwidth, allowing you to deliver a faster and better user experience.

Benefits of Lazy Loading

When your website or application loads slowly, it costs you customers.

Portent points out that for each page load, one additional second of load time has a significant impact on your conversion rates. For e-commerce sites, they report that there is a 2.5X jump in conversions when going from a 5sec to a 1sec load time.

Beyond conversion rates, lazy loading can have many other benefits. HubSpot notes the following:

• It can help your SEO (Search Engine Optimization) – Page speed is one of many factors that contribute to your search page ranking.
• It reduces server load – By only loading a portion of a webpage per visit, you save on data usage.
• It saves energy – All that reduced data usage also means your servers are putting out less heat.

Lazy loading, therefore, is an essential design pattern to build into your code. Not only does it help you retain customers, but it boosts your performance and saves you money!

Lazy Loading is Hard to Test

For all the benefits lazy loading offers your organization, there is one challenge to overcome – it can be hard to test. In your test automation script, you check to ensure the important features of your UI have loaded and function properly. But when your site is lazy loaded, those important features don’t load until you scroll, and your automation script is only able to capture what is in the current viewport.

So how do teams typically respond? If you are working on an in-house solution, you are left with a few options:

• Manually test your UI.
• Have multiple scripts.
• Add additional code that scrolls your site automatically for you.

While these methods do offer a means to fully test your lazy loaded site, they will also impact a few aspects of your work:

• Delivery Time – The additional work required to effectively test your site cuts into the efficiency you originally introduced with automation.
• Test Quality – Whether you are checking manually, running multiple tests, or even creating your code to scroll, you are subjecting your script to more human error.
• Quality of Work-Life – And of course, test automation is supposed to help your teams be more efficient. Lazy loaded sites disrupt your ability to fully automate and can cause your teams to spend more time troubleshooting than they’d like.

Ultimately, in-house solutions can help you to sufficiently test your site, but they leave you with extra gaps and reduce your test quality. Fortunately, there is another solution: VisualTest.

How VisualTest Solves the Problem For You

The biggest reason lazy loaded sites are hard to test is because the content doesn’t load until you scroll. As such, one of the most common in-house solutions is to write in additional code that scrolls on your behalf before you take a screenshot.

The problem with this though is there are multiple methodologies for how to do so, and they still might not catch everything. Say, for instance, a visual component takes 3 seconds longer than usual to load – you could end up scrolling to the bottom and back without that element ever having loaded. So, when you take a screenshot, your typical script might not recognize any failure, because it doesn’t recognize any element to test in the first place!

This is where VisualTest comes in. VisualTest will scroll your complete site and return to the top before taking a screenshot. Then the AI algorithm works to find visual regressions that need addressing, all without having to write an ounce of extra code. Simply add a single configurable VisualTest snippet to your existing script, and you can automatically review your lazy loaded site with greater confidence.

See an example here:

visualTest.capture('Home Page', {'lazyload': 1000}) # number is milliseconds between scrolls

Lazy loading is a great approach to enhancing the performance of your website but can miss artifacts in your screenshots, thereby reducing the effectiveness of visual regression tests. When you pursue manual or in-house options, you risk the quality of your tests and will spend more time on them than you might like.

Instead of putting in extra work to run your tests, use VisualTest! VisualTest can be added to your existing script in just a few clicks. Start a free trial today and see how easy it is to take your tests further.