How slow can you go before your website turns into a user’s worst nightmare?

Posted on March 30, 2016 by Susanne Kappler

Does this sound familiar? You’re looking forward to checking out the new hip restaurant in town. When you get there, the staff informs you that the wait time is longer than an hour. Your stomach rumbles, it’s cold outside, and all the seats at the bar are taken. What do you do? If you’re anything like me, you’ll probably head out to the old, familiar stand-by pizza place and catch the new spot some other time — maybe.

Guess what? People who visit your websites are no different. If you make them wait, they’ll leave.

Why does site speed matter?

There are three main reasons why site performance should be a priority in your next project. The first is user expectation. Jakob Nielsen of the Nielsen Norman Group published a groundbreaking study that revealed that the average Internet user waits no longer than 8.6 seconds for a page to load.[1]

Oh, by the way, that was in 1993, before broadband became the law of the land and instant Internet gratification became the users’ mantra.

Speed expectations for the Web have since changed dramatically. A study by Forrester Research concluded online shoppers in 2009 expected pages to load in no more than two seconds.[2]

If you want your users to feel like visiting your site is a seamless experience they’re in control of, a one-second load time is the magic number. To endear yourself forever and make users feel like they directly manipulate the site, a response time of 0.1 seconds is the limit.[3]

With increasingly higher bandwidths and faster computers and mobile devices, it’s no surprise that users expect an almost instantaneous Web experience and have little patience for waiting around.

The second argument in favor of speed is Search Engine Optimization, or SEO. SEO is somewhat of a mystery to many developers and UX designers, but it stands to reason that increased performance positively affects your site’s ranking. For one, the more users engage with your site, the higher your ranking. Besides that, a faster website improves indexation by allowing faster access to crawlers.

The biggest argument in favor of faster performance may be its impact on conversion rates. If you’re still not convinced that site speed is that big a deal, consider the following numbers:

— A one-second delay in loading time could cost Amazon $1.6 billion in annual sales.[4]

— After decreasing its page load time by 2.2 seconds, Mozilla Firefox increased its browser downloads by 15.4 percent.[5]



— After a political fundraising site increased its website’s performance by 60 percent, donations went up by 49 percent.[6]

What it comes down to is simple: The faster the site, the higher the conversion rate.

What can I do to improve the performance of my website?

As you see, performance is an important aspect of usability, but one that — for the most part — cannot be illustrated in a wireframe or mockup. So it’s mainly up to developers to make sure the site’s user experience is not hampered by poor performance.

A few optimization tools are out of a front-end developer’s hands, such as browser caching or using a content delivery network. But the good news is that a lot can be done on the front end to increase a site’s speed.

Every time your site asks the server to transfer some content to the browser, it makes an HTTP request, which takes time to execute. The most effective ways to reduce load bloat may be to reduce the number of HTTP requests your site performs and to reduce the site of the assets your site requires. This can be achieved in a number of ways.

— Image and media optimization is an obvious choice. There’s no reason to serve huge files, especially when optimization tools can be seamlessly integrated in a site’s Gulp or Grunt workflow. In some cases, CSS sprites are good options instead of using separate (and larger) image files, for example for social media icon hover states.

— There are a few ways to make your CSS work in your favor. First of all, use one external stylesheet and link to it in the <head> tag. Make sure your CSS is minified to reduce its weight (again, not a big deal if you’re already using a task runner). It gets a little more complicated when it comes to writing the most optimal CSS. Generally speaking, delete any unused styles from your stylesheet before going into production.[7] Also, think about the most beneficial structure for your code before you start styling your site. The goal is to achieve your styling in the most efficient way. 

— The best JavaScript may be the one you don’t have to write. OK, that’s not necessarily true, but sometimes we forget that things can be done in CSS for which we are accustomed to using JavaScript. For example, developers used to use JavaScript for rollover effects on navigation items. Without getting into the merit of the idea in general, those effects can now be achieved with CSS only, which is more efficient. So, try a CSS-first approach instead of using the old JavaScript standby for everything.

— Of course, JavaScript is required for a ton of things, so chances are you won’t be able to do entirely without it. I don’t always use JavaScript, but when I do, I load it at the end of the body of the page. Seriously, allow the user to see your page fully even if the behavior for certain elements is not loaded yet (another reason to leave the styling to CSS). While we’re at it, loading scripts asynchronously when possible can help boost your performance. The browser blocks additional parsing while trying to load a (potentially heavy) script. By using the “async” attribute in the <script> tag, that behavior gets eliminated (unless you’re using IE9 or below). To top it off, your JavaScript should be cleared of unused or unnecessary code (“console.log” anyone?) and properly minified. 

— Don’t use that fancy framework or library unless you absolutely need it. If all you need to do is add an event handler to a button, do you really need to load the whole jQuery library for that? Frameworks and libraries can be great tools, but like everything else, should be used judicially.


So, as you get started on your next project, keep in mind that paying attention to your site’s performance is not only a matter of adhering to best practices — it’s a vital tool in making your site user friendly.

 

Resources:

55 Web Performance Stats You’ll Want to Know

Google Developers: Page Speed Insights

Ludicrously Fast Page Loads — A Guide for Full Stack Devs

A Beginner’s Guide to Website Speed Optimization

Performance testing:

Google Developers: Page Speed Insight

Pingdom