Increase Website Performance With Three Metrics

Jan 25, 2024

The web is a rapidly growing medium. With thousands of new sites registered daily, how do you gain an edge over competitors? One overlooked category that improves your website and helps increase user engagement time is performance. Performance matters! Website performance is pivotal in creating a positive user experience, enabling accessibility and increasing traffic. Inadequate performance can alter these metrics and become a liability, creating a more challenging environment for a business to thrive. Improving performance will also lead to better Search Engine Optimization (SEO).

There are many metrics for performance. We’ll be covering improvements for three: Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) and Total Blocking Time (TBT). With the current Lighthouse version 9, the three cumulative metrics account for 70% of Google's Lighthouse performance score.

Cumulative Layout Shift (CLS) is one of the easiest user experience metrics to understand. Individual components on a given page can make or break a user's experience. Sometimes users do not get what they expect when they initially load a page. Each component must have a predictable action for a user.

Content size entails setting a width and height to selectors to reduce content shift. It also gives users with slow connection an understanding that content will be loaded in that location once the render process completes. Some elements take longer to load, affecting CLS in a negative way. For example, responsive images require additional coverage. Consider setting its aspect-ratio or converting the element into absolute while setting its pseudo-selector with a top padding percent.

Animations are a unique way to make a page enjoyable to the user, when done correctly. Avoid using positions (top, right, bottom, left) and width/height for animations. Instead, use the transform selector and its translate attribute for position. For more flexibility, incorporate margin selectors. The transform selector does not trigger layout unless absolutely necessary.

Web fonts are becoming an increasingly popular method of branding for a website. They can be implemented internally or called on by other sites. A user with slow connections may experience problems viewing webfonts. In these cases, browsers typically show the regular version until the file loads. Once loaded, if the browser supports webfonts, it will switch to the correct version automatically. Otherwise, the user will receive default fonts.

Largest Contentful Paint (LCP) metric measures how much additional time is spent rendering an element (image, video, text). To provide a great user experience, aim for a metric score under 2.5 seconds. To improve LCP via text, use the same strategy used for CLS. To reduce LCP speeds for images, optimize the image with the following.

The entire process for Largest Contentful Paint is to make its element (image, video, text) render to the page as quickly as possible. These strategies help prioritize important elements in the network tab. Any JavaScript files that will not be required in the initial viewport load should be deferred for later.

Total Blocking Time (TBT) is a performance metric for measuring load responsiveness on a page. While it is the last category in this article, it also has the highest weight of 30%. TBT measures the time a page is blocked from responding to a user's input, whether that input is mouse clicks, screen touches or keyboard presses. Time to Interactive (TTI) measures how long a page takes to become responsive. First Contentful Paint (FCP) is when the browser renders the first bit of content from the Document Object Model (DOM). TBT is the sum of all periods between FCP and TTI. To improve this category, you must first break down the in-house and third-party scripts.

As a result, Total Blocking Time is the most impactful performance metric. Time to Interactive and First Contentful Paint both play huge parts in TBT and its main thread. Consider analyzing either FCP or TTI if stuck on TBT.

All in all, performance is a pivotal category that drastically affects user experience, engagement, and traffic. Follow these performance category tips to gain an edge over competitors, improve SEO, and help improve your site's performance metric by up to 70%. In March 2023, Lighthouse version 10 will be released that accounts CLS, LCP, and TBT to be 80% of the metric. Time to Interactive will be removed from the metric and it's 10% will be added to CLS to be 25% (was 15%). Don't forget, performance matters!