AjaxSwatches Extension
Here’s the problem. The Magento 1.9.1.0 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.
To compare, after loading the default bags category (in 8 seconds), filtering down to the color black results in another total load time of 6.47 seconds:
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: