It has been nearly 7 years since Steve Souders published his book High Performance Web Sites and started the web performance optimization movement. The book laid out 16 core practices web developers should implement to achieve optimal performance His team at Yahoo created the FireBug plugin YSlow to measure how well our sites implement these principles. This book changed the way I developed web sites over a fateful weekend. If you have not read it, please buy it and take about an hour to read it, then implement some of the principles to your applications.
The original 16 rules have expanded to a list of 35 web performance optimization best practices today and research has expanded knowledge of how to execute fast web applications, correlate to sales increases and even human psychology. Sadly as independent audits are performed across public web properties these principles are not implemented by most. Online properties executing web performance best practices are reaping the benefits and beating their competition. As we enter the big Christmas shopping season this week I want to challenge you to think about your web applications in terms of performance, how it impacts your business and areas you can do to quickly improve your applications' performance metrics.
A couple weeks ago I was watching a CNBC report on WalMart's stock the morning after their quarterly earnings report. Their stock was up that morning as their earnings and projections were up. Nothing unusual about that, but something caught my attention. WalMart's plans to compete toe to toe with Amazon and utilize WalMart.com more than the past. The earnings report said WalMart.com accounts for 40% of its retail sales. Think about that for a minute, 40%. WalMart is experiencing higher sales volumes on their web site than the past. Most onlookers might not think this significant because aren't all online web sites doing more sales each year? That has been the trend for nearly 20 years, right?
If you have attended any of my performance optimization talks or reviewed my slide decks you know WalMart went through a performance makeover a few years back. WalMart.com suffered from severe performance issues that directly correlated to poor online sales. This kept WalMart from competing online against successful, performance focused stores like Amazon. In short sales on WalMart.com were shamefully poor.
WalMart's recent announcements emphasizing their online presence and embracing showrooming exemplify a company confident in their online, consumer presence. These actions are encouraging to developers like me who believe in HTML5 and web performance optimization. Consistently customers say there are 2 things that matter for any client application: easy navigation and performance. Failing in either of these categories produces a failed web site, your product or service can only account for so much.
Navigation and site layout are part of a developer's responsibilities, but must be paired with user experience research and design creativity. However performance is all on the developer and architect's shoulders. Placing performance as a first class requirement fosters the culture needed to create not only better code, but faster experiences. This is a competitive advantage that can be proven with science.
How the Brain Perceives A Web Site
When designing a great application, especially the front-end, you need to understand how the human mind works. There are several critical points at which our mind shifts it's impression of an application. Up to 1000ms the mind perceives and action as instant. This is why I and many other web performance practitioners strive to reach a 1 second page/application load time. Once the load time reaches 3000ms 53% of your visitors have decided to go somewhere else. That is a devastating number because you have worked so hard to get that customer to visit in the first place. You get 3 seconds to make a positive impression, after that they leave in droves. At 10 seconds the application is completely abandoned and thought to be broken. Other studies have been done correlating perceived performance to brand quality. No matter what business you are in every application is in the customer service business, you need to keep customers happy with your application. This applies to line of business applications as much as it does to a consumer e-commerce application.
Performance as an SEO Strategy
Google, Bing and other search engines have made it known performance is a key factor to search engine ranking. With all things being equal the faster site has an advantage in search results. Each search engine wants to list the 'best match' first for your search query. Search engines know faster sites are perceived as better sites. Making performance a priority gives you the edge over your competition.
Current E-Commerce Performance Trends
The overall trend with all web sites, including e-commerce is in a downward trajectory. This is leaving consumers frustrated. Periodically Radware does a State of E-Commerce Web Performance Report and each time the trend is slower and slower performance. This negative trend has opened the door to an easy competitive advantage to companies willing to make performance a first class requirement in their development and operations processes. The companies making the conscience effort to improve performance are seeing measurable increase in important revenue and customer satisfaction KPIs. There are many published reports by Amazon, Google, Bing, ShopZilla, WalMart, Staples, Kelly Blue Book, Princeline, etc correlating higher conversion rates and sales to increases in performance.
Going back to Steve Souders original performance optimization research, 80% of performance optimizations are related to front-end architecture. When considering mobile the front-end optimizations account for about 95%. There are always back-end optimizations that can be done, but front-end is usually easier to execute with an immediate impact.
Some key statics from the Summer Report:
- The median top 100 retail site takes 6.2 seconds to render primary content and 10.7 seconds to fully load.
- 17% of the top 100 pages took 10 seconds or longer to load their feature content. Only 14% delivered an optimal sub-3-second user experience.
- The median top 100 page is 1677 KB in size — 67% larger than it was just one year ago, when the median page was 1007 KB.
The last stat I find to be very disturbing. Think about how large 1677kb is for a moment. In my presentations I point out this is more than the size of the 3.5" floppy disks I used back in the 90's. My master's thesis could easily fit on a floppy disk 5 times! Now think about how much content you are downloading to compose a typical page in your application. I also compare stats like Radware's to applications I typically build:
- 20-35kb minified, not gzipped CSS
- 5-35kb minified, not gzipped HTML
- 3 Core Http Requests
- < 1 second Load Time
Another great resource maintained by Steve Souders is HTTPArchive.org. This site monitors nearly 300,000 URLs from the top web sites according to Alexa. The average URL downloads just over 1.9MB using 100 HTTP requests. Folks, these are sad numbers to see. Let me be clear it is not just about the size and number of requests it is also about how those requests are organized in the page. Again this means any web site in any industry or niche has a clear opportunity to beat their competition by adopting a performance first strategy.
What Are Some Easy Changes You Can Make to Go Faster?
Like I said earlier the front-end architecture plays the biggest factors to web performance optimization. Here are some quick things I tell clients to implement: