At last year's Attention! conference myself and Head of Development Mark Willis hosted a workshop on website performance. If you missed out then here is the crux of the presentation.
Performance is…
“...the accomplishment of a given task measured against pre-set known standards of accuracy, completeness, cost and speed.”
But who cares about website performance?
Everyone should care, but especially Google
- Before 2018: Google search rankings on mobile looked at content, images and code structure.
- Since 2018: Google search rankings on mobile looked at content, images and code structure and performance.
- Now:
Through both internal studies and industry research, users show they prefer sites with a great page experience. In recent years, Search has added a variety of user experience criteria, such as how quickly pages load and mobile-friendliness, as factors for ranking results.
In May, the Google Chrome team announced Core Web Vitals, a set of metrics related to speed, responsiveness and visual stability, to help site owners measure user experience on the web.
Does performance matter?
Yes. Yes it does. Performance on websites directly impacts:
- Google rankings
- Ease of use
- User satisfaction
- Conversion rate
- Accessibility
- Brands/products/services
To rank well in search engines...
…it’s all about page speed scores.
PageSpeed is a tool created and used by Google to measure the performance of a website. PageSpeed insights shows areas of your site that need improving. PageSpeed scores that are low can directly impact your presence on search results so it’s wise to rectify issues if you can, even if you can’t ‘see’ them.
What is page speed?
Page speed is made up of these three components:
- Time to first byte: gives a sense of progression
- Optimised imagery and assets
- Total requests on a page and page size
Time to first byte (TTFB)
The user will see nothing except a loading icon. The CMS is doing all the work. If it’s slow then it could be either a poorly designed CMS, sub-standard web hosting or perhaps too many plug-ins which need to load in before the web page is displayed.
Typically you’ll need your development team to answer a few questions:
- Are they monitoring this?
- Do they have any insights as to slow areas of code on the site?
- Are there any performance updates available?
- Would a better hosting environment help?
- What improvements can they suggest?
Note: Often caching doesn’t solve the problem (it just plasters over the cracks)
Imagery and assets
The internet is mainly pictures. Google’s page size target is less than 1.5 MB / 1600 KB.
Unsurprisingly images are the biggest culprit of slow page loads and camera photos are usually the most to blame as their file sizes are huge!
You can:
- Resize images to be the correct dimensions
- Optimise images for web (TinyPNG or similar)
"39% of people will stop engaging with a website if images won’t load or take too long to load.”
Total requests per page
Every request requires work and takes time. The more requests you have on a page, the greater the delay.
For example:
- DNS Lookup: 38m/s
- Initial Connection: 77m/s
- SSL Negotiation: 275m/s
- Time to First Byte: 308m/s
- Content Download: 85m/s
- Total: 783m/s to download Google Tag Manager
If you have concerns about the total requests per page you should talk to your development team about the following improvements:
- Use web browser network tools like webpagetest.org
- Investigate what the requests are and is there anyway to combine them?
- Combine Javascript and CSS into single files
- Serve as much as possibly from the same domain (if HTTP/2 is enabled)
If you need assistance with testing your website performance then get in touch - we may be able to audit your site or help recommend an appropriate course of action
Performance should be an objective
Most website builds have a ‘generate more leads / sales’ objective, but in recent years we have added an additional objective for each of our new website builds to ensure that the objective directly relates to website quality and performance.
“The website will strive to achieve the highest Google PageSpeed score possible.”
When we re-launched our website in June, our Head of Development Mark was ecstatic that he could achieve 97% PageSpeed score for our homepage, and 98% for the blog.
The biggest lesson is ‘don’t make users wait'
Be efficient. People are time poor and we want things now.
- Make pages lightweight
- Lazy load content and images where appropriate
- Minimise code libraries required
“74% of visitors on a mobile give up if a page takes longer than 5 seconds.”
Time to interactive
The use of animation should attract, but not distract.
Good animation helps:
- attract attention
- mitigate change blindness
- help tell stories on a journey
- enrich experiences
Bad animation can…
- distract attention
- overwhelm users
- hinder storytelling
- inhibit experiences
Functional animation
Animation serves as a direct result of a user interaction.
- Helps users by hinting at functionality with animations.
- Gives a feeling of progression within journeys which is important when keeping user satisfaction in mind.
- Lifts a minimal layout to feel incredibly refined.
- Can be quite complex to introduce.
Discovery animation
Animation rewards user interaction
- Allows for successful storytelling
- Works well with scrolling and swipe journeys.
- Can be distracting and overdone at times.
- Fairly simple to implement on most websites.
- Often only animates once as an unveil type display.
Passive animation
Animation gives life to otherwise dull content
- Can also be distracting from main content and actions.
- Gives an elegant and premium feel if done correctly.
- Can repeat as an animation.
Attention animation
Animation gets the attention of the user well.
- Can be seen as a bit of a gimmick sometimes.
- Should be used sparingly to generate attention at key moments for the user.
- Can be repeating.
But how does animation impact performance?
Unlike technical performance it is hard to measure perceived performance. The only real way of doing this is through customer surveys. But we can help persuade and influence perceptions.
How to manipulate perceptions:
- Not everything is instant
- Although we want things fast we know there will sometimes be a small wait
- Manage the waiting
Do not make users think
Keep a clear message. And put the user first with your content.
- People want real content
- So do search engines
- Make your message concise
- Make your message precise
- Go into detail only when appropriate
- Test and refine your navigation
Do not make users frustrated
Satisfy your users and give a sense of progression
- Don’t frustrate users before they reach your site
- Reward your users in the interface by giving interactions feedback
- Facilitate journeys on your websites
- Make journeys direct, fast and intuitive
- Use animation to convey progress
- Understand your audience and give them what they want
Challenge yourself (and your agency)
It is everyone's responsibility to make your website perform as well as possible. Challenge your dev team as to why things are like they are and work together to improve the user experience, and optimise your content and media to be delivered in the fastest most efficient way.
Hopefully we’ve given you a few things to consider to monitor the performance of your website, and tackle some key components that could improve or hinder your performance.
Remember….
Invest in user satisfaction
Technical performance: Make it fast
Perceived performance: Make it feel fast
