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
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.
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
Remove unused CSS
Yahoo’s best practice
This is the best practice list from Yahoo’s Yslow page.
- Minimize HTTP Requests
- Use a Content Delivery Network
- Avoid empty src or href
- Add an Expires or a Cache-Control Header
- Gzip Components
- Put StyleSheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Reduce DNS Lookups
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
- Make AJAX Cacheable
- Use GET for AJAX Requests
- Reduce the Number of DOM Elements
- No 404s
- Reduce Cookie Size
- Use Cookie-Free Domains for Components
- Avoid Filters
- Do Not Scale Images in HTML
- Make favicon.ico Small and Cacheable