Difference between revisions of "X-Cart:CSS and JavaScript optimization"

From X-Cart 4 Classic
Jump to: navigation, search
Line 1: Line 1:
−
To optimize operations with CSS and JavaScript, we have added new Smart tags - 'load_defer' and 'load_defer_code'. Both these tags handle the operations of assembling and displaying of code for JavaScript and CSS:
+
== General info ==
  
−
* <tt>load_defer</tt> - assembles code
+
To optimize operations with CSS and JavaScript, we have added new Smarty tags:
−
* <tt>load_defer_code</tt> - displays code.
 
  
−
The logic of the tags depends on the store configuration variables: [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for CSS]] and [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for Javascript]].
+
* <tt>load_defer</tt>
 +
* <tt>load_defer_code</tt>
  
−
If these variables are disabled, load_defer displays the entered code immediately and load_defer_code doesn't do anything.
+
Both these tags handle the operations of assembling and displaying of code for JavaScript and CSS. The logic of the tags depends on the store configuration variables:
 +
* [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for CSS]]
 +
* [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for Javascript]]
 +
 
 +
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 two ways:
 
Code can be assembled two ways:
Line 30: Line 38:
 
</pre>
 
</pre>
  
−
<tt>'load_defer'</tt> – accumulates code of a certain type in the global stream for the optimizer.
+
== CSS code optimization ==
  
−
<tt>'load_defer_code'</tt> – registers accumulated code of a certain type with optimizer, connects the entry point of an optimizer with a registered identifier by the place in the code and clears the global stream for this type.
+
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.
  
−
Script – optimizer’s point of entry to its own queue – selects code for this type and this identifier – checks its relevance (if necessary, rebuilds code cache) and returns the code as an external file (with the respective headers).
+
That is why <tt>/skin/common_files/customer/service_head.tpl</tt> includes the {load_defer_code type="css"} tag, and the entire CSS is included earlier, in <tt>{include file="/skin/common_files/customer/service_css.tpl"}</tt>.
−
 
 
−
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 <tt>/skin/common_files/customer/service_head.tpl</tt> includes the {load_defer_code type="css"} tag, and the entire CSS is included earlier, in <tt>{include file="/skin/common_files/customer/service_css.tpl"}</tt>. For example:
+
For example:
  
 
/skin/common_files/customer/service_head.tpl
 
/skin/common_files/customer/service_head.tpl
Line 51: Line 57:
 
{load_defer file="lib/cluetip/jquery.cluetip.css" type="css"}
 
{load_defer file="lib/cluetip/jquery.cluetip.css" type="css"}
 
</pre>
 
</pre>
 +
 +
It is also recommended to use relative paths in such construction as shown below:
 +
 +
<pre>
 +
url(path_to_css)
 +
</pre>
 +
 +
Besides, make sure to have no spaces in the <tt>path_to_css</tt> parameter.
 +
 +
== JS code optimization ==
  
 
Regarding JavaScript, assembling and registering JavaScript code goes in two stages:
 
Regarding JavaScript, assembling and registering JavaScript code goes in two stages:
  
−
* Immediately before the <tt></body></tt> tag.
+
# Immediately before the <tt></body></tt> tag.
−
* Before the <tt><body></tt> tag (specifically, between the <head> and </head> tags).
+
# Before the <tt><body></tt> tag (specifically, between the <head> and </head> tags).
  
 
In the first case, the {load_defer_code type="js"} tag is included into <tt>/skin/common_files/customer/home.tpl</tt>, and all the JS is included earlier in other files. For example:
 
In the first case, the {load_defer_code type="js"} tag is included into <tt>/skin/common_files/customer/home.tpl</tt>, and all the JS is included earlier in other files. For example:
Line 94: Line 110:
 
Besides that, with the current functionality, it is not always possible to use the 'load_defer' tags, so sometimes JavaScript code is included directly.
 
Besides that, with the current functionality, it is not always possible to use the 'load_defer' tags, so sometimes JavaScript code is included directly.
  
−
'''<tt>queue</tt> parameter'''
+
== "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.
 
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.
Line 103: Line 119:
 
</pre>
 
</pre>
  
−
When using the
+
== Caching for buy_now.tpl and other templates ==
−
<pre>
 
−
url(path_to_css)
 
−
</pre>
 
−
construction in your CSS, use relative paths in it. And make sure to have no spaces in the <tt>path_to_css</tt> parameter.
 
  
 
{{XC 4.4}}
 
{{XC 4.4}}
Line 126: Line 138:
 
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 <tt>/var/cache</tt> 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.
 
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 <tt>/var/cache</tt> 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.
  
 +
[[Category:X-Cart user manual]]
 +
[[Category:X-Cart developer guide]]
 +
[[Category:X-Cart user manual]]
 +
[[Category:X-Cart developer guide]]
 
[[Category:X-Cart user manual]]
 
[[Category:X-Cart user manual]]
 
[[Category:X-Cart developer guide]]
 
[[Category:X-Cart developer guide]]
Line 131: Line 147:
 
[[Category:X-Cart developer guide]]
 
[[Category:X-Cart developer guide]]
  
 +
[[Category:X-Cart user manual]]
 +
[[Category:X-Cart developer guide]]
 +
[[Category:X-Cart user manual]]
 +
[[Category:X-Cart developer guide]]
 
[[Category:X-Cart user manual]]
 
[[Category:X-Cart user manual]]
 
[[Category:X-Cart developer guide]]
 
[[Category:X-Cart developer guide]]
 
[[Category:X-Cart user manual]]
 
[[Category:X-Cart user manual]]
 
[[Category:X-Cart developer guide]]
 
[[Category:X-Cart developer guide]]

Revision as of 13:49, 21 November 2011

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 displaying 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 two ways:

  1. Contained in an external file.
  2. 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:

  1. Immediately before the </body> tag.
  2. 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
{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

X-Cart 4.4or above

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.

Retrieved from "https://help.x-cart.com/index.php?title=X-Cart:CSS_and_JavaScript_optimization&oldid=6929"