Friday, March 16, 2012

Website Speed And Responsiveness - Why Speed Is Important For Tea Companies

I look at a ton of tea company websites in the course of my work on RateTea. If I had to point to a single factor about a website that is the most important, it would be website speed and responsiveness. The responsiveness of a website is the first impression that your site makes, and it is an issue that will come up again and again, whenever the user views a page on your site. If your site is slow, you will waste your users' time. If your site is slow enough, you will lose sales, you will lose search traffic from google, and you will lose visibility from people who may have linked to your site.

Have it be fast. How fast? Ideally, instant (<1 second).

Speed matters, but like the tale of the Tortoise and the Hare, it doesn't matter if 90% of your page loads instantly, if some other element holds it from loading completely. Nor does it matter if 90% of your pages are fast if some key page hangs, keeping users from using your site. What matters is the time it takes for the pages to actually display in a browser, and the speed of the whole experience of users exploring your site.

For comparison, RateTea is a very complex site. Many of the pages on the site involve multiple, fairly complex database queries, and many of them load external elements from other sites. I'm not exactly a wizard at website optimization, and I haven't put very much serious effort into optimizing my site for speed. But most of the pages on RateTea load in less than 2 seconds. If your tea company website is taking more than 2 seconds to load, it is unnecessarily slow.

What happens if your site is slow?

If your site is slow, several things happen. One is that people leave your site. If your site is extremely slow, like more than 30 second load times (yes, there are some tea company websites this slow) they are highly likely to leave your site entirely, perhaps even before visiting a single page.

But another thing that happens is that your site can drop in search rankings. Google states this explicitly, in their April 2010 article Using site speed in web search ranking:

Like us, our users place a lot of value in speed — that's why we've decided to take site speed into account in our search rankings.

A slow site, even if your customers are patient, can cause you to lose potential search traffic. What else can happen? Even if a user does not actively close out of your site, you may lose visits (and possibly sales) if a competitor's site responds more quickly. Picture the following scenario: someone types a search term into google, looking to buy tea. Your site is the first hit, and they open it. It is slow to respond. They leave the tab or window open, and open a new tab or window, this time choosing the second result. The second website responds instantly, the person finds what they are looking for, and makes a purchase. Even if your website responds, it is too late.

How late is too late? I don't have enough intuition (or data) to make a clear cutoff. Here's one site though that I think is too slow, Ahmad Tea: (follow-up, Ahmad tea has sped their site up dramatically)

If by "most exclusive tea", Ahmad means that they are excluding all but the most patient visitors from viewing their site because it takes too long to load, Ahmad may be on to something.

I'm picking on Ahmad Tea because I like them; I think their loose-leaf teas are unparalleled in their price range, and I talk about them often. Go to RateTea and read the reviews of Ahmad's teas if you have not yet done so! But, as good as their teas are, their site took about 14 seconds for each page to load. This slow page-load time happened even on very minimal pages with no text. I will explain below why their page is so slow, and how to fix it.

Another company with great teas and an even slower site is Wild Tea Qi. I timed 22 seconds for their homepage to load. This page load is so slow that it has actually hindered me from looking up information on this company and listing their teas on RateTea, something I wanted to do after being impressed with their teas at World Tea East. It's just not worth it to me to sit there loading lots of tabs in the background and waiting them to load when I can focus on other companies whose sites load quickly. So, having a slow site can also discourage webmasters and bloggers from linking to your site, which can cause you to lose potential traffic and visibility.

How to speed up your website?

  • View your website from a fast internet connection so that you actually notice slow page-load times. If you are used to a site being slow, because you use dial-up or a slow broadband connection, you may not notice that your site is responding much slower than other sites on the web, but a large number of your customers will notice. If you are running a business which relies heavily on its internet presence, don't skimp on your own personal internet connection from whatever location you view your company's website most frequently. This way, you will detect a problem with speed as soon as there is one.

  • Have a fast web host. If you have a simple, text-only webpage, which does not load instantly, nearly 100% of the time, then your web host is too slow. Get a new host. Web hosting is cheap. I have a virtual server which hosts multiple interactive websites with databases, is highly responsive, and costs under $40 a month. Most tea companies won't need to pay anywhere near this much for hosting. Compared to the cost of designing and managing a website, hosting is a negligible cost, so don't skimp on it.

  • Avoid large images or large numbers of moderate-size images on a single page. Use thumbnails, compressed with JPG, for bigger images, and allow users to click through to view a full image. Even if your server is fast, having too much data to download will make your page slow to load, especially for people with slower internet connections. Even though few people still have dial-up internet (a few still do though), many people have slow broadband connections to save money. How much data is too much? One 150kb image on a page with only smaller images is probably fine, but many such images, or an image of 500kb, is probably too big. For larger images that you want to look perfect (like a logo), use PNG; it offers better lossless compression than GIF for larger images.

  • Use features hosted on external sites sparingly. Examples of these include Facebook fan boxes, Google +1 buttons, twitter feeds, and other things. You cannot control the speed of external sites. Even if the external sites load quickly, the user viewing your site may have a slow DNS server (a very common problem, even among users of high-speed internet), which means that looking up the hostname of these embedded elements in your page may take a matter of seconds. This additional step can more-than-double page load times for a large number of users. Make sure that the design of a page allows the page to load fully and then load the external element, rather than forcing the browser to wait on the element to load. When in doubt, it is best to just not include these external features.

  • Minimize the number of external files (including css stylesheets and javascript files) that your page loads. I explain this more below, using the case of Ahmad Tea.

If you're not a tech person, and you outsource your web design and/or IT management, just make a point that you require a fast, responsive site. Put it in a contract if you sign a contract with someone. If someone can't deliver good page load times, find someone else who can. Any web developer can learn to design pages that load quickly; sometimes they just get carried away trying to add features to a page, and neglect the speed side of things. Sometimes all it takes is to ask your web person to focus on minimizing page load times.

Back to Ahmad Tea and loading external files:

Because I'm interested in this topic, I decided to take a peek and see why Ahmad Tea's site is slow. Looking at the source code of their webpage I see this:

The page is requiring each computer's browser to load a large number of individual files, in order for the page to display; I see 13 javascript files here, and 3 stylesheets. Although Ahmad's server responds quickly to an individual request (I timed a page load time of 1.27 seconds for the main page), these page load times add up.

Ahmad could easily redesign their page to look exactly the same, but load much faster. One way to do this would be by consolidating their relevant info in a single stylesheet and a single javascript file. I suspect that much of the code on Ahmad Tea's site isn't even being used. Their page is relatively straightforward; I can't imagine why it would actually need more than a tiny amount of Javascript code to display the way it does. For comparison, on RateTea, I write all necessary Javascript into the page itself; this is one reason why the site is relatively fast.

In the broader picture, one simple way to avoid these problems is to not use Javascript at all. Javascript can be useful to add features to your website, but it is not worth adding any of these features if it comes for the price of slowing down your page load time from 1-2 seconds to 10-15 seconds.

What do you think?

Have you taken any useful advice from this post? If you run a website, how fast and responsive is it? As a web user, how do you respond to slow websites? How slow is too slow for you?

1 comment:

  1. Interesting read. To make matters worse, it looks like Ahmed's website doesn't even use any of those 13 javascript files. As far as I can tell, all of those files seem to be missing.