Performance inprovement with Stockable plugin

[DayCounts]

I found a pretty interesting improvement fix with intensive usage of the stockable plugin.

Here is the situation:

• 100 T-Shirt products and each of them implement the stockable variant plugin
• all 5 stockable options are used: gender(Male,Female), color(White, Black, Blue, Green, Red, Camo), size(XXS, XS, S, M, L, XL, 2XL), collar(normal, v-neck), sleeves(no-sleeve, short sleeves, long sleeves)
• all option combinations are possible
• each product has 4 related products

Stockable plugin generates javascript code with an array of all child options plus some item specific functions when plgVmOnDisplayProductVariantFE function is called
Considering the above situation, the array of child products would contain 504 items (combination of options is 2*6*7*2*3=504)
I'll save you some calculation but that javascript footprint can easily reach 100ko per product.

• On a category page with 20 products per page, that's 2Mo of useless javascript code.
• Change the page size in category page to display all, that makes it 10Mo
• On a product page, only the main product associated code is needed, the code corresponding to the 4 related products is useless too, that counts for 400ko

On a product page

The issue:
The plugin return html in a variable for later use but the javascript is systematically added to DOM when the plugin function is triggered

Code Select Expand


$document = JFactory::getDocument();
$document->addScriptDeclaration('
//<![CDATA[
....
//]]>
');


The quick fix:
Adding the javascript inline to the returned html and not adding it to JDocument ensure the script is available only when actually needed !

Code Select Expand


$js = '
//<![CDATA[
....
//]]>
';
$group->display .= '<script language="javascript">'.$js.'</script>';


And voilà !