How small online delays can cost your company big money.
Nobody likes to wait. It’s irritating, and, at a certain point, people realize their time is more valuable than the service or product they’re waiting for, and they leave. Companies know this and invest a great deal of time and resources into queuing theory—a branch of operations research that uses data to determine how long customers are waiting and how to reduce wait times. Queuing theory gives businesses a mathematical model to analyze whether a reduction of waiting time is worth the investment and provides a real sense of how much waiting time is acceptable before a customer goes somewhere else.
The same model has more recently been applied to analyze web servers and website optimization to determine the threshold at which customers abandon a website. Because waiting for a website to load is no different from waiting in line at the bank—if it takes too long, we’ll go somewhere else.
The Situation:
“After waiting 3 seconds, 40% of your traffic will abandon your site.” – Lara Hogan, Engineering Manager at Etsy
Meeting growing expectations
We’re not breaking any news here by saying loading time is, and always has been, the largest contributing factor to page abandonment. Since the late 90s, studies have been analyzing user expectations and users’ patience for waiting for a website to load. In 1999, the optimal load time was eight seconds. In 2006, that wait time was cut to four seconds. By 2010, 57 percent of online shoppers said they would leave a site that took longer than three seconds to load—and that was five years ago. Since then, consumers’ expectations have continued to escalate, and most (79 percent) report that they’ll abandon a website and never return if they’re not able to interact with the content within two seconds.
Loading speed isn’t the only KPI in town.
Time to interact (TTI) is a relatively new metric used to measure perceived page speed. Rather than loading the entire page at once, web developers can separately load independent sections of a webpage as defined by the client’s conversion goals. From a user’s perspective, TTI provides a meaningful performance metric, as it indicates when a page begins to be useable.
To ascertain backend performance, time to first byte (TTFB) is another new metric used to capture the time it takes your browser to receive the first byte of a response from a web server when you request a URL.
The Problem:
Considering the number of studies across the Internet that demonstrate the business metric influence of site performance, you wouldn’t think that among the top 100 retail websites in the world, only 14 rendered feature content in less than three seconds. And the average TTI of the entire lot was 5.2 seconds—considerably slower than the two to three second threshold. So, what’s the problem?
Innumerable viewing environments
Our use of the web is more situational than ever. Websites that fly on a desktop connected to a speedy network need to also be snappy and easy to use on a smartphone connected to a crowded wireless network. This flips a relatively constant user experience on its head and forces websites to be more versatile than ever before. Add in the fact that demand for dynamic pages stuffed with rich content is higher than ever—and it’s easy to see why there’s been a steady decrease in optimal user experiences and site performance.
Don’t count on . . . brand loyalists
Many businesses are blinded by their own affinity toward their brand or company—assuming their average customer will tolerate deficiencies on their websites. The truth is, most customers are subconsciously searching for any reason not to convert, and a sluggish website, especially upon the first visit, can certainly be grounds to abandon your website and go elsewhere.
Don’t count on . . . technology or networks
Page growth and continually escalating user expectations present serious performance issues that cannot be mitigated by the advancement of technology and networks. Most businesses tend to focus on their website in the best-case scenarios and are in denial that the web is overloaded with worst-case scenarios. Remember, you’re testing your website most likely on newer hardware with a fast connection, and you are relatively close to your datacenter. To gain a true understanding of your site’s performance, think about how people around the world experience your site on a wide range of screens and network speeds.
The Solution:
Companies are beginning to realize the financial effects of making their customers wait for a webpage to load. Retail giants, Wal-Mart and eBay, both cut their TTI in half to under three seconds in the past year even though both sites’ average page size and resource requests grew significantly. What exactly are these companies doing?
Diagnose problem pages
Before you start running to the fixes below, let’s determine how your site is currently performing. Page speed testing tools powered by Google and Yahoo, such as GTMetrix and Pingdom, provide valuable insights into website performance indicators for free and can actually generate scores and plain-language suggestions to educate the greenest of web developers. To get started, here’s a guide to set up detailed website monitoring on Pingdom—and here’s one for GTMetrix.
Choose the right host
The first place to dive into your site speed is with your hosting provider. Make sure you choose a trusted host that can handle the needs of your business. With hosting, you get what you pay for. The demand for cost-effective hosting solutions is quickly growing, and unscrupulous hosting providers don’t have any problem compromising service and speed to get your business. Here are some things to consider when selecting a hosting provider and package.
Compress with Gzip
Whenever an HTTP request is made, content travels from server to client (and vica versa). Compressing the content with Gzip before the journey begins reduces the time needed to process each request.
Use a CDN
A content delivery network (CDN) is an assemblage of web servers distributed across various locations to deliver content to users more efficiently. Read more about the advantages and drawbacks of CDNs.
Enable Keep-Alive
While this is certainly the low-hanging fruit of website optimization, many top retailer sites still fail to implement this. Keep-alive is a method of communication between the web server and the web browser that essentially says, “You can grab more than just one file at a time.” Here’s how to do it.
Browser caching is your friend
Caching “remembers” on page resources that the browser has loaded previously—meaning oft-repeated content is cached and does not need to be loaded again—resulting in much faster page load times. Curious how to set it up?
Reduce redirects
Each redirect creates an additional HTTP request—and the more you have, the slower your site will be. Google recommends some practical ways to minimize redirection and to increase server speed.
Curtail the code
Minification, as it applies to scripts and style sheets, eliminates nonessential characters such as newline characters, spaces, and comments—decreases your page size, reduces network latency, and speeds up load time. Tools such as Will Peavyminifyer and Autoptimize (for WordPress) can optimize and compress your code, and it supports CDN too.
Compress Images
Image compression reduces the size (in bytes) of a graphic file without degrading the quality of an image to an unacceptable level. With the adoption of retina display monitors, this is somewhat of a catch 22. To remain competitive, web developers and designers must somehow serve users large, high-resolution images while at the same time ensuring that a huge banner image doesn’t reduce the site’s loading speed. Inappropriate image formatting and lack of compression are extremely common performance culprits. Find out how to compress and reformat images for improved load times. In addition, if you don’t have Photoshop and can’t “Save for Web,” here are some tools to optimize your site’s images:
CSS at the top and JS at the bottom
If you want your website to load faster, place your CSS at the top of your code (in the <head> section) and JavaScript at the bottom. This loads the CSS first so that users can visibly see the page load important elements first, and it gives users the impression that the site has finished loading before it actually has—an instant TTI boost. For a walkthrough, check out W3 Schools.
Deferment anyone?
Defer as much rendering below the fold, along with as many nonessential scripts as possible, and allow users to be quickly presented with the initially visible webpage. Interactive behaviors, such as a drag and drop, aren’t useful for the user until the entire page is loaded, so defer as much content and functionality as possible until after the page loads. For more information, go here.
Any other tips or questions? Leave them in the comments and we’ll get back to you soon.
