Monday, September 8, 2008

YSlow - Build Faster Web Pages


This is about the latest Firefox addon – Helpful to ‘Build Faster Web Pages’

Firebug - Most of us are aware of it.

- A free, open source browser extension for Mozilla Firefox that displays information about the visited page's HTML, CSS, JavaScript, and images.

- Firebug makes it easy for a Web developer to visually inspect and modify the various elements of a Web page.

- It also displays the size and time required to download any external resources such as images or JavaScript files.

YSlow – Newly launched- Version 0.9.5, a Mozilla Firefox browser add-on created by Yahoo! that integrates with Firebug

- For a more detailed analysis of your page's load time, check out YSlow. Once installed, YSlow appears as a tab in the Firebug user interface.

- From the YSlow tab you can view detailed information about the external resources (just as you can from Firebug), statistical information about the page's components, and tips for improving the page's performance.

Stats View – Figure 1

- Breaks down the bandwidth consumed by the page's HTML, IFrame content, Flash content, JavaScript files, CSS files, and images, and sums the total size and total number of HTTP requests needed.

- Furthermore, it details this breakdown when the data has been cached by the browser.

- The cookies sent to the page, along with the sizes and contents, also are enumerated here.

Performance View - Figure 2

- The most indispensable feature, which lists 13 performance tips, such as "Make fewer HTTP requests" and "gzip components."

- The loaded Web page is also evaluated against these 13 metrics and assigned a letter grade for each.

- If there are specific changes that can improve the page's performance, YSlow lists them here. You can click any of these tips to be whisked to a page with a more detailed explanation of the impact on performance and information on how to implement the performance enhancement.

Helpful tools – Figure 3

- In addition to its Stats and Performance views, YSlow includes a number of helpful tools.

- JSLint - Run the page's JavaScript, which parses the script for common problems.

- ALL JS & ALL CSS - Tools to view the page's entire JavaScript or CSS content on a single page, regardless of how many external files into which the JavaScript and CSS are split.

- And there's a tool for displaying YSlow's Performance, Stats, and external resources views in a single, formatted Web page, which makes it easy to print or e-mail the results.

Figure 1

Figure 2

Figure 3

Hope this helps.

Thanks & Regards,

Arun Manglick || Senior Tech Lead

No comments:

Post a Comment