Website performance is crucial in delivering a seamless user experience, especially for eCommerce platforms like SuiteCommerce Advanced (SCA). With online shoppers expecting faster load times and easy navigation options, businesses should ensure their website loads efficiently to retain visitors and boost conversions.

The Lazy Loading technique can greatly improve SuiteCommerce Advanced website performance. This blog can explore how to apply the technique to your SuiteCommerce Advanced website and provide a technical overview for developers looking to implement this feature.

What is Lazy Loading?

Lazy loading is a strategy for identifying resources as non-blocking (non-critical) and loading them only when needed. It shortens the length of the critical rendering path, which translates into reduced page load times.

Lazy loading can occur at different moments in the application, but it typically happens during some user interactions such as scrolling and navigation.

Why should we use Lazy Loading?

• Load pages faster: Images, videos, or frames that are not immediately visible won’t be loaded until the user scrolls to them, reducing initial load time.

• Save bandwidth: Only necessary elements are loaded, reducing the overall bandwidth consumed.

• Improve SEO: Faster page load speeds contribute to better search engine rankings, which can increase visibility and traffic to your site.

• Elevate user experience: A fast-loading website translates to better customer retention and higher engagement rates.

Steps to Implement Lazy Loading in SuiteCommerce Advanced:

Applying Lazy Loading to SCA involves both front-end adjustments and possible template customizations. Here is the step-by-step guide to implementing Lazy Loading on images in SCA.

1. Modify SuiteCommerce HTML template for Lazy images

The first step to integrating Lazy Loading in SuiteCommerce Advanced is to modify images to have a class name as “lazy”. Along with this class name, we also need to add the “data-src” attribute with the actual image URL.

2. Prepare JavaScript callback to support Lazy Loading using intersection observer

The second step is to write a JavaScript method to monitor these images and load them only when they are visible in the viewport.

This method uses a native intersection observer to find out the images being requested to show in the device viewport and load them.

3. Invoke the JavaScript callback on load 

The third step is to invoke this method, we have invoked this on the mountToApp method in SuiteCommerce Advanced which is the default entry point of any module.

Applying the Lazy Loading technique in SuiteCommerce Advanced can significantly boost website performance, improving both user experience and SEO. By implementing Lazy Loading you can ensure that your eCommerce site is optimized for speed, which will ultimately lead to better engagement and higher conversions.

We Value your Collaboration with Us

Start implementing the Lazy Loading technique today by partnering with the most trusted, reputed, and reliable NetSuite eCommerce service provider who believes in providing “Get It Right” services. A certified team of NetSuite experts should be able to help guide you through the process and answer your questions.

Please Contact Us to discuss how the GIR team can help to build or improve the eCommerce website for your business.