Website Load Performance Optimization

The form is use to update GDocs is so slow on my Iphone 3G that I decided to do some improvements.

Before the doing comes some reading as this is my optimization primer 🙂 I mainly followed Yahoo!s guide provided through Yslow, btw a great Firefox plugin:  Best Practices for Speeding Up Your Web Site. Online you can use http://gtmetrix.com, which combines Yslow and the corresponding tool from google.

Main Learnings are:

  • Reduce number of http calls
    • Use only single files   –> only use one file for CSS and html –> done  (copied css into html)
    • Use only one image (background, CSS) –> n/a
  • Set expiry headers –> done
    I tried the variant with setting the header in the HTML file <meta http-equiv=”expires” content=”43200″ />, in this case the browser shall reload the file if the version in the cache is more than 12hours old (for a first test). Seems to work but I reset it to allow further testing
    For images and other stuff you need to create an .htaccess file in the folder, e.g. including the following:
    # 1 YEAR
    <FilesMatch “\.(ico|pdf|flv)$”>
    Header set Cache-Control “max-age=29030400, public”
    </FilesMatch>
    Now YSlow is happy on that one 🙂
    More details on caching and apache are here: http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html
    Cross-Checking can be done using redbot.org or fiddler
  • Reduce file size by debeautifying it: http://prettydiff.com/
  • Enable compression (gzip)
    i followed this guide with code to be entered in the .htaccess: http://serverfault.com/questions/137823/how-to-enable-either-gzip-or-deflate-compression-via-htaccess and added .ico as additional picture type to not be compressed.

After all there is also (at least) this online tool to measure IPhone and Android load times (I didn´t find an app for to IPhone to do that):

http://www.blaze.io/mobile

 

Bookmark the permalink.

Leave a Reply