All posts tagged ‘YSlow’

Yahoo’s YSlow Now Available for Opera

YSlow, Yahoo’s web development tool (since released as an open source project, YSLow) designed to help you speed up your site’s page load times by showing you exactly what’s slowing them down, is now available for Opera. YSlow began life as a Firefox extension but has since been ported to Google Chrome, and is also available as a JavaScript bookmarklet for mobile and other browsers.

The new YSlow Opera extension is basically the JavaScript bookmarklet wrapped in some native code so that it gets its own toolbar button and settings file. If you’d like to add it to Opera, head on over to the Opera add-ons site and download a copy.

Opera already ships with Dragonfly, an impressive set of web development tools to rival Firebug or anything you’ll find in Webkit browsers. Adding YSlow to the Opera toolkit makes the browser an even more compelling choice for web developers.

Illustration from “Physics for Entertainment” by Yakov Isidorovich Perelman from Archive.org

See Also:

Yahoo’s YSlow Page Speed Tool Now Available for Chrome

Every web developer wants to speed up their site, and Yahoo’s YSlow plugin for Firefox is a great way to find out what’s slowing your pages down. Now, Yahoo has announced YSlow for Chrome, which brings all the goodness of YSlow to Google’s popular web browser.

In Firefox YSlow requires (and builds on) the Firebug plugin, but the Chrome version stands on its own. You can grab the new beta version of YSlow for Chrome from the Google Chrome Extension website (note that you’ll need to be using Chrome 10 or better).

Once installed, YSlow for Chrome works just like the Firefox version, with one nice difference — instead of being added to the bottom of the webpage as a kind of frame, YSlow for Chrome floats in its own window, which makes it easier to compare YSlow data from multiple websites.

The Yahoo developer blog notes that the current version of Chrome does not provide extensions access to its network panel. That means that YSlow for Chrome uses Ajax calls to cull its data and provide speed reports. As a result it’s possible that some rules might be affected and differ slightly from what the Firefox version reports. I tested a handful of domains in both Chromium and Firefox and didn’t notice any differences between the two, but be aware that it’s possible there might be some discrepancies.

For more information on how to use YSlow to speed up your websites, see our post, How to Speed Up Your Site With YSlow and Page Speed. Sadly, there’s still no Page Speed add-on for Chrome; Google’s Speed Tracer extension covers similar ground, but you’ll need to jump through some hoops to get it working.

Given Chrome’s already awesome built-in developer tools — which do more or less everything Firebug can do, no extensions necessary — adding YSlow to the mix puts Chrome on par with Firefox when it comes to the best browser for building and debugging your websites.

Illustration from “Physics for Entertainment” by Yakov Isidorovich Perelman from Archive.org

See Also:

File Under: CSS, Web Basics

How to Speed Up Your Site With YSlow and Page Speed

We all want our websites to load faster, but speeding things up can be tricky. There are numerous tried and true tricks we all use to keep page load times down, but once you’ve done a few rounds of optimization, you tend to hit a plateau where it’s tough to squeeze any more speed out of your code.

Most web developers are familiar with tools like YSlow and Google’s Page Speed. If you haven’t ever used them, go install both right now — they’re available as add-ons for Firefox. Both tools are designed to help you speed up your site’s page load times by showing you exactly what’s slowing them down, and used in tandem, they can alert you to some optimizations you never knew existed.

I recently sat down and tried, as best I could, to do everything that YSlow and PageSpeed recommended and I managed to shave my page load time roughly in half. When I started, my homepage took between four and six seconds to load. Now, it loads in one to three seconds on average.

To compare load times I used both YSlow and PageSpeed, as well as WebPageTest. Those numbers aren’t exactly benchmarks, since there’s some speed variation depending on what’s loaded in the cache, but a performance increase of about 30-40 percent is what you can expect if you haven’t yet explored these methods.

Some of what YSlow and Page Speed will tell you should be obvious — limit your HTTP requests, minimize, compress and combine your JavaScript and CSS files, use CSS Sprites, put your script tags at the bottom of the page and compress your images.

However, some of the more obscure and less-used (judging by viewing source code around the web) techniques these tools point out can make a surprising difference.

Before we get to the “how to” part, keep in mind the old saying “premature optimization is the root of all evil.” What I did with YSlow and its ilk was the last bit of optimization I did. In other words, be sure you’ve taken care of the big problems before you try to stamp out the smaller ones.

That said, I was surprised by how much of a difference some very small changes made.

Continue Reading “How to Speed Up Your Site With YSlow and Page Speed” »