Front-end optimization with PHP Speedy – increase Yslow grade in 10 minutes!

Before I move into PHP Speedy, a small background won’t hurt much! Until a few days back, whenever I hear the word optimization, my brain quickly shows a few keywords in my mental screen: “query optimization, page caching, opcode, etc”. All these terms and the associated work relates to the optimization of a web application in the back-end. This has been serving my need pretty good, until I became aware about the excellent 13-point front-end optimization techniques from Yahoo (thanks Emran bhai).

At first I was a bit skeptical, but as soon as I started seeing the points – I knew its importance. Without much delay, I gave it a short in my latest project at work. And the tool that made it a less than 10 minute work is: PHP Speedy. I am literally speechless with it’s performance and way of working. Just in 10 minuets, It upgraded the Yslow grade of our project from 43 to 88.  Just like a magic touch!

php_speedy_logo_medium

Now, let’s see what Yslow Grade is (for those who are not yet using it) and how php-speedy helps to upgrade it. Hope this enlightens someone like me 😛

YSlow and Yslow Grade

logo_32x32 This is yahoo’s plugin for firebug. It analyzes a page using 13 metrics (all with very details descriptions that are linked to), and gives a grade for each one, as well as an overall grade. This 13 metrics are some key points of optimization. They are listed below :

  1. Make fewer HTTP requests
  2. Use a CDN
  3. Add an Expires header
  4. Gzip components
  5. Put CSS at the top
  6. Put JS at the bottom
  7. Avoid CSS expressions
  8. Make JS and CSS external
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Configure ETags

So, a higher YSlow grade indicates a highly optimized web site. And using php-speedy, you can upgrade the grade of most of this metrics and get a higher Yslow grade in minutes.

To know more about Yslow, see http://developer.yahoo.com/yslow/.

PHP Speedy and it’s magic

PHP Speedy says about itself,

PHP Speedy is a script that you can install on your web server to automatically speed up the download time of your web pages.

PHP Speedy automatically joined together all the appropriate files (javascripts and css), remove duplications and compressed them. As a result, the size of the data and the number of http call, both are minimized. Again, it Gzip the total output while sending to browser. Moreover, all this options are configurable.

See the PHP Speedy site for downloading and  installation instructions.

Hope you are already convinced to use great optimization tool. Before ending, I am listing some common problems of using PHP Speedy and their solutions. (This points was wrote by Charles in his comment).

  1. In-page javascript: If you have any in-page javascript in the section, all the javascript will break. Move it either into a separate js file loaded in the same spot or move it to after the beginning of the tag.
  2. Relative CSS URL links: If there are Relative CSS URL links (for background images, for example), they will become malformed. Change all URL relative links in CSS to absolute references. (if you turn on php speedy and your backgrounds disappear, this will fix it)
  3. No JavaScript from PHP: You can’t use javascripts generated by PHP. Find another way (one workaround – change it to inline javascript code after the tag).
  4. No JavaScript with arguments: If you have javascripts that you can call with arguments (like protosafe, for example), you can’t use them. Find another way.

Happy Optimizing!

9 Comments

  1. Everything was okay, but after reading the problems I’m really shocked! “With a great power becomes great responsibility.” I hope PHP Speedy would be more responsible.

Leave a Reply to Raymond Selda Cancel reply

Your email address will not be published.