Improving WebSite Performance

Hello everybody,

in 2008’s last post, I will share some advices to improve your website performance. In the last months, I’ve been working with Onibus Recife and one of our efforts was making the site load speed faster. To achieve an acceptable performance, we basically worked on three aspects:

1. Reducing the number of requests sent/received.
2. Reducing the number of bytes sent/received.
3. Rendering the result as soon as they are avaiable.

To reduce the number of requests changed between the server and the client we used two strategies: combined files and CSS sprites. The first one combines all existing scripts into a single script file, doing the same with CSS styles. So, instead of loading a huge number of .js and .css files, the user will load just one of each extension. You can see a .NET combiner implementation here. CSS sprites are similar: it reduces the number of image requests by combining your background images into a single image. With CSS sprites,  you create a single file that contains all the images laid out in a grid, requiring only a single image and only a single server call. Each image segment is displayed using CSS background-image and background-position properties.

Later, we reduced the number of bytes sent to the user by minifying Javascript and CSS and using GZIP compression. Minification is the practice of removing unnecessary characters from code to reduce its size. When code is minified all comments and unneeded white space characters are removed. To minify scripts and CSS files we used YUI Compressor. Besides the minification, a good practice is decrease the amount of data transmitted over the network by compressing it. Compression reduces response times by reducing the size of the HTTP response and Gzip is the most popular and effective compression method at this time. A GZIP .NET implementation is found here.

Finally, we worked on displaying the result as soon as they are avaiable. A good advice here is put Stylesheets at the top, which allowed the page to render progressively, and Javascripts at the bottom of the page, avoiding the block of parallel downloads.

There is a lot of other practices to improve your site performance in Yahoo!’s Exceptional Performance including articles and video. However, I explained here just few of them, which my team used and comproved the difference that this things do.

With this post, I conclude the blog activities during this year. I’m very happy to share with my readers all the content that I’ve wrote this period and would like to thank everyone that kept with me until now. Happy New Year to everyone. 

See you,

–
Fernando

JavaScript Unit Testing with YUI Test

Hi,

some posts ago I talked about JavaScript and user interface testing using Selenium. Today, I will present another option to test your JavaScript code.

YUI Test is a testing framework for browser-based JavaScript solutions, providing JavaScript Unit Testing. While not a direct part from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit.

Here are some of YUI Test features:

• Rapid creation of test cases through simple syntax.
• Advanced failure detection for methods that throw errors.
• Grouping of related test cases using test suites.
• Asynchronous tests for testing events and Ajax communication.
• DOM Event simulation in all A-grade browsers.

To start using YUI Test, you must walkthrough some steps:

1. Include required YUI Test files into your html created file
2. Write your javascript piece of code
3. Create a test case
4. Execute tests

There is straightforward tutorial and a 48 minutes video presented by Yahoo! engineer Nicholas C. Zakas in YUI Blog. It’s a good opportunity to add some TDD to your JavaScript code and improve project quality and maintenance.

See you,

–
Fernando

Omnibus – Finding Public Transport Route

Hi,

here in Recife was released a new service which provides public transport routes. Developed by Inove Informatica, users can use Omnibus to find a way to achieve some destination using buses and subways. The result is both a textual and visual description, providing an easy google map iteraction.

The same kind of service is provided in EUA, Canada, Europe by Google Transit, but in Brazil and in Recife, where I live now, there wasn’t nothing similiar to that. So, if you are in Recife and don’t now how to go to somewhere, go by bus using Omnibus.

See you,

–
Fernando