Tag: YSlow

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.

17
Aug

Development Tools

This is the first in a series of posts in which I will discuss the tools, techniques, and methods I have discovered and used whilst creating Destiny Denied. Here I am going to focus on the excellent selection of tools and utilities that are available for Mozilla Firefox.

As an AJAX application developer many of the tools are focused on debugging Javascript and analysing HTTP requests and responses. I try to make developing sites as easy as possible. Many of the tools discussed also make designing sites easier. There is no mention of PHP tools and utilities here as I think that deserves a separate post.

Web Developer Toolkit

This Firefox extension contains a vast array of tools and links to other tools to make general web development easier.

Some of the highlights of this extension (and by that I mean the features I use the most) are:

  • Quick disable Javascript – You should always check how a page looks and works without Javascript. This is great for usability testing andallows you to see the page how a search engine would see it.
  • Outline Elements – Lets you visualise how your site is arrranged in terms of the layout of block elements.
  • Resize Browser Window – Lets you see how a page will look in different screen resolutions with ease.
  • Validation Tools – Quick links to w3’s HTML, CSS and link validation tools
  • View generated source. See the XHTML source as it looks after Javascript has manipulated the DOM!

There are so many other features in this extension, some of them I didn’t even know about until now. This is a must for any serious developer.

Go to the Web Developer Toolkit site.

DOM Inspector

This Firefox extension allows you to view the page DOM as a tree of elements. Any changes made to the DOM by Javascript are shown here. This tool is great for finding out how Javascipt is changing the page layout and debugging errors associated with it. Although it provides similar functionality to the ‘view generated source’ function it can be much more useful for pages in which Javascript is heavily modifying the DOM.

Go to the DOM inspector extension site.

Live HTTP Headers

I cant live without this! This extension allows you to check the HTTP headers sent and recieved as you request pages. This is useful in so many areas.

In particular I find it useful when doing url rewriting, checking that expiriy headers and eTags are working. This extension is a must when developing AJAX applications since it acts as a layer inbetween the client and server, allowing you to see the requests that Javascript is making and the responses that the server is sending. This is the perfect debugging tool for AJAX development.

Go to the Live HTTP Headers site.

Colorzilla

This little extension is a colour picker and allows you to quickly and easily get the HTML HEX code of different elements on any site. This is a great tool for designing, particularly when creating a new page element in the style of the original site.

Go to the Colorzilla site.

Firebug

The best Javascript debugger around. However, Firebug is much more than that. Even though Firebug is a Firebox extension itself, you can get extensions for Firebug!

Apart from the Javascript debugger, some other cool features available are:

  • Live HTML and CSS editing. Fancy seeing how a page would look with a different background color? Simply edit the CSS in Firebug and see foryourself.
  • Net performance – See how many HTTP requests are being made for the page, how long each resource takes to download, resouce size, amount ofresources in cache and much more. Perfect when optimising your site.
  • Javascript Profiler. Allows you to improve the speed of your code by giving you a full report on what functions are called and how long theytake to execute.

Go to the Firebug site.

YSlow

YSlow is an extension for Firebug developed by Yahoo. It creates a performance report of your page, gives the page a grade and suggests how you might improve load times and reduce the number of requests and the size of the page.

Whilst not being very clear on the best way to improve your page, it acts as a good guide for further research. Using YSlow I have improved the load times of my pages greatly and discovered some very cool techniques in the process. Future news posts will discuss these techniques in detail.

Get a performance report for your site now with YSlow.