THE BLOG

11
Sep

Improving Site Performance

In the previous article regarding web development tools I briefly mentioned the YSlow tool for FireBug. YSlow analyses the performance of web pages in terms of their size and overall load time. When you run YSlow on your page you get an overall grade from A to F which is dependent upon how the page performs. The performance is measured by 13 factors, which are individually graded.

Performance Optimisation

Whilst the 13 factors are well explained, there is no real information on how to improve the page. All you know is how well your site performs in that area aswell as getting a good description of why it is important. The lack of solutions and methods of improvement turns out to be a good thing since it drives further research into how to improve page performance.

This article focuses on a very handy, cool, simple PHP script that can drastically improve the performance of your site without much effort at all!

Combine

The script is called Combine and is written by Niels Leenheer

Basically, the script has two main aims: reducing the number of HTTP requests made per page, and reducing the size of JavaCcript and CSS files to improve page load times. The script is highly effective and is easily integrated into any existing site. The performance improvement is pretty impressive, it improved my YSlow grade drastically.

Combine does a number of things and is very well focused in its purpose. Here is a quick overview:

  • Allows you to make requests for several CSS and JavaScript files with far fewer HTTP requests.
  • Combines and compresses individual CSS/JavaScript files into one compact file.
  • Utilises advanced caching and header techniques to cover every aspect when it comes to improving page loading times.
  • Works in a way that is non-invasive – you won’t need to do anything drastic to incorporate it into your existing system.

The integration of Combine into a new or existing site is easy and you will be reaping the rewards in terms of performance improvements in no time.

Example:

without Combine the includes for my gallery page would look something like:

<!-- include external CSS files --> 
<link rel="stylesheet" type="text/css" href="/styles/layout.css" /> 
<link rel="stylesheet" type="text/css" href="/styles/styles.css" /> 
<link rel="stylesheet" type="text/css" href="/styles/navigation.css" /> 
<link rel="stylesheet" type="text/css" href="/styles/banners.css" /> 
<link rel="stylesheet" type="text/css" href="/styles/features.css" />   

<link rel="stylesheet" type="text/css" href="/styles/print.css"  /> 
<link rel="stylesheet" type="text/css" href="/styles/geshi.css" /> 
<!-- include JavaScript required for gallery --> 
<script type="text/javascript" src="/script/lib/effects.js"></script> 
<script type="text/javascript" src="/script/lib/builder.js"></script> 
<script type="text/javascript" src="/script/imgRoll/roller.js"></script> 
<script type="text/javascript" src="/script/imgView/viewer.js"></script>

With Combine this becomes:

<!-- include external CSS files--> 
<link rel="stylesheet" type="text/css" href="/styles/layout.css,styles.css,navigation.css,banners.css, 
                       features.css,print.css,geshi.css" /> 
<!-- include JavaScript required for gallery --> 
<script type="text/javascript" 
src="/script/lib/effects.js,lib/builder.js,imgRoll/roller.js,imgView/viewer.js"></script>

As you can see in the Combine version, the files you wish to include are just separated by commas. This reduces the amount of markup, the number of HTTP requests made and the size of the HTTP requests (since Combine compresses files using GZip). Combine will cache the combined files so that server side processing time is also reduced on subsequent requests. Combine allows you to keep your files well structured without having to worry about making too many HTTP requests!

Conclusion

Overall, Combine provides a huge performance improvement for most pages whilst being easy to integrate into existing systems. The purpose of Combine is well defined and it doesn’t try to do more than is needed.

For detailed information see the Combine page on Rakaz.