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
$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 !
$js = '
//<![CDATA[
....
//]]>
';
$group->display .= '<script language="javascript">'.$js.'</script>';
And voilà !