Frameworks and libraries can speed up the development time and make code maintenance simpler, but it’s important you understand how they work.  It’s not just the framework itself but the entire footprint your application leaves when a user visits a specific page.  Ask yourself what’s involved from the database, to the code/framework, and then to the client through http requests.

After experiencing some issues with an application running the Zend Framework, I realized there were a lot of things I was not doing to optimize my application.  There are simple and more complex actions you can take to speed up your application.  Since time is precious, and developers with an expertise on optimization are not always available, I’ve split this post into two sections (simple and more advanced).  This post focuses on the simple part.

Simple tips and tools

1. Use Firebug with YSlow
   Firebug and YSlow are powerful tools to analyze the front end of your site.  Run the most common request on your site and see what YSlow says.  Expect a low grade, probably a D or lower.  If you can reach a level C or greater you’re doing really well as some of the requirements are not practical for most applications.

   How-to:
   Net: How many calls are there?  Try to minize these calls and definitely remove any 404 calls as they can eat up server resources.

   Console:  Do you have a lot of POST calls?  Some libraries, like dojo’s javascript framework, can make a lot of POST requests.  Reduce these if possible.

   YSlow: Rules I would pay attention to:
   1. Make fewer HTTP Requests
   3. Add an Expires Header
   4. Gzip components (server related)
   5. Put CSS at the top
   6. Put JS at the bottom (not always possible)
   7. Avoid CSS expressions
   10. Minify JS

   Resources:
   http://getfirebug.com/
   http://developer.yahoo.com/yslow/
   http://developer.yahoo.com/performance/rules.html

2. Minify Javascript and CSS
   Minification is the process of compacting your scripts by removing extraneous content such as white space.   In addition, minification can make attempts at refactoring the code to remove redunancies.  If you want to play it safe, only remove white space to ensure your code is still running. The Yahoo compressor is one of the best minifiers out there and reduces both Javascript and CSS by a significant percentage.

   How-to:
   java -jar yuicompressor-x.y.z.jar -o style_minified.css style.css

   add the “–nomunge” to only do whitespace compressions.

   Resources:
   http://developer.yahoo.com/yui/compressor/
   http://dojotoolkit.org/docs/shrinksafe
   http://dean.edwards.name/packer/

3. Merge css and js http requests- manually or automated
   Reduce the amount of calls you make to various CSS and JS files by merging them to one URL.  This is more work but will reduce the overhead.

   How-to – manually:
   This is really easy, take your css and copy and paste them together into one file.  Make sure your preserve the order of your css.  The same applies to your Javascript files.

   How-to – Automated – google or your own custom:
   Google has a php script which can take various sources and return them as one.

   Resources:
   http://code.google.com/p/minify/
   http://reinholdweber.com/?p=37

4. CSS Background Images are bad – usually
   Using a div for all of your images with a background image is not that great for performance as it requires more calls.  I’ll be the first to admit it’s my favourite way to design, but you should try to avoid them where possible.  In addition, for hover states try using one large image with background-position calls to show specific parts.

   How to:
   Use background-position to select which portion of the large image you want to show.  There isn’t much more to explain.

5. GZip
   Gzipping files on the server side will reduce the amount of overhead significantly.  It adds a bit more on the server side, but generally the pay off should be well worth it.

   How to:
   It depends on your server situation, but here’s a snippet:
   mod_gzip_on Yes
   mod_gzip_item_include mime ^application/x-javascript$

   Refer to http://snipplr.com/view/9017/gzip-your-components/ for details

   Resources:
   http://developer.yahoo.com/performance/rules.html#gzip
   http://snipplr.com/view/9017/gzip-your-components/

Conclusion
That wraps up the simple part of this tutorial… really, that’s it!  The focus of these posts is to keep them simple and easy to use.  You may be surprised at how much faster your application runs when you apply these techniques.  I hope you found these useful or at least agree that these are good practices to apply.  In the next part I will examine more advanced methods of optimizing your application.

Feedback
Your feedback is always appreciated.  In addition to commenting, if you have more resources, please add them to my growing list of links through this buncholink

It’s a simple way to organize a group of links together.