Wednesday, January 30, 2013

Caching and minifying with Apache = Faster websites

Static content should be cached and we already know how to do that in apache. Note the removal of the E-Tag header is necessary otherwise the browser will be forced to ask the server if the resource has been modified through the header "If-None-Match". This will cause unnecessary requests to Apache which will return back with just a 304 since the resource has not been modified. While this still saves throughput is far from ideal as the Browser still needs to open a socket (read consume resources) to the server:
$ sudo a2enmod expires
$ vi /etc/sites-available/mysite-ssl
 <Directory "/var/mysite">
    FileETag none
    ExpiresActive On
    ExpiresByType text/html "access plus 5 month"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType text/css  "access plus 1 month"
    ExpiresByType application/javascript  "access plus 1 month"
    ExpiresDefault "access plus 1 month"

The above should result on something like the below (Note the date will always be something in the future):
Expires:Sun, 08 Jun 2012 21:03:23 GMT
Needless to say the above should be enclosed in recipes. The first is just a command while the second needs to download from your repository the server vhost file and restart apache after.

So we are done now, we are caching and our site is really fast. Well, not that fast. Developers will not take care of minifying the code, they need it to be legible so they can change it. We need to make sure javascript, CSS and HTML contains just what is needed. Yes we already enabled gzip in apache but that is not enough. Formatting characters (only needed at development time) will need to be compressed adding to CPU time and after all the file will be bigger than a file not containing formatting characters. So yes you need to minify the code.

Here is a POB recipe which installs and configures Google apache mod-pagespeed with the bare minimums you need to make your site faster. Of course you can run that recipe in remote servers using Remoto-IT. Here is the output associated to that recipe which BTW needs an NFS share hosting the debian binary:
Installing Google pagespeed module
Selecting previously unselected package mod-pagespeed-beta.
(Reading database ... 157359 files and directories currently installed.)
Unpacking mod-pagespeed-beta (from mod-pagespeed-beta_current_amd64.deb) ...
Setting up mod-pagespeed-beta ( ...
Enabling module pagespeed.
To activate the new configuration, you need to run:
  service apache2 restart
New Google pagespeed module configuration:
    # ModPagespeedDisableFilters and ModPagespeedEnableFilters
    ModPagespeedEnableFilters rewrite_javascript,rewrite_css
    ModPagespeedEnableFilters collapse_whitespace,elide_attributes
    ModPagespeedEnableFilters canonicalize_javascript_libraries
    # ModPagespeedEnableFilters add_instrumentation
 * Restarting web server apache2   

To test your site is caching static content:
  1. Open the website from chrome
  2. Right click on the page and select "Inspect element"
  3. Go to network tab
  4. Hit enter in the address bar. Repeating this action should show all static content like images taking zero second to load as they are loaded from the cache
  5. As a reminder you can force a reloading just hitting reload (F5)

No comments: