Users hate waiting,so here are a few techniques you can use to trim down your sites.
(Check out part 2for downloadable examples.)
Find The Flab
Like any optimization technique,it helps to measure and figure out what parts are taking the longest.You might find that your images andHTMLoutweigh your scripts.Here’s a few ways to investigate:
1.TheFirefoxweb-developer toolbarlets you see a breakdown of file sizes for a page(Right Click>Web Developer>Information>View Document Size).Look at the breakdown and see what is eating the majority if your bandwidth,and which files:
2.TheFirebug Pluginalso shows a breakdown of files – just go to the “Net” tab.You can also filter by file type:
3.OctaGate SiteTimergives a clean,online chart of how long each file takes to download:
You can do this,but these tools can be finnicky and may make unwanted changes if your code isn’t formatted properly.Here’s what you can do:
Install theYUICompressor(it requires Java),then run it from the command-line(x.y.z is the version you downloaded):
java-jar yuicompressor-x.y.z.jar myfile.js-o myfile-min.js
This compresses myfile.js and spits it out into myfile-min.js.Rhino will remove spaces,comments and shorten variable names where appropriate.
If you have a unit testing framework likejsunit,it shouldn’t be hard to test the packed version.
Because typing these commands over and over can be tedious,you’ll probably want tocreate a script to run the packing commands.This.bat file will compress every.js file and create.js.packed:
compress_js.bat:for/F<span class="tex-inline-html"alt="F in ('dir /b *.js') do java -jar custom_rhino.jar -c ">F in('dir /b ·.js')do java-jar custom_rhino.jar-c</span>F > %%F.packed 2>&1
Of course,you can use a better language like perl or bash to make this suit your needs.
<head>section,but this was unnecessary.Only core files that are absolutely needed in the beginning of the page load should be there.The rest,like cool menu effects,transitions,etc.can be loaded later.You want the page to appear responsive(i.e.,something is loading)up front.
$import('http://example.com/myfile.js')will add an element to the
headof your document,just like including the file directly.The
$importNoCacheversion adds a timestamp to the request to force your browser to get a new copy.
To test whether a file has fully loaded,you can do something like
There is anAJAXversion as wellbut I prefer this one because it is simpler and works for files in any domain.
This will call
loadExtraFiles()after 5 seconds,which should load the files you need(using
$import).You can even have a function at the end of these imported files that does whatever initialization is needed(or calls an existing function to do the initialization).
The benefit of this is that you still get a fast initial page load,and users don’t have a pause when they want to use advanced features.
In the case ofInstaCalc,there are heavy charting libraries that aren’t used that often.I’m currently testing a method to delay chart loading by a few seconds while the core functionality remains available from the beginning.
You may need to refactor your code to deal with delayed loading of components.Some ideas:
- Use SetTimeout to poll the loading status periodically(check for the existence of functions/variables defined in the included script)
- Call a function at the end of your included script to tell the main program it has been loaded
Cache Your Files
Another approach is to explicitly set the browser’s cache expiration.In order to do this,you’ll need access toPHPor Apache’s.htaccess so you can send back certain cache headers(read more on caching).
myfile.js.phpand addthe following linesto the top:
In this case,the cache will expire in(60*60*24*3)seconds or3 days.Be careful with using this for your own files,especially if they are under development.I’d suggest caching library files that you won’t change often.
If you accidentally cache something for too long,you can use the
$importNoCachetrick to add a datestamp like “myfile.js?123456″ to your request(which is ignored).Because the filename is different,the browser will request a new version.
Setting the browser cache doesn’t speed up the initial download,but can help if your site references the same files on multiple pages,or for repeat visitors.
Combine Your Files
But you don’t have to combine files manually!Use a script to merge the files — check out part 2 for an example script to do this.Giant files are difficult to edit – it’s nice to break your library into smaller components that can be combined later,just like you break up a C program into smaller modules.
Should I Gzip It?
You probably should.I originally said no,because some older browsers have problems with compressed content.
But the web is moving forward.Major sites like Google and Yahoo use it,and the problems in the older browsers aren’t widespread.
The benefits of compression,often a 75%or more reduction in file size,are too good to ignore:optimize your site withHTTPcompression.
All done?Keep learning.
Once you’ve performed the techniques above,recheck your page size using the tools above to see the before-and-after difference.
I’m not an expert on these methods — I’m learning as I go.Here are some additional references to dive in deeper:
- Ajax patterns:Performance Optimization
- Detailed post on page load time
- Detailed Caching Tutorialandonline tool to check your cacheability
Keep your scripts lean,andread part 2for some working examples.