How to improve Core Web Vitals thanks to THRON delivery

Business Case:

KPI to be measured

Bookmark this resource Follow

Ask a question

Was this article helpful? 0 out of 0 found this helpful

Introduction

An optimised website is one of the cornerstones of any digital marketing strategy. In order to optimise a website it is necessary to improve its performance on the basis of a series of metrics regarded as essential by Google, offering a high-quality user experience and an improved web indexing ranking.

THRON has extensive experience in the management of all phases of the life cycle of content in terms of its distribution. In fact, the use of an asset across the various channels of a business impacts on the user experience which, in turn, reflects on the business.

In this article we will discover some of the THRON functionalities for improving the performance of your digital channels and, in particular, the Core Web Vitals.

 

Contents

 

 

What are Google’s Core Web Vitals?

Web Vitals are standard metrics used to measure the quality of a user’s browsing experience on a website. Of these, there are three that Google regard as “Core”: the performance, responsiveness and visual stability of a website.

The Core Web Vitals are:

  • LCP: Largest Contentful Paint
  • FID: First Input Delay
  • CLS: Cumulative Layout Shift

LCP: Largest Contentful Paint (page load speed)

The LCP metric measures the page load performance of a website indicating the render time of the largest visible element on the screen when the page starts to load.

 

What counts is what appears within the viewport when the page starts loading while anything “below the fold” is not considered. To provide a good user experience websites must load "above the fold" content within the first 2.5 seconds and are already regarded as slow if this time exceeds 4 seconds.

 

Thanks to the Real Time Image Editor (RTIE), THRON provides its websites with images that are always adapted to the way they are accessed by each user, adjusting them for example to the device being used or the connection speed available. In particular:

 

 

Still on the topic of LCP, the implementation of a lazy loading strategy is also highly recommended. This practice makes it possible to initially load only the resources visible in the viewport when the website opens; additional resources will only be loaded once the user has scrolled down the page.

 

Through its Universal Player, THRON natively supports lazy loading functionalities. If there is more than one THRON Player on the page, only the first will be loaded initially with the others loaded later on.

 

For more details on how to use THRON Universal Player see: CAN I EMBED MORE THAN ONE PLAYER WITHIN THE SAME PAGE?

 

FID: First Input Delay (Interactivity of webpage)

First Input Delay is the time from when a user first interacts with a webpage (e.g. by clicking a link, a button or any JavaScript listener) to the time when the browser actually responds to that interaction.

 

It therefore measures the interactivity of the website on the basis of the time it takes the browser to respond to the input of the user. Other interactions, like scrolling or zooming, are continuous actions and not considered. Today, the main interaction problems on a website take place during the loading of the page, either because the code is divided into multiple loads or too much JavaScript is loaded in advance.

 

The libraries of code connected with the use of the THRON Player, like the one connected with tracking, are already minified and optimised to guarantee the best possible performance in terms of the interactivity of the page. The key is to ensure that the various libraries are inserted in the page just once and only when necessary.

 

CLS: Cumulative Layout Shift (Visual stability of loaded page)

Cumulative Layout Shift measures the movement of visible elements and the unexpected layout changes that take place during the visit of a webpage. This metric therefore regards the definition of the page layout and not the supply of the multimedia elements of which it is made up. Working out the CLS can be complicated: it is calculated as the product of two values, the impact fraction and the distance fraction, using this formula:

 

layout shift score = impact fraction * distance fraction

 

  • The impact component or impact fraction is based on the area of the browser screen affected by layout variations. The impact fraction measures the degree to which unstable elements impact the viewport area between two frames, from their position when viewed for the first time to their position once the rendering of the page is complete.
    The union of the visible areas of all unstable elements for the previous frame and the current frame, as a fraction of the total area of the viewport, is the impact fraction for the current frame.

    CLS-variazione-layout.jpeg

  • The distance fraction measures the distance (vertical or horizontal) that unstable elements have moved, relative to the viewport. It is calculated by dividing the greatest distance that an unstable element has moved in the frame by the viewport's largest dimension (width or height).

    CLS-variazione-di-distanza.jpeg

 

There are also a number of best practices that Google recommends adopting on its websites to improve CLS:

  1. Optimisation for mobile devices
    According to device's dpi it might be convenient to embed different resolutions of the image; the browser will automatically choose the most appropriate resolution according to the device in use. In order to do so you can use the "srcset" attribute of the img tag. This attribute allows you to define various image resources and “hints” the user agent to determine the most appropriate image source to display. Given a set of image resources, the user agent has the option of either following or overriding the author’s declarations to optimize the user experience.
    You can discover how to fully exploit this functionality thanks to the THRON RTIE in this article:
    How to embed images into your projects - Section "Hint: set the proper image according to device resolution"
  2. Minimise page load speed, using only necessary resources and with an optimum performance/quality ratio
    Here, too, THRON Content Delivery can be employed to optimise the size and quality of images using the RTIE (see article How to embed images into your projects) and minified libraries, while the advanced functionalities of the THRON Universal Player simplify performance management. In addition, the use of a high-performance CDN like the one provided by THRON already guarantees optimum performance in terms of the provision of multimedia resources.
  3. Security via HTTPS
    THRON supplies all resources with HTTPS protocol by default.

 

Note on the management of THRON delivery cache times:

Reactivity, in terms of the updating of content on the final channels, is a crucial aspect for THRON: content updated in real time is able to effectively attract and engage end users, guaranteeing a coherent, high-performance experience in line with the brand image.

For this reason we have configured our infrastructure in such a way as to ensure the ideal relationship between cache policy and receptiveness to dynamic changes made to assets, guaranteeing reactivity and the real time updating of content. Cache times cannot be closely personalised.

For more information see: Why is the response of some services cached

However, when the cache expires the browser does not download the resource again if it recognises it as identical to the one already in the memory. This process is not recognised by Google Analytics, which only considers the exposed cache time.

 

Example:

  • When the page is first loaded the image is downloaded (755 kB).
  • When reloading the same page with the cache still valid (second and third line), there is no data transfer.
  • When reloading the same page with the cache having expired (final line - status 304), the data transfer necessary to validate the resource is minimal (355 B) and the image is not downloaded again

    console_cache.png
Was this article helpful?
0 out of 0 found this helpful

Have any question?

Open a ticket
Comments