Here’s the problem. The Magento 22.214.171.124 swatchlists on the product list pages (categories) are slow. Really slow.
A use-case: 30 products with a total of 145 child-products takes a whooping 7.92 seconds, compared to a page-load of 0.989 seconds with the swatches disabled.
This is with the caches enabled, but on a first request.
Also, results are recalculated when reloading the page with an active color-filter or when switching between list and grid-view.
Here’s the page with swatches disabled (Time to first byte: 989ms):
Here’s with default swatches enabled (Time to first byte: 7.92s):
Now here’s the fix: AjaxSwatches offloads the swatches to an ajax-request by sending all the product-ids from the page to an ajax-controller. The controller creates a cached-block for the generated html and one for the json-data. Because each and every product has it’s own cache-block the product is cached for each and every product-list you visit. Change a filter? Switch between grid and list? All products are already cached! Even if you switch between categories that contain (part of) the same products.
Here’s the result for the example-page above, again with the caches flushed before rendering (Time to first byte: 916ms):
So page-load has been reduced from ~ 8 seconds to 1 second. The swatches are delayed 1 second. The DomContentLoad time went down from 8.47 seconds to 1.43 seconds!
Cache impact on all product-lists containing same products:
And all products loaded in this view are cached for every other view where they are listed.
When using the ajaxSwatches after the first load of the bags category and applying the color filter it’s reduced to 1.59 seconds total load time: