Issue when combining Javascript

[chris.tikkos@.....com]

Hi Stan,

We are using JCH Optimize for speed optimization of our website. We noted a conflict with OPC when we tried to combine Javascript files. More specifically, when the Javascript files are combined, the totals at the bottom (discount, tax, shipping, etc...) are not shown at all. We tried to exclude onepage.js from this process, but the problem remains. Any ideas? Which js file should we exclude?

Thanks,
Chris

[admin]

Hello Chris,
there are three levels of javascript in OPC:
- global variables are generated inside body tags and also code from some OPC extensions is generated here
- some templates are using their own javascript files to handle design and other issues related to a particular template
- OPC generally uses onepage.js

The problem with combining javascript files is that if any single part of javascript breaks in the single file such as inclusion of mootools from joomla and also from virtuemart twice leads to global malfunction of javascript. We've spent about hundred hours on creating our own cache extension for javascript but we gave it up as due to error complexity of this single file. Therefore much more prefered way is to use htaccess settings to access compressed static versions of individual javascript files (so no CPU is used) but keep them separated in individual files by php cache creator. This is not prefered for CSS as it does not break on any error as javascript does in all browsers, CSS can even combine images into a single file.

We believe that the problem is not in our javascript file, but it is in the inclusion of mootools libraries by more components. Please review your javascript error console with ctrl+shift+J in Firefox and let us know. If any of your functions is declared more than once in a single file it leads to complete malfunction of the file. After opting-out our javascript file from this cache handler, we strongly recommend to rebuilt the cache by deleting it.

Result: please send us your url (by email) and an image of your firefox error console.

Best Regards,
Stan

[chris.tikkos@.....com]

Hi Stan,

Thank you for email and info; it was indeed a mootools error. We managed to fix it by modifying our code to get mootools (and jquery) directly from google, now it works perfectly!

Regards,
Chris

[admin]

hello Chris,
as i've already built hundreds of sites, i don't recommend you to load the javascript from an external server such as google. The problem is that any javascript execution (such as windows.addEventHanler... or body code) will start only after all of the javascript in head section is loaded. For an external server such as google it might take up to 4 seconds on first non-cached (DNS) visit and will extremely slow down the first display of the page to up to 8 seconds. Depends on what are your caching needs:
- whether you want to lower CPU usage by sending static content (zipped or unzipped)
- whether you want to lower bandwidth: if your shared hosting has slow connection or your customer's have low bandwidths

Sometimes zipping content on highly visited site is not recommended because it can take so much CPU that it would be faster to send it with low bandwidth.

This is some insights into caching
- get a cache extension which can do page caching or static caching (with mod_rewrite -> i haven't seen a stable one yet see below). I am using joomla's page cache plugin which is modified according to my article: http://www.rupostel.com/joomla/hacks/speeding-up-virtuemart
- cache your pages, javascript, css on a fast disk such as RAMdisk by symlink of your cache dir to /dev/shm or similarly, but be carefull on the size and cleanup process. This will minize IO on disk which is especially good in shared enviroments.
- put your images and other static content which changes merely to a SSD disk with fast speed and low reliability

Depends on your hosting and your permissions you can use some of these in your .htacess file

Code: Select all

AddEncoding gzip .gz
AddType text/javascript .js

# BEGIN Cache-Control Headers

  <FilesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </FilesMatch>
  <FilesMatch "\.(css)$">
    Header set Cache-Control "max-age=604800, public"
    Header set Content-type "text/css; charset=UTF-8"
  </FilesMatch>
  <FilesMatch "\.(js)$">
    Header set Cache-Control "max-age=216000, private"
    Header set Content-type "application/x-javascript; charset=UTF-8"
  </FilesMatch>
  <FilesMatch "\.(gz)$">
     Header set Content-Encoding: gzip
     SetEnv no-gzip 1
  </FilesMatch>
 
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"

# END Cache-Control Headers


If you get error 500 it is because your hosting provider did not allow you to use some of these commands. With this code you can create gzipped versions of javascript and css which won't get gzipped on each visit so both CPU and bandwidth is low.

I am also working on a static page caching solution for joomla and virtuemart which i have already spent lot's of time, but could not make it fully working especially because of SESSION inicialization and security token, but you might also be interested in caching your pages this way in your .htaccess file:

Code: Select all

#RewriteCond %{REQUEST_METHOD} ^GET$
#RewriteCond %{QUERY_STRING} !.*=.*
#RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).*
#RewriteCond /YOURFULLPATH/cache/com_supercache%{REQUEST_URI} -d
#RewriteCond /YOURFULLPATH/cache/com_supercache%{REQUEST_URI}/index.html -f
#RewriteCond /YOURFULLPATH/cache/com_supercache%{REQUEST_URI}/index.html -s
#RewriteRule ^(.*) /cache/com_supercache%{REQUEST_URI}/index.html [L]


This code is not for production (it is all commented) at the moment and also assumes that the page cache plugin creates static version of the page into /cache/com_supercache directory. This will only work on fully SEOed URLs such as /category/product and will be limited to only a few hosting companies. All dynamic data such as security token and session inicialization would be done with ajax and the page itself would be loaded statically under 4ms wheras normal php page cache loads from 100 to 500ms and non-cached pages normally load from 500 to 8000ms.

[chris.tikkos@.....com]

Hi Stan,

Thank you for your excellent tips and advice! We will surely check your suggestions for speeding up things abit. At the moment page speed optimization is our biggest concern; we have tried a few extensions so far. We are very interested to hear that you are working on a new caching extension, pls keep us informed!

In a full-blown Virtuemart shopping cart, it is tricky for sure to create a reliable caching extension. Certain pages for example must not be cached, like e.g. the cart page, so a URL filter is required. Furthermore caching for different languages/currencies is also important, therefore cookies filter is also great. The only (i think) extension that can do that is the JRE Cache Accelerate, but it has a few other issues. If you need any ideas i can send you its admin options screenshot.