Our components are initialized in an asynchronous manner, which means that the page load is never stopped to wait for our servers' response. We send a request to our servers on the page load and allow the other parts of the page to continue loading. Also, when our server sends the response (i.e. Recommendation boxes' contents) back, we just fill in the boxes.
Once we add recommendation boxes to the page, we instruct the browser to only download images for any recommendation boxes that are immediately visible to the user. As the user scrolls further down the page and new recommendations appear, the browser makes new requests to download images for those products. This is to minimize the amount of traffic used to download images that the user may never scroll to view. By reducing the number of initial requests for images and deferring downloads, we reduce the initial size of the page which keeps the page speed high.
Like any content added to your website, recommendation boxes could affect your SEO if not done properly. There are mainly 2 ways that new content could impact your SEO:
The speed of page load
The amount of bandwidth that is used to download the additional content. Note the mobile-friendliness of the content as well.
With these kept in mind, we always make the best effort to minimize the impact by addressing the above in the following ways:
We set "alt" and "title" on all product images that we add.
If an image link is broken for any reason, we replace it with a placeholder so there's no broken image.
Our recommendation boxes are responsive and mobile-friendly. They support hand gestures when viewed on mobile and you can specify different sizes for product images when viewed on mobile.
For each recommendation box that is paginated, we only request the images for the other pages when the users scroll through the boxes. This reduces the network traffic to make the page load faster and use less bandwidth.
The image sizes in the recommendation boxes do NOT affect page load speed because our app uses HTML5's "srcset". This technique gives the browsers a list of different sizes for each image. The browser looks at the list and only downloads the smallest size that is best suited for the user's device. This will not cause the browser to download all those image sizes in the srcset.
Our add-to-cart quick action button is by default on 'Hover' and defers loading the product information (ie. product variants) to only when the user hovers on a particular product in the recommendation box. This keeps the number of requests to servers as low as possible.
When you enable the Review apps or Loyalty apps to show in the recommendation boxes, we make as much effort as possible to batch the calls to obtain the information to keep the page fast and traffic low.
Lastly, if you enable features such as showing secondary images on hover, we only request the secondary image after the user hovers on a product to keep the page fast and light.
Please be aware that our tech team is consistently monitoring the load time of our components and frequently performs optimization updates.