How does website performance affect user experience?

By Rickard Dahlstrom | Posted Aug 7, 2015 | 4 min. (710 words)

We all know that website performance is important. But how important is it and what can we do to improve it?

Many companies and researchers have spent a lot of time looking into performance. From all of this research, one thing is clear: a fast page does matter. These are some of the things we can learn from them.

“A 1 second delay in page response decreases customer satisfaction by 16%”

“50% of people will tell others if they have a negative experience on your site”

“Facebook pages that are 500ms slower, result in a 3% drop-off in traffic”

“64% of smartphone users expect pages to load in less than 4 seconds”

“If Google increased page load by +500 ms, they get 25% fewer searches”

“52% of online shoppers claim that quick page loads are important for their loyalty to a site”

“73% of mobile users say they’ve encountered a site that was “too slow to load”

What? My page went slow overnight!

I have experienced this and I think many other companies have done the same too. Building (in our mind) the most awesome web page… until one day someone says, “Hey! why is the page so slow?”

Small tips that makes a big difference

Compress images

Small images, big issues. It’s obvious to optimize big images, but every image makes a difference. It should be part of your routine or even better, your automatic workflow. I mostly use .png and for that I find tinypng.com the best image compressor for the following reasons.

Preserves the image quality
They have a drag and drop web page. Super handy
Photoshop plugin available
Works as well as a npm packages

The last thing I love. You can automate your image-compression-process, which will ensure that all images get compressed without wasting your time.

Check out the grunt-package or the gulp-package for installation guides.

External JavaScript are sometimes slow

On a modern website we can expect tons of JavaScript. This can really slow your site down. If you’d like to see your script performance in real-time, Ghostery is the tool.

Ghostery is a chrome extension that lets you disable external JavaScript files. This is also useful in the development environment, if you have scripts you don’t need while you develop. Such as analytics scripts or other tracking scripts.

Be alert before your site gets slow

Two great tools to find out what could make your site load faster is Google’s page speed and Yahoos Yslow. They both come with different choices of implementation. The one I would like to highlight is the npm implementation. Why? Cause you can add it to your build and it will warn you when you are in slow-site-risk-zone. The more code and files you add the higher risk for slow pages. Always keep track of your status while you develop.

This is a screen shot of the grunt plugin based on google page speed.

$ grunt pagespeed

Google page speed: grunt, site
Yahoo ySlow: grunt, site

Remove unused CSS

I know! Keeping track of the CSS is hard, what is used and what’s not? For a long time we’ve been lacking good tools to help us keep the CSS small. So far I have only found one tool that I think does the job. UnCSS, which is a npm package. It parses your CSS files and writes it to a new file if it finds a matching CSS rule in your markup. NO match NO output. What I found really good too, is the JavaScript support. If you dynamically inject a CSS-class or HTML element, it will take this into consideration as well.