We all hate slow websites. But did you know people actually get stressed if they see a spinner load symbol?
On top of that, slow websites are bad for business. Mobile has become the biggest device category and is increasingly being used as a “conversion device”. Mobile page speed thus impacts conversion directly. In this blog, we’ll discuss further why and how to improve the speed of your website.
Time is objectively measured but subjectively experienced.
There is only so much you can do if a user has a really crappy or unstable connection, on a train for example. So we’ll focus both on design solutions, tricking people in making your website “feel faster” and actually making it faster by improving the load performance.
Why optimize website speed?
We are interacting with our smartphones more often but in shorter bursts.
On avg. we pick up our smartphone:
– 80 times a day,
– every 12 min we are awake,
– less than 30-second sessions.
That means a few seconds are in fact a big deal and your users are not going to be patient if your website loads slowly.
A slow website decreases user engagement and conversion.
Website speed has a direct impact on the engagement of users. Google’s research has shown that slow websites have higher bounce rates and worse overall user experience.
It stresses out your customers!
Slow websites give people more stress than watching a horror movie.
Luke Wroblewski – Conversions@Google 2018
It affects your SEO ranking
Google has always focussed on delivering the best onsite user experience possible.
Waiting for a website to load is not a good user experience.
How to optimize your website? Part 1: perception of speed!
Put the focus on the progress, not on the progress indicator. If you keep people busy, like showing the gradual progress of your website, time feels quicker.
Uncertain waits feel longer than certain waits!
Skeleton screens have become quite common and are a good example of gradual progress of the website loading.
Let’s compare a website with a face to face conversation. In a conversation, we like it when people give small cues, like nodding or “uhu-ing”. That way we know they’re still with us = certainty.
Feedback expectations in a conversation.
The same holds true for websites, we want small indicators something is actually happening. Rather than an endless looping spinner, not providing us with any information something is actually loading = uncertainty.
Website gradually loading by having an optimized critical rendering path.
How to optimize your website? Part 2: Actually make it load faster.
1. Audit & Analyze
The first step should always be analysis, gathering as much insights and data as possible. An objective look at the speed of your website in different network conditions and browsers. It might also be a good idea to check your web analytics which devices and browsers users commonly use to visit your website.
Tools to check the speed of your website:
- The Developers toolbar
- Chrome lighthouse or Google’s PageSpeed test
- Pingdom website speed test
- Webpage test
- Varvy pagespeed test
- Your web analytics
Check out this video of how to use the DevTools in your browser to audit and simulate website performance!
The tools you’ve used to analyze should give a few good pointers which files are heavy and why your web pages are slow.
Prioritize by impact and feasibility! Optimize the primary content of your website first! What are your most viewed pages? Which are most critical for conversion?
Also, question everything on your website. Do you really need as many images, that fancy JS animation? Does it improve the goals of my website and does it improve overall user satisfaction?
Don’t forget why websites suck: People like to add stuff.
Heavy images are often a big culprit. Resize images using an image editing tool (Photoshop) to the right size.
Use free image compression tools like Google’s recently released https://squoosh.app/ or automate image compression with https://imageoptim.com/, https://tinypng.com/.
- Use the best format (jpeg, png, gif, svg, …)
- Reduce the size
- Compress the file
- Automate this process
- Fewer images
- Use lazy loading for non-critical images
Clean up your code! Developers like to reuse code & plugins. But do you really need Russian error messages on a Dutch website?
Minifying means you leave out any info/ characters from a file, the browser doesn’t need to render your website.
Consider themes, plugins, apps, and widgets, basically any third-party script.
Limited the number of HTTP requests and improve server response time
Choose your hosting carefully because the response time of your server will greatly impact your website speed. Your server response time should be under 200ms. Put some thought in web server setup, configuration, capacity & maintenance.
Try to limit the number of HTTP requests you send to your server. By merging several scripts or stylesheets where it makes sense or limiting the number of images on a page.
Check out HTTP/2 and research & test how it can impact your performance.
Prioritize visible content
This is one of the best ways to make your website feel fast while actually being big and slow. It is the content that is in the visible part of the screen of your users. A.k.a. the viewport or “Above the fold”. E.g. lazy loading images which on the bottom of the page.
Leverage browser caching & and use a content delivery network (CDN).
When a user re-visits your website, make sure he doesn’t have the load the same resources twice!
Many items like logos, images, script, stylesheets etc can be cached, drastically reducing load time.
3. Re-Audit + Measure impact!
Re-audit using the same tools and exactly the same settings (e.g. location or throttling) to objectively measure your website speed.
Having a clear performance target and follow-up helps the team focus.
Document your website speed metrics:
- Time to first byte, or TTFB: The time it takes for the first byte of information to reach a visitor’s browser after a request to the server has been sent.
- First Paint: when the browser renders pixels to the screen. Google thinks this is an important user-centric metric because it answers the question, is something happening?
- First Meaningful Paint: First DOM element is being loaded. Like Image or Text. Q? Is it useful?
Time to interactive: Q? Is it usable?
Ultimately, improving the speed of your website is about the impact on your KPI’s and your user engagement. Be sure the look at the impact on those metrics!
As you can see optimizing the speed of your website is a team effort! If you want a durable long-term approach, bring together your Web Analyst, CRO, Webmaster, Developer, and IT. Even if it is a temporary project…, that will help with the awareness of website speed by the proper stakeholders throughout the organization.
Luke Wroblewski – Conversions@Google 2018
CSS spinners Gif: https://projects.lukehaas.me/css-loaders/
Special thank to:
- Stefan Van Ballegooie