What makes your website tick? Performance and Optimisation

In today’s current world web users are impatient and want things to work and
work fast. With this premise in mind, many businesses lose potential customers
when a companies’ website doesn’t work as intended or is too slow to get the
user where they need to be. The end result is often being a lost customer.

So what are the major factors that makeup having a fast and optimised website,
let’s break it down shall we.

Core Web Vitals?

Core Web Vitals are a set of standardized metrics from Google that help
developers understand how users experience a web page. While Core Web Vitals
were created for developers, these tools can be used by all site owners because
they break down the user’s real-world experience on a page.

Core Web Vitals identify user experience issues by generating a metric for three
primary areas of user experience, including:

• Page loading performance
• Ease of interaction
• Visual stability of a page from a user’s pere on different elements that impact how users interact and engage with a website. While developers need to think about “user experience” from a holistic perspective, these independent metrics help break down the different variables into smaller pieces so site owners can identify and fix technical issues across their websites.

It’s important to remember that these metrics
don’t tell the whole story about the user experience on a website, but each
metric can be pieced together to help developers troubleshoot in an efficient
and methodical way.

Let’s take a dive into the three main metrics included in Core Web Vitals to
improve your websites today!

1. Largest Contentful Paint (LCP)

Largest Contentful Paint is a Core Web Vitals metric that site owners can use to assess user experience and see if a user will find a page useful based on the render time of the largest blocks visible to an audience.

Site owners need pages on their sites to load fast to create an enjoyable user
experience. Not only is load time a critical factor for a positive user
experience, a page that loads quickly is more likely to rank higher in Google.
Plus, snappy load times have been shown to impact engagement and conversion
rates compared to a page with slow loading times.

What does LCP measure?

LCP measures the time it takes different content blocks to load within the user
viewport (current screen). This metric only tells you how quickly content
sections render on the visible screen, and nothing below the fold is considered.

• Images
• Video poster images
• Background images
• Block-level text

Site owners should aim for LCP within 2.5 seconds of when a page starts loading.

2. Cumulative Layout Shift (CLS)

Site owners need to make it as easy as possible to engage with links and buttons on a site to drive sales and conversions. Cumulative Layout Shift is a metric that identifies links or buttons that shift after a web page has loaded, and reflects the level of difficulty users will experience when trying to engage with elements on your site once a page renders.

UX and design are vital components of a good user experience, and a user will
become frustrated if a web page shifts elements while a user is reading. CLS
helps developers determine if images or links shift on the page so site owners
can improve usability, drive click-through rates, and improve online sales.

What does CLS measure?

CLS measures whether elements in the visible viewport shift from their starting position between two rendered frames. In simple terms, this metric helps site owners understand if content like text, buttons, and banners are pushed around while a user is reading content on a given page.

Elements that change position can cause users to become confused and hinder
their experience on a page, so it’s important to ensure all content stays in
place after a page loads on the user’s device. CLS looks at core metrics to
determine the visual stability of a page from a user perspective by considering
several factors:

• Layout shift
• Impact fraction
• Distance fraction
• Site owners should maintain a CLS of 0.1 or less.

3. First Input Delay (FID)

Online consumers want pages that are snappy and easy to engage with. First Input Delay measures input latency (the time it takes a page element to respond from a user’s input) to identify pages that could cause your audience frustration.

Modern websites use an array of advanced technologies and dynamic content
widgets to serve content to their audience. While this type of content can
improve content delivery, these enhancements can cause delay times that require
a user to wait for their browser to act on their input.

Developers need to reduce the time users spend waiting for a browser to respond
to their input to improve engagement and usability across the site.

What does FID measure?

FID measures how responsive a page is when loading element inputs from a user. This means that FID only records events like clicks and key presses.

Site owners should aim to provide a good user experience with FID below 100
milliseconds.

It should be noted that FID is difficult to measure because this data can only
be measured in the field. This means that your score will depend on variables
outside of your control, like the device capability of users and Internet speeds
as experienced by your audience.

Other Performance Metrics

As we discussed, Core Web Vitals offer a host of information that developers can use to improve their websites for the user experience. Along with the main metrics listed above, developers can also understand how their code impacts the way users consume content on their site.

While not considered part of user experience metrics, these metrics quantify lag
times or other technical factors that can negatively impact how an online
audience engages with a web page, so let’s take a quick look at a few other
metrics you can use to understand the experience visitors have on your site.

1. First Contentful Paint

First Contentful Paint (FCP) measures how long it takes for a user’s browser to render DOM elements (images, non-white elements, and SVGs). This metric identifies render-blocking resources and is measured in seconds, with a range of FCP scores:

• 0–2 seconds: Green (fast)
• 2–4 seconds: Orange (moderate)
• 4+ seconds: Red (slow)

2. Speed Index

Snappy websites offer enhanced online experiences, and Speed Index (SI) shows you the average time that content on your site takes to display to a user. This metric will identify excessive JavaScript on a page and is measured in milliseconds, with a range of SI scores:

• 0–4.3 seconds: Green (fast)
• 4.4–5.8 seconds: Orange (moderate)
• 5.8+ seconds: Red (slow)

 3. Time to Interactive

Time to Interactive (TTI) is the amount of time it takes for the content on a page to become functional for it to be fully interactive. TTI helps you identify pages with unnecessary JavaScript and is measured in seconds, with a range of TTI scores:

• 0–3.8 seconds: Green (fast)
• 3.9–7.3 seconds: Orange (moderate)
• 7.3+ seconds: Red (slow)

4. Total Blocking Time

Total Blocking Time (TBT) helps site owners assess how long a web page responds to specific user input. This metric will identify pages with unnecessary JavaScript and is measured in milliseconds with a range of TBT scores:

• 0–300 ms: Green (fast)
• 300–600 ms: Orange (moderate)
• 600+ ms: Red (slow)

5. Page Performance Scores

A Page Performance Score is a single metric that considers all of the important user experience metrics in Core Web Vitals. This score uses an aggregate scoring system across all mobile and desktop visits. It takes the weighted average to deliver a single score to understand pages that need closer examination quickly. While these metrics are simplified in the Page Performance Score metric, developers can reference scores in each category based on the specific score of 90 (good), 50–90 (needs improvement), and below 50 (poor).

Conclusion

With all these factors in mind, how does your current website measure up? Do you think it could be optimised? Of course, this is just the tip of the iceberg with regards to having a first-class website capable of generating more leads and in turn more customers. Various design elements and user experience also play a huge role in how people interact with your site. CTAs and funnelling your users to where they need to be is a prime example. Not to mention SEO, however, looking at your Core Webvitals and Performance indexes is a great place to start.