Optimizations

dwlnetnl edited this page Nov 4, 2011 · 16 revisions

Let’s list all the ways we can optimize the end user’s experience. Gzipping is the most effective.
Also, note these Server Side Issues.

Enable gzip via Apache 2

This is a HUGE saver. It’ll reduce the core download from 1.3MB to 65KB.

1. In httpd.conf, uncomment this line:

LoadModule deflate_module libexec/apache2/mod_deflate.so 

2. In httpd.conf, add this line at the end of the file:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript 

3. In mime.types, add j and sj to this line:

application/javascript js j sj 

4. Save both files and restart apache.

On the maillinglist there was mentioned by Helge Hess that the above method will constantly recompress your files for each request.
The solution is to provide a static zipped file to apache and configure apache accordingly.
More information about this method can be found here

gzip With Shared Hosting

If you’re using shared hosting like GoDaddy.com’s basic hosting, you may not have access to the apache configuration file. You can still use gzip, however. You need to manually zip all your files beforehand and have the zipped files side-by-side in the same directories as the unzipped, with an added .gz extension. Then create a .htaccess file in the base directory of your app on the server with the following contents:


    rewriteengine on
    rewritebase /ver2beta
    rewritecond %{HTTP:Accept-encoding} gzip
    rewritecond %{REQUEST_FILENAME}.gz -f
    rewriterule (.*) $1.gz [L,QSA]
    <files *.gz="">
        AddEncoding x-gzip .gz
        Header set Content-Encoding: gzip


More information here.

Code Minimizer

objjc now minifies via the ShrinkSafe minifier. Specify the “-O” (as in “optimize”) flag when calling objjc or in the steam file (see Foundation.steam as an example). In Cappuccino, the AppKit and Foundation frameworks are minified during the “release” build, but not the “debug” build.

Caching

Caching static resources (code and images) will decrease load time for repeat visitors. The following Apache directives will set the expirations headers to be far in the future:


    <FilesMatch "\.(j|sj|js|png|jpg)$">    
        Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
    </FilesMatch>

Be careful, since when your code changes clients who have already cached the application will not get the new changes. One method of “cache busting” is to place the entire application in a different subdirectory each time, such as myapp.com/version1234/

To keep the same URL, you can copy the index.html file back to the parent directory (myapp.com/version1234/index.html to myapp.com/index.html) and add a tag with with the subdirectory as the href:


    <base href="version1234/">

The “bake” deployment tool will do this automatically for you, using the current Unix timestamp.

Image sprites

An idea to decrease the number of http requests: use image sprites. Maybe Cappuccino could use 1 single image for all framework images like the new/edit/open button and the window resize handler. See the sprite that google code uses for example

Test

A good way to test downloading speeds with suggestions to speed up is to use Yslow