YSlow rule #9 – Make JavaScript and CSS External

17. May 2011 · Write a comment · Categories: Performance · Tags: , , , , , ,

We’ve briefly touched this subject a number of times already. Making your JavaScript and CSS external simply means moving it from your HTML header to their own files, referenced as an external file in the header. So why does Yahoo think that this is a good idea? We’ve already discussed the possibility to cache resources in the browser client-side cache. Caching scripts and styles is definitely easier than caching HTML. JavaScript and CSS are typically only changed when changing something on the site like new styling, new features, etc. Changing HTML happens all the time when users write new content, new search results are found, etc. When inlined, the scripts and styles are typically not cached or at least not for a very long time. But wait, here’s the real bonus: scripts and styles are typically shared between multiple views. Moving all that static stuff to external files will make the browser cache them, serving the cached versions when loading page number 2, 3, and so on.

The YSlow documentation argues that you can sometimes benefit from inlining your script and styles directly in the HTML. This only goes for pages with a single page view per session like the Yahoo front page. I can see the point and noticed that pretty much all search engines do this. I still think that you should get a lot of visitors in order to do this kind of thing. So unless you’re Google or your front page uses an entirely different styling than the rest of your site, you should be covered by moving the static stuff to external files.

Another benefit is when debugging through Firebug. When I need to debug some inlined JavaScript, I typically spend some time wondering and then realizing that I can’t debug JavaScript from the HTML tab in Firebug. This usually causes a bit of confusion and sometimes even some pulling out of precious hair strands. The solution is to navigate to the scripts tab and selecting the HTML file. I can understand why the UI works that way, but I keep forgetting. Moving all JavaScript to an external file forces me to navigate to the scripts tab right away.

(Proofread by inWrite)

Google Page Speed – the YSlow clone

03. February 2011 · Write a comment · Categories: Performance · Tags: , , ,

Page Speed is a plug-in developed for Firebug by Google. If you don’t use Firebug, get it (http://getfirebug.com/)! It’s the coolest web developer plug-in for Firefox out there. The Page Speed tool is downloaded from http://code.google.com/speed/page-speed/download.html. Google Page Speed is very similar to Yahoo!’s YSlow, which I talked about in my previous blog post. I don’t say that competition is a bad thing, but developing a tool based on pretty much the same set of rules just seems stupid.

Page Speed analyzes your web page just as YSlow. Your page will get a grade from 1 to 100 (100 is the best), based on how you managed to follow certain rules for doing fast rendering of web pages. The rules are very similar to the ones available in YSlow. Some of the descriptions have a bit more information, like showing you how many percentage a file can be compressed. If you find old screenshots of Page Speed, it had a nice Activity tab, showing you a lot more information about the resources needed for your page to load than the Net tab in Firebug. In 2010 Firebug got those missing information, and Google deprecated the Activity tab.

One nice feature in Page Speed is its ability to natively optimize images, which can be compressed, as illustrated on the following screenshot:

This feature is available in YSlow as well, but through an external service.

So which tool should you use, YSlow or Page Speed? The answer is probably both. Try testing your pages in both tools and check for differences. I usually start by analyzing my page in YSlow, optimize it, and finish off by analyzing it in Page Speed. If you prefer Page Speed over YSlow, try doing it the other way around.

YSlow – your new best friend

28. January 2011 · Write a comment · Categories: Performance · Tags: , ,

The first tool that you should definitely check out is YSlow from Yahoo. YSlow is a plug-in for Firebug, which is a must-have for all web developers. You can find the Firebug plug-in here: http://getfirebug.com/ and the YSlow plug-in here: http://developer.yahoo.com/yslow/. Firebug is activated by clicking the small bug icon in the bottom right part of the Firefox window. When visible you will get a new tab in Firebug as illustrated below:

You start the analyzer by browsing to the site you want to analyze and enable the “Autorun YSlow each time a web page is loaded” or by presseng the “Run test” button. In the following example, I’ve analyzed the URL “http://www.myrating.dk/indhold/3422-boller_i_karry” from one of my websites:

(By the way, “Boller i karry” is a great Danish dish. If you want to make it, a translated recipe is available here: http://translate.google.com/translate?js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&sl=da&tl=en&u=http%3A%2F%2Fwww.myrating.dk%2Findhold%2F3422-boller_i_karry&act=url.)

As shown in the screenshot, YSlow analyzes the content of the current page and shows you an overall performance score as well as a detailed list of rules, each graded from A to F (A is best). This page is rated C, which is actually not that bad. Striving for the best grade on all your pages will most likely be a waste of time. I usually go for an A or B on simple pages and B or C on complex pages, which uses a lot of external JavaScripts, etc.

You can click each rule, which shows a detailed description in the area at the right. YSlow typically shows a detailed description, explaining what you’ve done wrong as well as some hints on how to fix it. Note the “Read More” link at the bottom of each description, which will direct you toward a more detailed description at the developer.yahoo.com website.

YSlow has tabs as well. As default the Grade tab is selected. Make sure to check out the other tabs as well. The Components tab gives you a grouped overview of all your resources like HTML, JavaScript, and CSS. The Statistics tab is sort of the same but shown in a pie chart.  The hidden treasure is found beneath the Tools tab. There you’ll find URLs for different tools to help you optimize CSS, JavaScript, and much more. My favorite tool is the link titled “All Smush.it,” which will redirect you to the Smush.it service from Yahoo. I will write a blog post about image compression sometime in the future, but shortly told, the Smush.it service analyzes all your images and compresses them further, letting you download all the optimized images in a single zip file.

I will go into each YSlow rule in detail in upcoming posts, but right now you know enough to start analyzing your own sites.

(Proofread by inWrite)