Archive for the 'yslow' Category

My online footprint lately

Wednesday, July 23rd, 2008

This is a sort of a catch-up post for listing what I've been up to lately.

  • YUI Blog just published my first article, I'm so proud. It's about loading JavaScript in non-blocking fashion, because JavaScripts, they, you know, like, block downloads. Luckily, there's an easy fix - DOM includes, which I've previously discussed, discussed and discussed.
  • SitePoint published an update to my older article that introduces AJAX, ok, Ajax, by creating a command-line-like interface with PHP on the server side. The updated article features improved code, jQuery example, YUI example, JSON discussion and example. Check it out, bookmark and recommend to your friends that keep asking you "What's this AJAX (they are new, don't know it's now spelled "Ajax") thing? Do you know of a good article?"
  • YDN (developer.yahoo.com) published a video presentation of me and my lovely teammate Nicole Sullivan where we talk about some new and cool front-end performance techniques. So if you wandered how I look and are eager to hear my fabulous Balkan peninsula accent, give it a shot. The talk is called "After YSlow 'A'" and is targeted at those of you who have reached performance nirvana, but are still hungry for more. We talk about preloading components, post-loading, javascript, images, using flush() in PHP to send first byte early on and other fun stuff.
  • Last, not least, I decided to try and find some time to update my JavaScript patterns site. Unfortunately I got sidetracked (yep, I'm easily distracted by shiny objects) and played with a not-so-javascript pattern. The post I published (includes a pretty lame screencast! and) demonstrates how you can use animated background position to indicate loading progress.

Whew, c'est tout pout ce moment, expect a lot more now that the JavaScript book is out of the way. Ah, yep, if you feel like it, join me on Facebook, I created a JS book page.

 

Happy Download Day

Tuesday, June 17th, 2008

Download Day

Today is the Download Day for Firefox, which means the new release FF3 is out now. Go ahead, download and help set a Guiness record for the most software downloads in a day.

Also, last night we released a new YSlow version that works with FF3 and the latest Firebug 1.2 beta (and also FF2, FB1 and FB1.1). A download day indeed.

Oh, yeah, and I'm back in LA, California after a nice vacation in Bulgaria and Rome, having gained some weight as a result of all the feasts with family and friends :D

 

20 new performance best practices

Tuesday, March 18th, 2008

The slides from my PHP Quebec presentation in Montreal are up on slideshare. Roughly the content is divided into:

  1. a quick review/update to Yahoo's existing 14 best practices for improving performance, and
  2. a discussion of the 20 new ones

Enjoy responsibly and don't hesitate to send back questions and comments. And how about this slide #11: "The life of Mr.Page" 2.0 ;)

 

YSlow-er?

Wednesday, December 5th, 2007

One of the hidden perks about working at Yahoo! is that you get to interact with a lot of smart people, and even some celebrities in the web dev profession. Rasmus Lerdorf, Douglas Crockford, YUI guys, the list is way too long… Those couple of weeks I had the pleasure of working closely with Steve Souders, chief performance architect, creator of YSlow and author of High-Performance Web Sites. We're in the same team (although he's in the Sunnyvale HQ and I'm in Santa Monica) and this time the project was the new YSlow release. I had a lot of fun, this was one of my first exposures to YSlow's code and to working on a Firefox extension in general.

I've blogged before on YSlow, but here's a word in case you're not familiar with this ultra-useful tool for speeding up your web site. YSlow inspects a page you give it for compliance with Yahoo's rules for front-end performance (my SitePoint article on the subject) and hints you how you can speed up your page, using a convenient action-oriented list. In addition to that there is a full list of the page components being inspected and also some other useful tools.

So what's new?

(more…)

 

YSlow performance extension for Firebug

Wednesday, July 25th, 2007

Steve Souders, performance architect at Yahoo, announced today the public release of YSlow.

What's YSlow?

It's an extension to Firebug (yes, correct, Firebug, not Firefox) that helps with performance optimization efforts. It scores your page on the scale A to F, based on compliance with Yahoo's performance rules. It's a tool that has been used internally at Yahoo and is now released to the world.

The score

Here's how YSlow scores Yahoo's homepage, gives it an A with 93 points out of 100
yslow.png

You can see on the screenshot how YSlow is just another panel within Firebug, and when you select the panel it gives you a few features. The main one is Performance (shown on the screenshot).

You get a list of 13 things YSlow has evaluated (they are based on the performance rule) and if you don't get an A, there is an arrow that gives you more explanations why. Every one of the 13 items on the list is linked to online documentation of the rule so you can figure out right then what could be improved.

Other features

Besides Performance, there's also the Stats tab which gives you comparison of how your page size for visitors coming with an empty cache vs the ones that have previously visited the page.

yslow2.png

The other tab is Components which lists every component on the page along with some information, relevant to performance, such as if the component as gzipped, what was the ETag if any, component size and expiration date.

yslow31.png

In the tools section you'll find a nice surprise - integration with the JSLint tool, the unforgiving JavaScript verifier by Douglas Crockford.

The score (revisited)

OK, I'm sure you'll find the tool invaluable, but you may frown upon the score. Well, the scoring system is made so that it suits Yahoo's purposes, but you can modify it so that it fits your specific needs. In order to customize the points system you can go about:config in Firebug and search for yslow. There you can specify points for the score. In addition to that you can find the file called yslowcontext.js in your Firefox extensions folder (should be somewhere in Documents and Settings/Application Data/Mozilla/extensions/steve@yahoo/, path abbreviated), if you can't find it, just search for it. In this file, there is an array that defines the weight of each of the 13 rules in the overall score, so you can tweak that as well. To find the array, search for lintweights

Have fun!

And happy performance tunning!

Links