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
- Add fixed height or width to message for desktop and mobile
- Optimize loading logos
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.
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.
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.
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.
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.
Additionally, you can configure a dark veil in your message builder to keep end-users from viewing content behind your message.