User experience metrics basics and how to improve them
In today’s day and age, technology is all around us as our society has managed to evolve dramatically over the past couple of decades. This has, consequently, resulted in users becoming more hungry to instantly obtain the information that they require. Furthermore, they also seek to get it as quickly as possible, ultimately changing the way in which websites present the information in the first place.
User experience has emerged as a web page quality factor that has been rising to prominence, especially in the last few years. What is more, search engines have also started to pick up on it and, as of recently, have begun to incorporate it as a key ranking factor when evaluating which web pages to display in their search results.
But what exactly does user experience refer to, why is it so impactful when it comes to altering the search results and what can you do to improve it?
What exactly is user experience?
User experience, which is commonly abbreviated as UX in the field of web technologies and design, is a cumulative metric that is used to signal the overall satisfaction or aggravation of the user browsing a given web page. It consists of many individual factors including the page’s performance, accessibility and security.
In order to guarantee the best possible ranking for the given page, it is vital for every aspect to be sufficiently covered. In this article in particular, we will be focusing on Google’s ranking factors in relation to user experience (seeing as how it holds the largest share of global search queries) along with the search engine’s specially designed Lighthouse tool.
UX performance metrics
Let us start with page performance. This metric is a compilation of other individual factors that refer to the page’s loading speed and element-rendering capabilities. A report from Lighthouse will provide you with an evaluation of the given page, where each metric has one of three states:
- Good - displayed in green
- Could use improvement - covered in orange
- Requires changes - painted in red
Each of these states corresponds to the overall condition of the page, notifying you where you need to make changes along with a handful of recommendations. Let’s go over the different performance factors in some more detail.
First contentful paint, or FCP, relates to the time it takes the first element on the page to appear on the user’s screen. The element in itself can be an image or just plain regular text. In order to improve this factor, you need to reduce the overall time it takes for your page to load. Additionally, you can also preload any fonts that are going to be displayed on the page.
Largest contentful paint - LCP, is the time that it takes for the largest element to be rendered on the page. In order for you to increase this metric score, you can change a couple of things. If the largest element that needs to be painted is an image, consider reducing its file size and changing its format.
Formats such as the traditional lossy JPEGs and lossless PNGs take longer to render, especially on older devices with abnormal or outdated viewport resolutions as well as on those with slower Internet speeds. Instead, try using innovative file formats such as WEBP, which is substantially lower in size, and SVG, which consists of calculated vectors, allowing it to scale in accordance with users’ viewport dimensions.
If your LCP element happens to be a plain block of text, then consider splitting it into smaller paragraphs and using appropriate headings to minimize render time.
The next factor is the speed index. It measures how fast the given web page is populated with all of the elements from the DOM. This metric is vastly influenced by overall improvements to your website’s speed in general. However, if you want to target it specifically, then consider optimizing the main thread by reducing or separating executable processes, removing unused JavaScript and improving the execution time of the JS code that is being utilized.
Preloading fonts and establishing connections with third-party tools prior to loading the page can also help boost your score.
Time to interactive (TTI) is rather self-explanatory as evident by its name. This is the time that is measured until the entire page becomes fully functional and responsive to the user’s commands, clicks or taps.
In order to improve it, you should consider looking into the different event-handlers that are located on the given page. Making sure that they are placed and linked correctly will allow users to interact with them quicker as they will already be registered and ready to execute upon the event occurring.
Total blocking time - TBT, on the other hand, measures the time that a given page is locked from receiving user input or interaction. It is calculated by tracking the time, in milliseconds, between the FCP and the TTI.
Similarly to other metrics, performing any improvements in general will result in a better overall score not only for TBT, but for all other metrics as well, which is also why Google for example recommends not focusing on one particular metric, but rather on the entirety of the performance as a single feature. Because of this, you should aim to reduce unused CSS and JavaScript.
If you have a single CSS file that is implemented on every page on your website, then you should definitely think about splitting it into multiple smaller file instances and removing the code that you do not need. The same applies for your JavaScript files - take scripts that are not required to run on the given page. This will alleviate a lot of the stress that the different files can have on the page, ultimately increasing the speed at which it is loaded.
The final performance metric is Cumulative Layout Shift (CLS). This one in particular is quite interesting as it refers to the changes that happen in the viewport of the user. The CLS involves having elements switch places, pop-ups appearing, text or fonts changing and anything else that visually moves on the user’s screen.
To improve this metric, you need to minimize the unexpected element changes on the page and also avoid using alerts, pop-ups and weird transitions. There is quite a lot of information to be covered when it comes to CLS as it is considered an important user-centric, which we will definitely go into in a future post.
Accessibility & User Experience
Accommodating for all users is of the utmost importance. This is why factors such as accessibility have also become incredibly prevalent in the last couple of years. Standards have emerged such as the AA and AAA that webmasters need to follow and aim to implement in order to cater for their audience.
In order to aid visually-impaired users, there are a number of optimizations that you can perform, but before we can discuss them in more detail, it is important to firstly differentiate between the divergent types of visual impairments. Users can be either partially or fully blind or they could also have some type of color blindness.
Some changes you can make to your web pages are to include ‘alt’ tags on all of your images along with additional descriptive metadata for buttons, form fields and links in order to help people using screen readers to understand what the page is about and have these interactive elements sufficiently described in order to aid navigation.
Furthermore, you should also consider using colors that are in contrast with each other to help colorblind users as the different shades are more likely to pop-out. However, if you do not want to change your entire website’s color scheme, what you could do is to either add a button that can toggle page elements’ colors, or you could create a separate copy of your page and invite colorblind users to navigate to it. Just remember that the second option will cause issues related to duplicate content and you would have to use the ‘canonical’ tag to address those problems.
Do not neglect security
Having proper security implemented is also crucial when it comes to UX. Different JavaScript and CSS libraries that are commonly utilized can be a liability in certain situations if a breach or leak has occurred. Because of this, it is absolutely important to keep them updated to the latest version and to meticulously read change logs.
Above all else, make sure that your website and its pages are extremely well guarded and protected as users value security very highly, especially in today’s society. Use an SSL certificate in order to ensure information encryption of sensitive user data such as their identity and banking information. Additionally, if you can, try to avoid third-party cookies as they are a very lucrative target for hackers.
Want to know more?
This has been us covering the basics in relation to user experience. Stay tuned for a more in-depth look at every factor as we will be going over each one in our blog in the future. In the meantime, you can also check out web.dev for more information regarding UX as well as any updates for any of the metrics.