About the Author

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

5 Things to learn from JC Penney and other Strong Black Friday and Cyber Monday Performers

The busiest online shopping time in history has brought a significant increase in visits and revenue over last year. But not only were shoppers out there hunting for the best deals. Web performance experts and the media were out there waiting for problems to happen in order to blog and write about the business impact of sites performing badly or sites that actually went down. We therefore know by now that even though the Apple Store performed really well it actually went down for a short while friday morning.

The question many are asking right now is: What did those that performed strong do right and what did those performing weak miss in preparation for the holiday season?

Learn by Comparing Strong with Weak Performers

We are not here to do any finger pointing but want to provide an objective analysis on sites that performed well vs. sites that could do better in order to keep users on their site. Looking at what sites did right allows you to follow their steps. Knowing what causes weak performance allows you to avoid the things that drag your site down.

Strong Performance by Following Best Practices

JC Penney was the top performer based on Gomez Last Mile Analysis on both Black Friday and Cyber Monday followed by Apple and Dell. For mobile sites it was Sears followed by Amazon and Dell. Taking a closer look at their site allows us to learn from them. The SpeedoftheWeb Speed Optimization Report shows us that they had strong ratings across all 5 dimensions in the Web performance delivery chain:

SpeedOfTheWeb analysis shows strong ratings across all aimensions of the Web Delivery Chain

SpeedoftheWeb analysis shows strong ratings across all dimensions of the Web Delivery Chain

Using dynaTrace Browser Diagnostics Technology allows us to do some forensics on all activities that happen when loading the page or when interacting with dynamic Web 2.0 elements on that page. The following screenshot shows the timeline and highlights several things that allows JC Penney to load very fast as compared to other sites:

Low number of resources, light on 3rd party content and not overloaded with web 2.0 elements

Low number of resources, light on 3rd party content and not overloaded with Web 2.0 elements

Things they did well to improve performance:

  • Light on 3rd Party Content, e.g.: They don’t use Facebook or Twitter JavaScript Plugins but rather just provide a popup link to access their pages on these social networks.
  • The page is not overloaded with hundreds of images or CSS files. They for instance only have one CSS file. Minifying this file (removing spaces and empty lines) would additionally minimize the size.
  • JavaScript on that page is very lightweight. No long running script blocks, onLoad Event handlers or expensive CSS Selectors. One thing that could be done is merging some of the JavaScript files.
  • Static Images are hosted on a separate cache-domain served with Cache-Control Headers. This will speed up page load time for revisiting users. Some of these static images could even be sprited to reduce download time.

Things they could do to become even better

  • Use CSS Sprites to merge some of their static images, e.g.: Sprite the images in the top toolbar (Facebook, Twitter, Sign-Up options, …)
  • Combine and minify JavaScript files

Weak Performance by not following Best Practices

On the other side we have those pages that didn’t perform that well. Load times of 15 seconds often lead to frustrated users that will then shop somewhere else. The following is a typical SpeedoftheWeb Report for these sites showing problems across the Web Delivery Chain:

Bad ratings across the Web Delivery Chain for pages that showed weak performance on Black Friday and Cyber Monday

Bad ratings across the Web Delivery Chain for pages that showed weak performance on Black Friday and Cyber Monday

Now let’s look behind the scenes and learn what actually impacts page load time. The following is another timeline screenshot with highlights on the top problem areas:

Weak Performing Sites have similar problem patterns in common, e.g.: overloaded with 3rd party content, heavy on JavaScript and not leveraging browser caching

Weak Performing Sites have similar problem patterns in common, e.g.: overloaded with 3rd party content, heavy on JavaScript and not leveraging browser caching

Things that impact page load time:

  • Overloaded pages with too much content served in not optimized form, e.g: static images are not cached or sprited. JavaScript and CSS Files are not minimized or merged.
  • Heavy on 3rd Party plugins such as Ad Services, Social Networks or User Tracking.
  • Many single resource domains (mainly due to 3rd party plugins) with often high DNS and Connect Time.
  • Heavy JavaScript Executions, e.g.: Inefficient CSS Selectors, slow 3rd party JavaScript libraries for UI effects, etc
  • Multiple redirects to end up on correct URL, e.g: http://site.com -> http://www.site.com -> http://www.site.com/start.jsp

To-do-List to boost performance for the remaining shopping season

Looking across the board of strong and weak performers allows us to come up with a nice To-do-List for you to make sure you are prepared for the shoppers that will come to your site until Christmas. Here are the top things to do:

Task 1: Check your 3rd Party Content

We have seen from the previous examples that 3rd Party Content can impact your performance by taking long DNS and Connect Time; long lasting network downloads as well as adding heavy JavaScript execution. We know that 3rd party content is necessary but you should do a check on what the impact is and whether there is an alternate solution to embed 3rd party content, e.g.: embed Facebook with a static link rather than the full blown Facebook Connect Plugin.

Analyze how well your 3rd party components perform from both network, server as well as JavaScript time

Analyze how well your 3rd party components perform from both network, server as well as JavaScript time

Also check out the blog on the Impact of 3rd Party Content on your Load Time.

Task 2: Check the content you deliver and control

Too often we see content that has not been optimized at all. HTML or JavaScript files that total up to several hundred kilobytes per file often caused by server-side Web frameworks that generate lots of unnecessary empty lines, blanks, add code comments to the generated output, etc. The best practice is to combine, minify and compress text files such as HTML, JavaScript and CSS files. There are many free tools out there such as YUI Compressor or Closure Compiler. Also check out Best Practices on Network Requests and Roundtrips.

Check the content size and number of resources by content type. Combining files and compressing content helps reduce roundtrips and download time

Check the content size and number of resources by content type. Combining files and compressing content helps reduce roundtrips and download time

Developer Comments generated into the main HTML document is a good candidate to save on size

Developer Comments generated into the main HTML document is a good candidate to save on size

Task 3: Check your JavaScript Executions

JavaScript – whether custom coded, a popular JavaScript framework or added through 3rd party content – is a big source of performance problems. Analyze the impact of JavaScript performance across the major browsers – not just the browsers you use in development. Problems with methods such as querySelectorAll in IE8 (discovered in my previous blog) or problems with outdated jQuery/Yahoo/GWT/… libraries can have a huge impact on page load time and end user experience:

Inefficient CSS Selectors or slow 3rd Party JavaScript plugins can have major impact on Page Load Time

Inefficient CSS Selectors or slow 3rd Party JavaScript plugins can have major impact on Page Load Time

Find more information on problematic JavaScript in the following blog posts: Impact of outdated JavaScript Libraries and 101 on jQuery selector performance

Task 4: Check your Redirect Settings

As already highlighted in my previous blog where I analyzed sites prior to Black Friday – many sites still use a series of redirects in order to get their users on the initial HTML documents. The following screenshot shows an example and how much time is actually wasted before the browser can start downloading the first initial HTML document:

Proper redirect configuration can safe unnecessary roundtrips and speed up page load time

Proper redirect configuration can save unnecessary roundtrips and speed up page load time

For more information and best practices check out our blog How we saved 3.5 seconds by using proper redirects.

Task 5: Check your Server-Side Performance

Especially with dynamic pages containing location-based offers, your shopping cart or a search result page require server-side processing. When servers get overloaded with too many requests and when the application doesn’t scale well we can observe performance problems when returning the initial HTML document. If this document is slow, the browser won’t be able to download any other objects and therefore leaves the screen blank. Typical server-side performance problems are either a result of architectural problems (not built to scale), implementation problems (bad algorithms, wasteful with memory leading to excessive Garbage Collection, too busy on the database, etc) or problems with 3rd party Web services (Credit Card Authentication, Location Based Services, Address Validation, etc). Check out the Top 10 Server-Side Performance taken from Zappos, Monster, Thomson and Co:

Application Performance Problems on the Application Server will slow down initial HTML download and thus impact the complete page

Application Performance Problems on the Application Server will slow down initial HTML download and thus impact the complete page

A good post on how 3rd party Web services can impact your server-side processing was taken from the experience report of a large European eCommerce site: Business Impact of 3rd Party Address Validation Service.

Conclusion: Performance Problems are avoidable

I hope this analysis gave you some ideas or pointed you to areas you haven’t thought about targeting when it comes to optimizing your web site performance. Most of these problems are easily avoidable.

If you need further information I leave you with some additional links on blogs we did in the past that show how to optimize real-life application performance:

For further information check out our other blogs we have on Web performance, mobile and Top 10 Server-Side Problems.

Comments

  1. Andreas, 3rd Party Content… I have never thought to look there. As I Look around I see it is a total speed killer! This is an awesome article. Lots to think about. Thanks!

Comments

*


5 + five =