Click to enlarge infographic

Tweetables:

• The median page load speed for ecommerce sites is 7.25s (<3s ideal) Tweet this

• The median page load speed for ecommerce sites in 2012 was 22% slower than 2011 Tweet this

• The top 100 ecommerce sites (Alexa) are 14% slower than average, with 9% more resource requests Tweet this

• Only 25% of top 2000 ecommerce sites use CDN (content delivery networks) Tweet this

• 87% of top 2000 ecommerce sites use keep alives to increase page speed Tweet this

• 78% of top 2000 ecommerce sites compress text to increase page load speed Tweet this

State of the Union: Ecommerce Page Speed and Performance [Fall 2012] reveals the load times and page composition of the home pages of the top 2,000 ecommerce websites spanning July and August.

A key finding is, instead of getting faster, the median home page load time is 9% slower than the 2011 study — a drop from 5.94 seconds for first time visitors to 6.5 seconds, and a tumble from 1.86 seconds for returning visitors to 2.16 seconds (a dip of 15%).

Using WebPageTest, Strangeloop concentrated on the following:

• Full page load time – The amount of time it takes for all page objects to fully load in the browser of a typical end user.

• Page resources – The number of elements in each page, from CSS to images to Javascript. Each object represents one server round trip that is needed to pull all the page’s resources to the user’s browser.

• Performance best practices – The letter grades assigned to a site for the site’s implementation of core best practices.

The top 100 sites suffered even more. The median top 100 sites were 10% slower than the 2000 with a load time of 7.14 seconds, up 12% from last year.

Why?

Top 100 sites had 34% more resource requests per page load than the rest of the pack. Images and third-party scripts are the main culprits. The more advanced a site is, the slower it can be. Despite the bloated pages, the performance gap between the top 100 and the rest is smaller than you would expect for the increase in resource requests, suggesting these sites are optimizing using performance best practices.

Another finding is the number of page resources across the board rose 5% over 2011.

Ecommerce sites in particular are prone to slower pages due to the demand for rich imagery, video, customer reviews, recommendation engines, social sharing buttons, virtual fitting rooms, product demos and various analytics and testing tools employed.

Strangeloop also reports the average Internet Retailer 200 site contains 7 third-party scripts, with some containing as many as 25, each pulling resources from different server locations. Each script represents a potential “single point of failure” which can hamper speed or worse, prevent a page load altogether.

12% of the 2000 sites analyzed failed to use keep-alives and 30% did not use compression, the two simplest site-speed optimization tactics out there.

The study also found 67% of ecommerce sites are not using a content delivery network to cache resources geographically closer to users to enable faster speeds in different regions.

Ecommerce sites should be aware that best-of-breed features and functionality can impact page load speed, which can negatively impact conversion. A balance needs to be struck between them and optimal performance. Common techniques like compression, keep-alives and using content delivery networks can help. You an also use Google’s site speed optimization checklist.

View State of the Union: Ecommerce Page Speed and Performance [Fall 2012] in full (including which browsers proved fastest), or check out the companion infographic.

With the holiday season approaching, now is the time to shape up your site speed. Remember, speed is important all the way to the conversion funnel. Don’t just measure your home pages!

Tweetable facts:

Google found slowing search results by 4/10ths of a s reduced the # of searches by 8Mill/day Click to Tweet

1 in 4 web users abandon a page that takes more than 4s to load Click to Tweet

50% of mobile users abandon a page if it doesn’t load in 10s, 60% won’t return to the site Click to Tweet

25% of mobile web users only browse the Web on their phone (NO laptop, tablet or desktop) Click to Tweet

79% of mobile web users use their phones for shopping Click to Tweet

40% of mobile shoppers will ditch an ecommerce site that doesn’t load in 3s Click to Tweet

If Amazon’s site slows by 1s, it will lose up to $1.6Bill/year Click to Tweet

46% of Americans skip the cinema for pirated movies Click to Tweet

20% of consumers admitted to being rude to someone serving them “too slowly” Click to Tweet

But for those who need a little numerical validation, here are a few stats that make it crystal clear why your brand’s online presence is more important than ever:

1. Online sales are growing faster than offline sales

Consulting firm Deloitte forecasts a 14% increase in non-store sales, driven largely by the web. In contrast, overall holiday sales are expected to increase just 2.5 to 3% over last season. According to the National Retail Federation 2011 Holiday Consumer Intentions and Actions Survey, nearly half of consumers (46.7%) will buy online, up from 43.9% last year.

2. The web influences almost half of offline purchases

More shoppers are than ever are checking a store website before heading out to the physical location. Forrester Research predicted in its U.S. Online Retail Forecast, 2009 to 2014 report that the web would influence 48% of 2011 in-store sales.

3. Holiday shoppers research more online in a shaky economy

Consumers use the web to research price and availability of products to purchase both online and in stores. According to the same 2011 NRF holiday survey referenced above, the average holiday shopper plans to do 36% of their shopping online – whether they’re comparing prices, researching products, or actually making a purchase. And data from Experian Hitwise indicates that website traffic increases in a troubled economy because buyers research purchases more carefully online to stretch shopping budgets.

4. Online is a major source of inspiration for gift shoppers

When beginning the hunt for holiday gift ideas this year, our own research – just released Halloween – reveals that 21% of U.S. shoppers browse retailer websites for inspiration while 29% peruse physical stores. And the younger the consumer, the larger the role the web plays. Download a free copy of the full report, Virtual Goods Mean Real Money This Holiday. 5. Consumers planning to spend more on holiday shopping have an affinity for digital channels

Our research also found that shoppers intending to buy digital gifts – ebooks, music downloads, Facebook credits, and the like – are more likely to increase their gift budgets over 2010. While only 15% of all consumers plan to spend more this holiday season, a whopping 30% of digital gift shoppers will do so. Those purchasing digital goods also have bigger budgets—$440 on average, which is 40% more than their non-digital counterparts. The vast majority of digital gift spend will happen online.

And another survey, this time by web marketer Steelhouse, suggests that higher-income consumers are more likely than others to maintain their 2010 levels of holiday shopping, and will do more of it online. While 62% of all consumers plan to spend less this holiday season, 54% of households earning $75,000+ intend to spend as much as last year. 32% of these higher-income consumers say that they will spend more time browsing for gifts online instead of at the mall this year, compared to an average of 28% across all incomes.

Act fast to optimize your ecommerce site

With your site being more important than ever, what’s a multichannel marketer to do as the holiday countdown commences? It’s not too late to act on these tips:

1. Don’t emulate Target and have your website repeatedly crashed by unexpected traffic. Plan for major traffic spikes to ensure your site can handle the load. Simulate peak loads, monitor site responsiveness, and measure application behavior well in advance of Cyber Monday.
2. Speed up your site. Investigate using a content delivery network (CDN) like Akamai to speed up the delivery of rich content, including images and videos, to shoppers.
3. As many holiday shoppers will be researching online and on their smartphones both before and during their trips to the store, integrate the in-store experience with relevant, timely and personalized website and mobile app info.
4. Maximize the findability of your products online. By submitting a feed to Google Product Search, the Internet giant’s online shopping comparison engine, lesser known websites can improve exposure. Consider trying the Amazon Marketplace too. Or use Amazon Product Ads to place pay-per-click ads on category and product pages. Shoppers will see your ads when looking for similar products.
5. Social media has hit the mainstream and, while not a primary channel for discovery, is gaining in importance, particularly to Gen Y shoppers. Add social sharing to product pages to turn customers into sales channels. Resolve customer service issues on Facebook or Twitter to publicly display your customer service chops.
6. With cash-strapped shoppers carefully researching every purchase online before buying, follow the lead of sites like Amazon-owned toy site yoyo.com in making the shopping experience simple, efficient, and fun through gift finders, well-designed navigation, product filters and comparison tools, curated recommendations, and rich product details. At minimum, spruce up the product copy and images of your most popular holiday products, reinforce your value proposition, and make your shipping and return policies clear.
7. Act fast to plug your leaky conversion funnel with simple and low cost website feedback and usability tools like Crazy Egg.
8. Ask for an email address wherever you can, both online and in-store. Then squeeze as much value as you can from each of those email addresses.
9. Implement remarketing campaigns to target shoppers who browse weeks before they buy.

Looking for help with ecommerce site optimization? Contact the Elastic Path consulting team at consulting@elasticpath.com to learn how our conversion optimization services can improve your business results.

Just type in any URL and Google will return a report with an Overview (complete with a percentage score) and high, medium and low priority action items:

Clicking on any item in the menu takes you to more detail:

For example, Piperlime’s home page has a bit of Javascript to minify. Google lists each instance along with the percentage of load reduction after compression.

Remember, these are suggestions, not absolute rules – you may have perfectly good reasons for setting expiration for cacheable objects at 30 minutes or 6 hours instead of one week as Google recommends. But this tool is a great cheat sheet for finding low hanging fruit in optimizing your site speed, which results in reduced bounce rates (and more opportunity for conversion), more returning visits and better SEO!

Video previews in search results with previews

Google somewhat-recently launched Instant Previews in its SERPs (search engine results pages), where you can hover over a magnifying glass to preview a landing page before committing to a click. It now supports previews for video content, showing not only a few thumbnail images but also very short clips of the video, with or without sound.

Hat tip to Xavier Casanova from VideoRetailer.org for the screenshot.

This means video SEO is all the more important, to ensure your video assets have the best chance of appearing in blended search results. Check out the 7 Deadly Sins of Video SEO and 5 Heavenly Acts of Righteousness for tips.

Google Adwords’ appended URLs

Adwords announced a global change to the way your text ads are displayed. Ads are now appended with the display URL automatically.

My observation – this only happens when the ad is in the magic blue purple green yellow box and when there’s enough room.

My concern with this tactic is stuffed headlines are actually harder to read and scan. While I suppose they can give a branding boost by showing the URL, they may make the headlines ignored altogether. Making some brands more prominent than others also seems a bit unfair. If it does impact click through positively, the “rich get richer” (the highest CTR ads that win the top spots will stay there).

Nevertheless, it’s important that you understand your headlines have been changed without your consent, and this change can impact your campaign performance for the good or the bad. It’s a good idea to annotate the date of this change so you can see the changes in your web analytics. Ideally, Adwords would have provided advertisers with the ability to split-test with and without the display URL in the headline, and an option to turn the feature off.

Google Analytics Site Speed Report

While there’s been a whole whack of adjustments in the new Google Analytics (version 5), perhaps the most exciting is the site speed report.

This report will tell you which landing pages load the slowest, which campaigns correspond to faster page loads and how geography and browser type differ in performance.

Once you identify where the issues are, you can take measures to optimize these pages. Here’s a tip – pay the most attention to the pages in your checkout, not just “landing pages.” Many carts are not abandoned because a button was the wrong color, but because tables, graphics and other objects were…taking…too…long…to…load…

Answer: Forget to renew your Secure Sockets Layer (SSL) certificate.

If for any reason your certificate expires, your customer’s browsers may serve up warnings like this:

Imagine what goes through the mind of a novice or security-concious Web user when presented with warnings like:

• “Safari can’t verify the identity of the website”
• “This connection is untrusted”
• “This is probably not the site you are looking for!”
• “There is a problem with this website’s security certificate”

Not to mention calls to action like “Get me out of here!” and “Back to safety.” The suggestion that a site is not safe to visit could even mean the customer never returns to your website.

Think this couldn’t happen to you?

Think again, even Google and Yahoo have slipped up. Sometimes the renewal is missed because the person who set up the certificate moves on from the company, and there is no process in place for the successor to be notified when it’s time to update, and no one bothers to check up on it. Other times it’s just negligence.

How to check your SSL certificate

1. Visit a secure page on your e-store (beginning with https:// vs. http://), double click the padlock icon in the bottom, right hand corner.

A window should open up with the issue and expiry dates, or a button “View Certificate” (which should present issue and expiry after the click). Take note of the expiry date and set up an alert for your IT team.

2. Even easier, run your domain through this SSL checker. If there is an error, you can click a link for more information, like this example below:

You can even set up a renewal reminder right from the tool. (Here’s a tip: sign up a few addresses in case you are no longer with your company.)

After you have decided on your new ecommerce platform, despite all of this pre-purchase research, you will need to start planning your own performance testing efforts as part of your ecommerce implementation. It is not enough to rely on a vendor’s testing as there are many factors that can affect a site’s performance and all ecommerce implementations are quite different.

There are many ways in which performance characteristics of your ecommerce implementation can be different from standard vendor’s implementation:

1. Structure and Size of Data

Let’s start with the catalog data. Some retailers have less than a thousand products in their catalog, while others are keeping hundreds of thousands of items in stock. We have also seen large variations in the number of SKUs on our customers’ sites. Performance characteristics of a catalog in which each product has thousands of SKUs will be different from a catalog that contains mostly single SKU products.

The number, size, and type of a product’s attributes are other parameters that can affect performance. In addition, complex promotion and pricing models may require extra database access and calculations, and have the potential to slow the system down.

When it comes to sites that use plenty of rich content (high-resolution images, video, flash), you will need to make sure they have the capacity to serve it to all customer browsers.

The personalized shopping experience is a popular trend in ecommerce, as it allows marketers to make content and products more relevant to visitors, which increases conversion rates. From a performance perspective, this type of personalized content causes additional load on the system, and this impact should be measured. Whether we like it or not, everything has its price.

2. Store Usage Patterns

On many ecommerce sites, a shopper starts from a home page and browses through category pages, or uses the product search functionality. For such sites, search & browsing requests will be prevailing activities and will generate most of the load on the application. In other stores, the shopping experience starts from the product page, or even on the checkout page, as the product selection happens in the context of another web application.

In addition, the conversion rate determines how much load you should expect from order placement transactions.

3. Caching Strategies

The best way to improve the performance of a web application is to implement a good data caching strategy. Many options are available to you, and, most likely, you will use a combination of different caching methods to achieve desirable results. Which ones you select will depend greatly upon the structure of your data, store usage patterns, and what caching strategies are supported by your ecommerce platform. You will need to decide:

• Which pages should be cached
• Whether to cache whole pages or page fragments
• Where caching should take place
• For how long you wish to cache different data
• How to invalidate the cached data

To find the right caching strategy, you will need to try different approaches and measure their impact through testing.

4. Storefront and backend integrations

It’s rare nowadays for an ecommerce system to work in isolation. Most likely, it will require a number of frontend and backend integrations in order to function. Each of them should be analyzed for performance impact.

Least of all someone doing some last minute birthday shopping for an expectant niece or nephew or the pressured husband that just realized tomorrow is his anniversary.

Shoppers have very little tolerance for slow loading retail Web sites, therefore, developers should do more to speed up site performance when possible.

YSlow Survey Demonstrates the Problem

I recently took a survey of 25 leading retail Web sites using Yahoo’s YSlow Firefox add-on. The tool measures site performance against 35 performance best practices.  And of these best practices, I was most interested in HTTP Requests.

As the good folks at Yahoo say, something like 80% of a page’s load time is spent making HTTP requests for images, style sheets, JavaScript, and Adobe Flash or similar. Speed up this processes and a site will load faster, sometimes even if the browser is loading a greater number of kilobytes.

In my little survey, many leading online retail sites performed poorly. For example, when I ran the test, Borders received an overall YSlow grade of D and an overall performance grade of 66. But the site actually got an F for HTTP Requests. Improving this one area could have helped to pull up the site’s overall performance score, not to mention make it load faster when would-be shoppers surfed by to get a copy of Seth Grahame-Smith’s new tomb, Abraham Lincoln : Vampire Hunter or a DVD of Disney’s Up.

Online florist, 1-800 Flowers had an even worse YSlow grade and performance score, and again, an F for HTTP requests. In fact, the site sought to load 27 separate, external JavaScript files and six separate style sheets.

Some site’s scores actually varied. When I first tested Amazon, the site scored a D in YSlow, with an overall performance grade of 65. But later, I retested Amazon, and it earned a B, having less than half as many HTTP requests as it had when I first test it. While I cannot be certain why Amazon decided to load fewer JavaScripts and style sheets, I can say  that making fewer HTTP requests had a significant, positive impact on how the site performed.

In my less-than-scientific survey, sites that made fewer HTTP requests generally had better YSlow scores and faster load times. Conversely, sites that made a lot of HTTP requests had poor scores and poor load times.

JavaScript Files can be Road Blocks

JavaScript, which is actually one of my favorite languages, is a leading cause of performance-sapping HTTP requests and a page block. Since while the HTTP request for a JavaScript file is underway the browser is blocked from downloading other resources until after the script has been completely loaded and, in some cases, executed.

New browsers can, in fact, load two or more external JavaScript files simultaneously, but other page elements like images or even text that appear lower in the mark up will still have to wait.

There is an excellent demonstration of how blocking—the concept that a browser stops rendering a page while it loads a JavaScript—effects a page’s load time on Steve Souders’ High Performance Web Sites Blog. Souders’ demonstration cuts a page into two sections—literally above and below a line. The top portion of the page is quickly loaded, but then the browser encounters two external JavaScripts and miscellaneous additional elements. The HTTP requests to get the JavaScript files block any other page elements from loading.

In fact, it takes almost an additional 8 seconds for the balance of the demonstration page to load.

Of course, I should point out that blocking is actually very important. Often one JavaScript file will be dependent on another. We want a JavaScript Library like jQuery or MooTools to load before any files that call functions from the library. Blocking ensures this is the case, since most browsers will not load and execute the files in order.

Addressing HTTP Requests for JavaScript

There are several things that a site developer or designer can do, to minimize HTTP Requests and blocking, thus improving site performance.

The most basic fix is to organize JavaScript files. Older web browsers, like Microsoft’s Internet Explorer (IE) 7, can only download a single JavaScript file at a time, so many web developers began organizing all of their JavaScript into a single, often massive, file. By the way, massive is no understatement. When I conducted my aforementioned survey of leading retail sites, I found several extreme examples like Barnes & Noble’s site, which called 39 separate, external JavaScript files.

But creating a single, all inclusive JavaScript file is not always best either.

Some browsers, for example Google’s Chrome or even IE8, can load files in parallel so that two smaller JavaScript files might load more quickly than one massive file.

And as Kyle Simpson wrote in his article Tame Those Performance Monsters in the March 2010 issue of jsmag, a single combined would not make sense when you were calling libraries like jQuery, which are better downloaded from optimized content delivery networks and which can be cached.

Without a doubt you’ll want to organize files—39 is too many, one may not be enough—but some combining should probably take place.

Other potential solutions (improvements) include techniques like XMLHttpRequests (XHR), wrapping scripts in iFrames, and using the defer attribute in script tags. But each of these techniques has limitations.

For security reasons, XHR requires that all of the scripts being loaded and the host page have the same domain, so it won’t work if a site needs to load jQuery.

Wrapping scripts in an iFrame will allow the even older browsers to asynchronously load JavaScripts, but you will need to function to access the JavaScripts that were loaded with the iFrame, and you must add more mark up.

The defer attribute, which is part of the World Wide Web Consortium’s HTML 4.0 Specification, essentially tells the browser to wait until the page is loaded before executing the enclosed script.

<script language=”javascript” defer>

But defer is not supported in every or even most web browsers.

I don’t mean to dissuade you from using these solutions, but I want to introduce you to what I believe is a better one.

The LABjs Solution

Kyle Simpson, who I mentioned above, started the LABjs project and has since gotten help from performance guru, Steve Souders, who I also mentioned above. LABjs is a tool for dynamically loading JavaScripts in parallel while preserving the order of execution and dependency.

LABjs also enables the browser to load both JavaScripts and other page elements at the same time, so your images and text, don’t have to wait for your JavaScripts.

Implementing LABjs is also pretty easy. You end up replacing mark up like:

<script src=”http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.4.2.js”></script>

<script src=”some.js”></script>

<script src=”someother.js”></script>

With mark up like:

<script>

$LAB

.script(“http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.4.2.js “)

.script(“plugin.framework.js”)

.script(“myplugin.framework.js”).wait()

</script>

According to Simpson’s jsmag article, using a page calling three external JavaScript files went from loading in 16.84 sections to loading in just about 6.24 seconds when LABjs was used, demonstrating a significant improvement.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.

The key is “perceived” page load.

Is there a way to entertain customers while a page or object loads? How about give them something to read?

Like the musack you hear while on hold with your bank or cable company, a bit of text can distract a customer and make the wait seem less, well, long. Here’s what I spotted online retailers doing…

Tell customers what you’re loading

Diapers.com tells customers an interactive display is loading. “Interactive display” sounds intriguing…perhaps intriguing enough to motivate some to be a bit more patient.

Similarly, Anthropologie explains it’s loading a global checkout. While one might wonder why that should take longer than 2 seconds, at least there’s a promise of something happening rather than a blank page.

Count down your objects

Only the geeky will understand what objects are, but Dell.ca satisfies the “are we there yet?” question as it counts down the objects, 3-2-1.

Make a promise

Pop-ups that show enlarged images and multiple views are used by many top online retailers, but they can take their sweet time to load. DSW promises the load lag is “well worth the wait.”

Make them laugh

“Nothing’s worse than waiting for a page to load. Except getting cheated on, of course” says Moosejaw Mountaineering.

With the exception of DSW and Moosejaw, I don’t think the above retailers’ intentions were to entertain, persuade, inform or simply distract visitors while the page loads. But there is opportunity to use value propositions, pieces of “free knowledge” or humorous content in your loading pages/features to reduce the “perceived” page load time. This idea can be explored with user testing.