X-Cart:CSS and JavaScript optimization
Contents
General info
To optimize operations with CSS and JavaScript, we have added new Smarty tags:
- load_defer
- load_defer_code
Both these tags handle the operations of assembling and outputting of code for JavaScript and CSS. The logic of the tags depends on the store configuration variables:
If these variables are disabled, 'load_defer' outputs the code defined in templates immediately, and 'load_defer_code' doesn't do anything.
If these variables are enabled, 'load_defer' assembles entered code to a single JS or CSS file, then 'load_defer_code' outputs the assembled code (by including the corresponding JS and CSS files to the page source).
Assembling JS and CSS code
Code can be assembled in two ways:
- Contained in an external file.
- Entered directly in a template.
In the first case, you pass the 'file' parameter, which is the path from the skin to the file (JavaScript or CSS). For example:
{load_defer file="js/popup_open.js" type="js"}
In the second case, you pass the 'direct_info' parameter, which contains the code to be passed to the optimizer. For example:
{capture name=admin_preview_js}
var txt_this_form_is_for_demo_purposes = '{$lng.txt_this_form_is_for_demo_purposes|wm_remove|escape:javascript}';
var txt_this_link_is_for_demo_purposes = '{$lng.txt_this_link_is_for_demo_purposes|wm_remove|escape:javascript}';
{/capture}
{load_defer file="admin_preview_js" direct_info=$smarty.capture.admin_preview_js type="js"}
CSS code optimization
CSS is considered optimal when it is entirely declared and called prior to the <body> tag (specifically, between the <head> and </head> tags). Another recommendation is to keep it all in a single file. If these are observed, the style is not going to be rebuilt while loading DOM and the styles if they are specified below.
That is why /skin/common_files/customer/service_head.tpl includes the {load_defer_code type="css"} tag, and the entire CSS is included earlier, in {include file="/skin/common_files/customer/service_css.tpl"}.
For example:
/skin/common_files/customer/service_head.tpl
{include file="customer/service_css.tpl"}
... skipped code ...
{load_defer_code type="css"}
/skin/common_files/customer/service_css.tpl
{load_defer file="lib/cluetip/jquery.cluetip.css" type="css"}
It is also recommended to use relative paths in such construction as shown below:
url(path_to_css)
Besides, make sure to have no spaces in the path_to_css parameter.
JS code optimization
Regarding JavaScript, assembling and registering JavaScript code goes in two stages:
- Immediately before the </body> tag.
- Before the <body> tag (specifically, between the <head> and </head> tags).
In the first case, the {load_defer_code type="js"} tag is included into /skin/common_files/customer/home.tpl, and all the JS is included earlier in other files. For example:
/skin/common_files/customer/home.tpl
{include file="customer/content.tpl"}
... skipped code ...
{load_defer_code type="js"}
/skin/common_files/customer/content.tpl =>
- /skin/common_files/customer/right_bar.tpl =>
- /skin/common_files/customer/menu_cart.tpl =>
- /skin/common_files/customer/ajax.minicart.tpl
- /skin/common_files/customer/menu_cart.tpl =>
{load_defer file="js/ajax.minicart.js" type="js"}
In the second case, {load_defer_code type="js"} tag is included in /skin/common_files/customer/service_head.tpl, and all the JS is included earlier in /skin/common_files/customer/service_js.tpl"}. For example:
/skin/common_files/customer/service_js.tpl
{load_defer file="js/common.js" type="js"}
/skin/common_files/customer/service_head.tpl
{include file="customer/service_js.tpl"}
... skipped code ...
{load_defer_code type="js"}
It is highly recommended to place JavaScript code at the bottom, i.e. right above the </body> tag. In this case, the code will be loaded and executed after the browser has built the DOM.
Much of X-Cart functionality does not take this into account and place JavaScript code before the <body> tag, thus making JavaScript code run while the page is being loaded.
Besides that, with the current functionality, it is not always possible to use the 'load_defer' tags, so sometimes JavaScript code is included directly.
"queue" parameter
To improve the flexibility and define a code execution order, we are introducing the "queue" parameter for the load_defer tag (set to 0 by default), which determines the order for the execution of code within a resulting code given by optimizer.
For example, the code in /skin/common_files/onload_js.tpl
{load_defer file="onload_js" direct_info=$smarty.capture.onload_js type="js" queue="1"}
Caching for buy_now.tpl and other templates
When working on the design, you can disable caching for buy_now.tpl and other templates. Since version 4.4.3, you can do that by adjusting the 'Use cached buy_now.tpl template calls' option. In version 4.4.2, you can disable caching for buy_now.tpl by manually replacing
$smarty->caching = 2;
with $smarty->caching = 0; in /include/templater/plugins/function.include_cache.php. The older versions do not use template caching.
Also, when working on the design, you may want to turn off the 'Do not check if templates are changed (Smarty compile_check)' option. This is applicable to versions 4.4.2 and newer.
You can force rebuilding the target files by removing all the /var/cache/*.css and /var/cache/*.js files (versions 4.4.2 and newer).
To ensure the correct operation of CSS/JS optimizers, make sure that the CSS and JS files are available for reading and writing in the /var/cache directory (according to the rules set in the default /var/.htacess and var/cache/.htaccess). This also applies to versions 4.4.2 and newer.
