This month’s 20 21 best new web performance links

It’s always interesting to look back at the performance-related articles, posts, and reports I’ve read over the previous month and try to frame them as a snapshot of our industry. If I were to do that now, I’d say that March wasn’t a month of sexy studies and flashy numbers. Instead, it seemed to mostly be about getting our hands dirty — refining our performance measurement tools and getting into the finer nuances of optimization.

How-to’s and case studies

Mobile comparison of Top 11
Steve Souders talks about how to use Jdrop to gather, analyze and share mobile performance data.

Speeding Up Your Website’s Database
Good how-to piece from Smashing Magazine that explains how a database can slow down your site, and how to speed it back up.

YSlow/Chrome hacking
Excellent post from performance expert Stoyan Stefanov on hacking the brand-new YSlow for Chrome.

Automating HTTPWatch with PHP
Another good how-to from Stoyan. This is a three-part post about automating and scripting HTTPWatch to perform various “monitoring-like” tasks.

How You Doin? 5 Free Ways to Check Your Site Performance
Linda Bustos at Get Elastic wrote a great post rounding up free tips and tools for analyzing five different aspects of your website’s health: competitive benchmarks, backlinks, social sentiment, business ratings, and of course, site performance.

Getting ‘mobile-ready’ part 1: Creating a mobile-optimized website
From the Google Mobile Ads blog, a guide for creating your mobile site. Note my favourite, tip #4. Optimize, optimize, optimize.

Testing and Optimizing Single Page Web 2.0/AJAX Applications: Why best practices alone don’t work any more
Andreas Grabner explains why Web 2.0 applications can’t be optimized with best practices alone, and offers some good tips for testing and optimizing.

Faster page loads with image lazy loading
From the Slideshare Engineering Blog comes this great case study demonstrating how the folks at Slideshare implemented lazy loading to postpone loading of thumbnails and other below-the-fold images. The result was pages that loaded up to 10 seconds faster.

Tools and performance measurement

Please welcome YSlow for Chrome
Yahoo! announced the beta release of YSlow for Chrome, which works in much the same way as their Firefox add-on.

Google Page Speed Online
Now you can bypass the extensions and access PageSpeed online to analyze the content of a web page and get suggestions to make that page faster.

Above-the-fold render time (AFT) on WebPagetest
Google’s Jake Brutlag demonstrated this new feature at Velocity Online. It runs in tandem with video capture to analyze screen shots to identify the time/frame at which browser window visible content is rendered.

Measuring Page Performance
Yahoo! performance engineer Shanti Subramanyam’s thoughts on perceived and above the fold timing (AFT) for web page response time.

HTTPArchive
A great resource for anyone who really wants to get their hands dirty, this open-source archive lets you see and analyze performance data and trends aggregated from almost 18,000 websites. The description from the archive’s mission statement:

In addition to the content of web pages, it’s important to record how this digitized content is constructed and served. The HTTP Archive provides this record. It is a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

Velocity news

Velocity online conference – March 2011
Good review of last week’s Velocity Online Conference from Yahoo! performance engineer Praveen P.N.

Velocity Conference 2011
O’Reilly announced the dates for this year’s Velocity Web Performance & Operations Conference (June 14-16) and began to roll out the schedule. Very exciting to note that — in addition to the operations, performance, and culture tracks — there will also be a mobile performance track. Also exciting to note the tagline for this year’s event: “Automated, Optimized, Ubiquitous.”

Awards

Gomez’s Best of the Web 2010 Web & Mobile Performance Awards
This is Gomez’s second annual report showcasing the leaders in website and mobile web performance in six major industries nationwide: retail, travel, media, healthcare, government, and financial services.

Cloud performance

The Era of the End User
In the lead-up to Cloud Connect, BitCurrent released a very readable report called The Era of the End User, which discusses the cloud, user experience, and internal productivity. Among other things, the report posits that, in the future, the efficacy of websites and web applications will be measured by a formal metric like “cost per visitor-second.”

Browsers and connectivity

Internet Explorer 9 Network Performance Improvements
From Microsoft’s IE blog: A really good explanation of how browser bottlenecks occur and how IE9 addresses these issues.

The History of Internet Usage And Speeds
A whole bunch of statistics you probably already know, presented in a brand-new set of infographics. If you’ve been looking for a graphic that compellingly illustrates global stats on IP traffic per internet user, your search is over.

Third-party content

Your Web, Half a Second Sooner
Google’s been hard at work addressing known latency issues with their AdSense code. Recently announced on the Google Code blog: New AdSense javascript means that “the latency overhead from our ads is basically gone.”

Just for fun

What If Lag Seeped Into Real Life?
What would your life be like if latency affected everything you do? This animated video addresses this very serious and important question.

You can find all of these links (and many, many more) on the WPO Hub, which Strangeloop launched earlier this month. We’re working hard to keep it up to date with the best performance-related research, case studies, and blog posts we can find.

Related posts:

In defence of Blaze

I follow a lot of blogs, but I rarely read comments, especially on contentious posts, because people can quickly lose all sense of decency and get nasty. A recent example of this: a couple of weeks ago, Blaze released its study of mobile browser performance — announcing that the iPhone browser is 52% slower than Android — and came under heavy fire from many people.

As it turned out, some errors were made in this study. I won’t get into the particulars here (Blaze has been forthright about it in their own post), but these errors triggered a flood of vitriol, which I think the folks at Blaze have handled exceptionally well.

Measuring real-world web performance is a very, very difficult task. There are countless variables involved, and these variables are in a state of constant flux. I’m not saying this to issue a “get out of jail free” card for any company that takes on an ambitious performance study.  However, I am saying this to point out that this is why there are so few ambitious web performance studies. But here’s the thing: our industry needs these ambitious studies. We need to take studies like Blaze’s for what they are: a first step in our strategy for gathering data.

As a community, I think we need to stand up and support the fact that companies like Blaze make the effort to put studies like this together, providing the opportunity for the scientific process to take hold. In their original post, they spelled out their methodology quite clearly, thus making it easy for people like you and me to replicate their study – and if we choose, to start with a different hypothesis and prove Blaze’s hypothesis wrong.

I don’t believe that the people at Blaze had any intention of misrepresenting the truth, as they’ve been accused of by some. They’ve admitted their mistakes, corrected their post, and broadcast their corrections through the same social media channels they used to broadcast their original study. This deserves respect.

Reading the negative comments and press directed at Blaze makes me a bit skittish about releasing data myself. I’m sure I’m not alone in feeling this way. Our industry has come a long way in just a few years. We need an open and collaborative environment in order for us all to continue to make forward progress.

Related posts:

Experimental new Webpagetest feature lets you test sites on Chrome

I’m always excited any time WebPagetest announces a new feature, and the recent announcement of the experimental new Chrome feature is no exception. At the risk of being labelled “that guy who runs a bunch of tests every time a new performance measurement tool comes out,” I… well… I ran a bunch of tests.

The test subjects were some of the winners of Gomez’s “Best of the Web” performance awards. I wanted to see how they performed across all of WPT’s current browsers, from the Dulles, VA, location. Here are the results of a simple load time test:

Website IE7 IE8 IE9 Chrome
BB&T 2.182 2.688 1.653 2.279
Regions Bank 1.876 2.489 1.736 1.515
Capital One 5.941 4.556 6.075 5.017
Fidelity 1.882 2.651 1.853 1.621
United Health 4.032 2.001 1.995 1.917
CBS News 15.354 15.335 12.668 15.047
Newegg 7.757 4.543 4.684 4.374
QVC 4.012 3.275 3.340 5.276
Delta 5.017 3.846 5.302 4.406
Radisson 9.779 11.530 8.016 8.560
JetBlue 9.654 7.767 5.580 6.083
FEMA 2.922 2.587 2.407 2.432

No big surprises or inexplicable anomalies here. For example, when I looked at the waterfalls for the sites that seemed to perform better in Internet Explorer 7 than they did in Chrome, the issues seemed to be code-related, not test-related.

Overall, the Chrome tests worked great, albeit in a currently limited capacity. (Right now, these are a few of the features that are not yet active: optimization checks, HTTPS, SPDY, content blocking, and above the fold time.) As Patrick Meenan notes in his announcement on the WPT forums, the new Chrome feature is “still very much in development, but I think it’s far enough along to be valuable and to start collecting feedback from you guys.”

All in all, this is a great new development — the first milestone in the three-stage roadmap that Pat announced in January. I’m looking forward to the launch of the Firefox and Android tests.

Related posts:

Above-the-fold time (AFT): Useful, but not yet a substitute for user-centric analysis

It was great to see above-the-fold time (AFT) on the agenda at yesterday’s Velocity Online. It’s been pretty widely acknowledged, here and on other blogs, that load time and doc complete time don’t fully cut it as measurement numbers. Our industry needs a user-centered approach to measuring page performance, one that tells site owners when visitors are able to see and interact with a significant amount of page content. AFT is a promising concept.

Coming up with a universal algorithm for such a nuanced measurement — an algorithm that can be applied to any site to consistently and accurately measure performance — is a gargantuan undertaking. Pat Meenan and the rest of the gang at Google who are working on WebPagetest deserve huge respect for being the first to tackle this hairy challenge.

Defining “Above the Fold”

In yesterday’s session on above-the-fold time, led by Google’s Jake Brutlag, AFT was defined as the moment when content “above the fold” (aka “what you see in your browser window”) stops changing and reaches its final state.

Measures when content above the fold stops changing and reaches its final state

Put in its simplest terms, WebPagetest’s AFT algorithm performs the following calculations:

  • Differentiates between content and ads by classifying static pixels as content and dynamic pixels as ads
  • Identifies static pixels as those that change less than 5 times within a defined cutoff point
  • Determines AFT as the moment after the last change (within the above-mentioned cutoff) of a static pixel

Testing AFT on real live sites

I was interested in seeing how WebPagetest’s new AFT option performs, so I ran tests on the top 20 Alexa-ranked retail sites.*

Website Load time Above the fold Difference (%)
Amazon 2.701 5.8 218%
eBay 2.312 n/a n/a
Netflix 5.172 8.2 159%
Amazon UK 3.225 4.7 146%
Walmart 4.883 6.4 131%
Etsy 6.210 11.8 190%
BestBuy 3.511 4.5 128%
Target 5.031 3.9 78%
Wells Fargo 2.061 2.9 141%
Fox Sports 6.132 n/a n/a
Overstock 3.036 2.9 96%
Home Depot 24.175 26.4 109%
Barnes & Noble 6.496 n/a n/a
Macys 6.760 16.8 249%
Sears 4.031 4.7 117%
Zappos 7.683 8.3 108%
Ticketmaster 8.566 17.6 205%
Costco 4.720 5.8 123%
Bodybuilding 8.857 8.8 99%
Auto Trader 5.420 7.4 137%

Interpreting the results

As Jake pointed out in yesterday’s session, WebPagetest’s AFT measurement often corresponds approximately with onload/document complete time or fully loaded time. You can see this in the page tests for Overstock.com and Bodybuilding.com.

In contrast, I’ve highlighted all the instances where AFT exceeds load time. While in many cases, the difference isn’t huge, in some cases, the difference is considerable.

Macys.com, for example, has a load time of 6.760s, and an AFT of 16.8s. If you take a look at the waterfall and filmstrip view for Macys, you can see that one of the reasons for this discrepancy is an animated graphic in the main promo banner, which rotates every 3 seconds.

The test results for Amazon also showed a huge variance: 2.701s load time and 5.8s AFT. Looking at the waterfall and filmstrip reveals an animated graphic to be one of the culprits.

Some optimization techniques will give inflated AFT measurements

I applaud the folks at WebPagetest for taking this brave first step in tackling above-the-fold time. The main problem that I see with the current iteration of the AFT algorithm is that it doesn’t fully take into account two effective performance optimization techniques that are growing in popularity:

  • Deferral – An example of this is deferring objects like the Facebook “like” button to load last. It’s a great optimization technique because the button is a piece of third-party code that can slow down a page, and it’s not crucial to how a page functions. However, because it can appear above the fold, it can result in an AFT measurement that is out of line with how a visitor actually perceives the usability of a page’s content.
  • Progressive rendering — Developers are being encouraged to use this technique, which delivers fast, low-quality images right away and then substitutes them with high-quality images at the end of the page load. Like deferral, this technique focuses on how a user perceives a page’s performance. But like deferral, this technique can give a deceptively slow AFT measurement.

In Jake’s presentation wrap-up, he was very clear about the current limitations of AFT:

  • Only applicable to lab settings
  • Does not reflect user-perceived latency based on functionality
  • AFT heuristics always need further iteration

In other words, while AFT is useful as a visual validation of other metrics, it is not yet a substitute for understanding functional readiness — how users actually see and use a page.

*Tests conducted on IE9, via the WebPagetest server in Dulles, VA.

Related posts:

Web Performance Hub launches today

One of the most popular posts on this blog is the performance cheat sheet, a collection of stats covering everything from the psychology of the user experience to the ecommerce benefits of fixing performance. A couple of months back, it occurred to me that it would be handy to create a larger directory of links to performance-related websites, tools, how-to’s, studies, and articles — both for our team here at Strangeloop, and for anyone else interested in performance.

Our marketing team got to work, and this morning we launched the Web Performance Hub.  Check it out. There’s a lot of material in there, but it’s definitely a work in progress. I’d love to hear your feedback, including tips on any links we’ve missed.