The need for speed: Optimizing your website for performance

Today's users want their websites the same way they want everything: now. Find out why performance matters and what you can do to speed things up.

Picture of Kathryn Merlihan

By Kathryn Merlihan, Front End Developer

February 11, 2016

Share

Performance is a hot topic in the web world these days. At ecentricarts, it comes up almost daily. As an agency who produces award-winning websites and applications, we hold ourselves to the latest and greatest optimization standards. Because it's important for all sites (not just our own) to be fast, I’ve put together this high level guide to performance and speeding up your site.

What is website performance?

Website performance is the speed a website loads or is perceived to load. It’s a combination of a lot of things, but the biggest factor is how quickly a site is delivered to the user. In 1993, Jakob Nielsen published these guidelines in Usability Engineering:

  • 0.1 seconds: Users will feel that response times are instantaneous. Expanding a menu or dragging and dropping something in a browser are good examples of interactions that should feel instantaneous and therefore should have a response time of 100 milliseconds or under.
  • 1 second: Responses that take 1 second to finish are OK, but the user will feel the pause. Longer wait times will make a website feel a little slow. Longer than one second and users lose their "flow of thought" and will feel like they are waiting for a site to respond.
  • 10 seconds: 10 seconds is the limit to maintain a user’s attention on a task. Anything that takes longer than 10 seconds to load should supply feedback for when the loading will be complete. Longer than 10 seconds and they will switch to something else and likely leave your site. ("Response Time: The 3 Important Limits." Nielsen Norman Group, 1993).

Surprisingly, these stats still ring true once a site is loaded and the user is engaged. For users coming to a site for the first time, however, 10 seconds is far too long for a site to load. Nowadays we’re aiming for closer to 2 seconds.

Why is performance important?

Your users

People want results as quickly as possible. Statistics show that if a site takes more than 2 - 3 seconds to load, the user bounces. Flashy stuff can be great, but if the user can’t get to the content or the topic they’re looking for, they leave. In fact, according to Kissmetrics, 47% of consumers expect a web page to load in 2 seconds or less, and 40% of users abandon a website that takes more than 3 seconds to load ("How Loading Time Affects Your Bottom Line," Kissmetrics Blog, 2016). We’ve gotten so used to having information at our fingertips that if it’s not there, neither are we!

Mobile devices

While we might be a tad more forgiving when it comes to waiting for a site to load on our phones, that window is shrinking every day. As web designers and developers become more and more diligent about site speed, our perception of speed changes with it. As noted above, there was a time when certain web authorities had set the standard of 7 - 10 seconds for a site to load. Back in the days of dial up, this may have actually seemed fast, but it’s gruellingly slow by today’s standards. In fact, 56% of users expect mobile websites to load as fast or just a bit slower than their desktop equivalent, and only 30% of users are willing to wait 6-10 seconds on a mobile device (Kissmetrics Blog, 2016).

SEO

As of 2010, Google started taking load time into consideration when ranking websites. If a site is slow, Google will drop its ranking in favour of a faster site. According to Google (and I totally agree), “Faster sites create happy users and when a site responds slowly, visitors spend less time there,” ("Using site speed in web search ranking." Google Webmaster Central Blog, 2010).

What a Google search page looks like for the word Snail

Who should care about website performance?

Well, certainly the site owner. I’ve already touched on how important site speed is to the end user, which means site owners should definitely care about making and keeping their sites fast. Ultimately, if the site owner takes steps toward having and maintaining a fast website (like being open to reducing some of the flashy, but at times, heavy components such as animations, videos, and images), they’ll see the gains with lower bounce rates, better search engine optimization, and higher conversions.

And of course the teams that make websites should care about performance. Every role from designer to developer to QA analyst plays a part in making a site super fast or incredibly slow.

By keeping performance top of mind, making informed decisions, and being open with internal teams as well as clients, we can prevent performance issues.

What are some quick performance wins?

Here are some specific steps to take and tools to use to improve site performance.


Reduce file sizes

The less weight on the server, the faster the site will run. Here are some quick and easy ways to reduce the size of the files we are requesting from the server.

  • Compress Images: Run all images through TinyPNG. TinyPNG (and TinyJPG) is a simple online tool that's both user friendly and efficient. Users can drag and drop their images from their computer right into the browser. TinyPNG uses a process called quantization where it takes the image and combines similar colours. By reducing the number of colours, 24-bit png files can be converted into 8-bit indexed colour images which are significantly smaller and still support transparency. TinyPNG also strips away unneeded metadata, further reducing the size. All this is done with little to no visible change to the file. Another great tool is RIOT. It’s locally run as opposed to in-browser but efficient in its compression abilities. It also supports progressive images, which is great for performance.
  • Minimize JavaScript and CSS: Minimizing JavaScript and CSS removes excess whitespace and formatting that’s useful for developers, but CPUs don’t pay attention to. By minimizing our files, we’re able to significantly reduce the file sizes without affecting the CPU’s ability to process the files.
A before and after compressed image of a snail

Reduce the number of server calls

The less resources (JavaScript, CSS, images, etc.) a page uses, the faster it will load and the less stressed the server will be. Some steps to reduce the number of calls are:

  • Concatenate JavaScript files: Wherever possible, concatenate JavaScript files into one file instead of multiple files. By combining multiple files into one, the number of calls is reduced and server stress is minimized.
  • Concatenate CSS Files: The same rules apply for CSS. If multiple CSS files can be combined into one, they should be. Just like JavaScript, this reduces the number of calls on the server.

Eliminate render-blocking JavaScript

Where possible, move JavaScript out of the header of the site. Best practice is to load JavaScript files at the bottom of the site after all elements on the page have been fetched from the server.

Measuring performance success

Here's a great list of tools we use here at the agency -- most of them free.
  • Webpagetest.org: A tool used for measuring and analyzing the performance of web pages. It gives a very thorough analysis of all areas of the site that are performing well and helps to indicate where there could be improvements. It can give a sense of where a site is excelling both on desktop and on mobile devices. It will also give a good sense of where a site may need some performance work.
  • Google Page Speed Insights: A great free tool. It measures the performance of a page both on mobile and desktop devices and gives easy to follow suggestions on how to make improvements.
  • Mobile-Friendly Test: Another free Google tool used to specifically determine if Google views a site as mobile friendly. Just drop in the URL to find out if the site is mobile-friendly.
  • Speed Curve: A paid service that tracks the performance of a site over time. It’s easy to use interface is a great way to visually see and track changes in site performance.

Go forth and optimize

Keeping performance top of mind throughout design and development--as well as post-launch--is essential. Setting performance goals at the beginning of a project will help you build and maintain a well-optimized site. Just like personal goal setting, the more put into it, the more gained and the better the result.

This guide just scratches the surface when it comes to the necessary steps to creating speedy sites, but I hope it helps you get a few quick wins and puts you on the path to performance gains.

Happy optimizing!