Webpagetest

Here’s the good news: Your pages may be serving up to 59% fewer objects than you thought they were.

And here’s the not-so-good news: This is why you can’t totally rely on synthetic page test data when you’re optimizing your site.

A couple of weeks ago, I had an interesting conversation with a customer in Europe. He said that he’d read my post about how most non-landing-page views are actually flow views, and he wanted to know how this related to the total number of object requests on each page. In my quest to look at the statistics we throw around every day in light of real-world data, I started to investigate.

First, I examined the provenance of three sets of widely cited statistics about the size of web pages:

Google (2010): Average page is 320K and contains 44 objects

Average number of page objects (2010)

Methodology: Google collected this data from a sample of several billions of pages that were processed as part of Google’s crawl and indexing pipeline. In processing these pages, they not only take into account the main HTML of the page, but also discover and process all embedded resources such as images, scripts and stylesheets.

Caveats:

  • The tests from which these numbers are derived assume that users are arriving at the site with an empty cache.
  • All resources are fetched using Googlebot, which means they are subject to robots.txt restrictions. For example, some websites (such as BBC) block CSS and Javascript.
  • Some sites may present a different view of the resources to Googlebot than to regular users. For example, until recently, Google’s own servers used to serve CSS and JS uncompressed to Googlebot, while compressing them for regular user browsers.
  • Pages are rendered and subresources are discovered through the eye of WebKit. If a page serves resources differently for Internet Explorer or Firefox, those won’t be visible here.
  • Sampling of pages for processing is not uniformly random or unbiased. For example, pages with higher PageRank are more likely to be included in these metrics.

Charzinski (2010): Average page is 507K and contains 65 objects

Graph courtesy of Andrew King at Web Site Optimization

Methodology: These numbers have been widely publicized via performance consultant Andrew King’s well-known graph (above) and blog post. Andrew derived the 2009 data points from this paper by Joachim Charzinski, who analyzed a number of popular websites as part of his research into the efficiency of client-side caching.

Caveat: Tests assume an empty cache.

HTTP Archive (2011): Average page is 678K and contains 78 objects

Number of page objects for average website (2011)

Methodology: Gathers first view data of top-ranked websites via Webpagetest.

Caveats:

  • Tests assume an empty cache.
  • Pages are rendered and subresources are discovered through the eye of Internet Explorer. If a page serves resources differently for Chrome or Firefox, those won’t be visible here.
  • Heavily focused on the largest websites.
  • Only home pages are tested.

How do these numbers compare to real-world data?

There’s a pretty big discrepancy between 44 objects and 78 objects, and between 320K and 678K. But these tests all have one thing in common: they are all looking at the number of requests on a page with an empty cache.

This is obviously not how we use sites in the real world. I wanted to look at the actual number of resources sent to pages being served to real users.

My methodology

1. Selecting test subjects

To gain some insight into this, I turned to Strangeloop’s data warehouse, which captures some very interesting statistics on page resources. I narrowed my search by using the following criteria:

  • Sites that were segmenting traffic. (Web content optimization can dramatically change the number of requests, and I was not interested in looking at post-acceleration data.)
  • Sites that were using expires headers on most resources.
  • Sites that did not use a content delivery network (CDN). (I needed to see all of the resource requests. Although this biases the insights towards smaller customers, I did not want to go through the hassle of cross referencing my findings with client CDN analytics, which are notoriously fickle.)
  • Sites with 10M page views per month or more. (Although the non-CDN criterion biased me towards smaller customers, I did not want to go to too small.)
  • Sites with generally templated pages. (Given that I needed to run WebPagetest on the sites to see how many requests they served with an empty cache, I wanted to find sites where this would be easy.)

Using these criteria, I found three customers who made excellent candidates for my test. (Obviously, this can’t compare with the billions of site crawled by Google, but I was looking for consistent trends. If my findings had been all over the place, I wouldn’t be writing this post right now. :) )

2. Determining number of requests for real-world pages

I selected key landing pages and representative sub pages for each site. I then searched our data warehouse to see how many resources were sent to browsers for each page.

3. Determining number of requests for pages with an empty cache

I then went to WebPagetest and ran tests on the same pages to see how many requests they had with an empty cache. Then I cross referenced this with the numbers I gathered in step 2.

From steps 2 and 3, I came up with the following tables:

Landing pages

Client 1 Client 2 Client 3 Average
Empty cache: # of requests sent 112 89 153 118
Real world: # of requests sent 73 61 112 82
Difference (%) 35% 31% 27% 31%
Secondary pages

Client 1 Client 2 Client 3 Average
Empty cache: # of requests sent 134 72 123 110
Real world: # of requests sent 52 34 45 44
Difference (%) 61% 53% 63% 59%

The real world numbers looked suspiciously like repeat view numbers, so I ran a series of repeat view tests to see what was up. The results didn’t correlate to the real numbers at all, but I wanted to dig a bit deeper before laying this issue to rest. I ran WebPagetest flows based on a sample of real user flows, and I saw that users were getting very different resources depending on how they got to that page.

Takeaway: To improve KPIs, keep your eyes on the real world

Clearly, this is a pretty small sample size, and I don’t expect my findings to rock your world. Obviously we can’t draw any sweeping conclusions, but I found it interesting how the real-world data consistently differed from the synthetic test data. It serves as yet another reminder of something that’s easy to forget: We can’t look at synthetic tests as our primary benchmark.

I continue to be evangelical about the fact that we can’t focus on synthetic tests because they don’t represent what actual users are seeing. If you think your users are seeing 110 resources and they are actually seeing half that — or even less — on secondary pages, you might change how you optimize or how you choose to implement optimization. If we want to improve key performance indicators, we must always keep our eyes on the real world.

Related posts:

From techs to execs: Putting performance in business terms

For those who asked, here’s the slide deck for my session at the recent Web Performance Summit:

These slides cover a lot of ground. Here’s a rough table of contents to help you drill into the material:

  • Terminology and concepts – slides 7-19
  • Performance automation case study – slides 20-91
  • Making a business case for performance – slides 92-112
  • How to be your company’s in-house performance evangelist – slides 113-121

I was honoured to be invited to speak among a roster of great speakers. Thanks again to Kyle Simpson and the folks at Environments for Humans for organizing the event, and to everyone who attended.

Related posts:

Are you focusing on first and repeat views? Then you may be ignoring 96% of your page traffic.

Question: What do you think these four waterfalls have in common? (Hint: Same browser. Same connection speed. Same location.)

Performance measurement - first, repeat, and flow views

Answer: They’re all the same page (the Lonely Planet home page, to be specific), but from four distinct perspectives: first view, repeat view, and two different flow views.

Why measuring first view and repeat view is not enough

When most of us run simple performance tests, we usually focus on two perspectives: the first view and the repeat view. Unfortunately, life is not this simple.

On non-landing pages (for most of you, that would be all pages but your home page), first view and repeat view only represent about 4% of the total views. There’s another view — the flow view — which represents approximately 96% of the traffic for most of your web pages.

And yet despite its incredible relevance, flow view gets almost zero attention.

For instance: Let’s look at a Lonely Planet product page

Imagine you go to the Lonely Planet website and want to buy the West Africa travel guide. Well, that page has a number of different waterfalls, depending on how you visit it:

1. First view

What is it?

This is the view of the page for someone who has never been to the Lonely Planet site before (or has cleared their cache since their last visit).

Performance measurement - web page test results

Likelihood your users will see this waterfall: Small (but still important)

Product pages are most likely only a first view page when they are linked directly from ads, searches, or other websites. It is very rare for product page to be typed directly into the browsers address bar. Looking at our analytics warehouse data, we see that product pages are viewed as first view pages only 3% of the time, on average. But still, these are important views because they are often targeted leads coming from search results and referral engines.

How to see first view in a waterfall

This is an easy one. Just go to WebPagetest, enter the URL, and click ‘Start test’. Look at the first view.

2. Repeat view

What is it?

This is the view of a page if a user goes only to the page, closes their browser, and then reopens the browser and goes only to that page again as the first page they hit on the site.

Peformance measurement - waterfall

Likelihood your users will see this waterfall: Almost never

Repeat views in the context of most test tools are a good proxy to see how well you are using cache headers, but users very rarely just go to one page on a site, close the browser, open it again and go back to that exact page.

How to see repeat view in a waterfall

This is another simple view to get. As with first view, go to WebPagetest, enter the URL, and click ‘Start test’. Look at the repeat view.

3. Flow view

What is it?

This is the view of the page when a customer has previously visited at least one other Lonely Planet page.

Likelihood your users will see this waterfall: Frequently

Product pages are often viewed as part of a flow by your users. Looking at our own customer analytics here at Strangeloop, I’d estimate that upwards of 96% of product page views are flow views.

How to see flow view in a waterfall: Two methods

Seeing a page in a flow is not as straightforward as first or repeat views. Obviously your users don’t all take the same flow, so you need to ensure that you test multiple permutations of pages based on the key flows through your site, which you see in your analytics tool.

Method #1: Using HTTPWatch
The easiest way to see the flow view of a page is to install HTTPWatch, start recording your browsing session, and click from the home page to the product page.

Method #2: Using WebPagetest
Another way to see the flow view is to use the script feature of WebPagetest. Click on ‘Advanced settings’ and then click on ‘Script’.

Customizing web page speed tests using scripts

Create a script by copying and pasting the example below and changing the URLs. (If your typical path has more or less steps, feel free to cut/copy to accommodate your needs. Remember that the URL below logData 1 will be captured as the waterfall for this page.)

logData 0
navigate http://www.lonelyplanet.com/us
logData 0
navigate http://www.lonelyplanet.com/destinations
logData 0
navigate http://www.lonelyplanet.com/africa
logData 0
navigate http://www.lonelyplanet.com/benin
logData 1
navigate http://shop.lonelyplanet.com/africa/west-africa-travel-guide-7

With hundreds of flows to choose from, how do you narrow down the most relevant ones?

Obviously you could have hundreds of permutations of flows. I was interested in tracking down just how many different waterfalls can be generated from one page.

Using our performance analytics database, I tracked down a specific product page and looked at all of the different flows. The specific page I identified had been viewed almost 25,000 times and had been viewed in 975 different combinations — far too many combinations to run individuals waterfalls on.

So instead of running hundreds of tests, I simply decided to group the pages into different templates, then look at the different flows.

For example:

Home page -> Destinations -> Africa -> Benin -> West Africa Travel Guide

Was translated to:

Home page -> Destinations -> Continent -> Country -> Book

I found that by using this method, I got down to a much more manageable set of 10 unique, relevant flows.

I then performed WebPagetests, using the script feature in WebPagetest that I described above. I found that looking at the first view, repeat view, and important flow view waterfalls really helped me see how the site was doing and how real users would view a page.

What this all serves to illustrate

Measuring performance is an art as much as it is a science. While there are a growing number of tools on the market, we need to be aware of what exactly it is we need to test and why. And we still have to be ready to perform some hacks to get the data we need.

Related posts:

 

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:

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: