Best Practices: Improve Core Web Vitals

Core Web Vitals (CWVs) are a set of standardised metrics that show how your website performs and affects a user's experience. A CMP can have an effect on your CWVs as it is oftentimes the first element to load on your page and the first element your users experience when reaching the site. In this article, we will address some recommendations that can improve your CWVs.

  Note: Before proceeding with recommendations in this article we recommend that you optimize the loading of Sourcepoint's script. Click here to learn more. 


Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. The more customized your first layer message is, the more likely it is to have an effect on CLS. Below are recommendations to improve your website's CLS:

Do not use third-party custom font

Adding an additional call to a third-party custom font (e.g. Google Fonts) for a message will cause a noticeable shift in the content that will be picked up by Google and the end-user.

The nine fonts included in the message builder will not have an effect on your website's CLS.

Screen_Shot_2022-11-09_at_1.12.16_PM.png

Add fixed height or width to message for desktop and mobile

Apply a fixed height or width to your message to reduce the shift that the message has to do to fit the screen it is loading upon.

Screen_Shot_2022-11-09_at_1.23.06_PM.png

 Recommendation

If you have a separate message configured for mobile devices, set the height of the message to 450px and the width to auto. Next, edit the different elements of the message (images, texts, buttons, etc...) to have fixed heights in order to fit with the 450px height.

When finished, test this sizing in the Stage environment before launching to the Public environment.

Optimize loading logos

The message builder allows your organization to add hosted images to your message in order to customize the message for a more native look. Using hosted images in your message however adds an additional call to the loading of the message and can have an impact on CLS.

Screen_Shot_2022-11-09_at_1.58.31_PM.png

Consider the following when deciding to utilize a hosted image in your message:

  • Consider whether a logo is worthwhile when loading your message in mobile. Is it better to just load text and buttons and reduce the amount of additional calls made by the CMP? This can also reduce the size of the message which will provide users with a better experience on smaller screens.
  • If you would like to continue to load the logo in your message here are some recommendations:
    • Ensure the logo is hosted as first party to the website in question.
    • Add a fixed width if the logo is in landscape or a fixed height if the logo is in portrait

First Input Delay (FID)

First Input Delay (FID) is the time from when an end-user first interacts with your page (e.g. click link, button, etc...) to the time when the browser responds to that interaction. 

If the end-user has a slow internet connection and the CMP is loaded via a third-party like Google Tag Manager, the website page can load before the message is delivered. During the delay between website page load and message delivery, the end-user might not be able to interact with the site. 

Allow scrolling 

Sourcepoint recommends allowing scrolling behind the message which will let end-users interact with the site while the message loads. Ensure the Disable Scrolling? setting is deactivated in the message builder to allow end-user scrolling.

Screen_Shot_2022-11-09_at_3.08.34_PM.png

Additionally, you can configure a dark veil in your message builder to keep end-users from viewing content behind your message. 

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

Comments

0 comments

Article is closed for comments.