6 Tips For Optimising CWV and Improving CLS Score
6 Tips For Optimising CWV and Improving CLS Score
Move any heavy widgets below the fold
Some custom widgets require calls to third party APIs and tools which can slow down the widget and weigh down your site. Some examples of heavy widgets include maps, twitter feed, and the facebook widget. Move these below the fold to prevent them impacting your CLS and FID in a negative way, and avoid using multiple heavy widgets on the same page.
E-commerce widget layout
The main store widget loads dynamically in JavaScript which degrades your CLS score because it takes longer to load than the rest of the content, shifting the page as it does. As such, you should place the main store widget below the fold, and the product gallery widgets above the fold.
Limit your fonts
Use no more than 2 fonts on your sites, fonts are automatically downloaded and embedded within your page. There is a 50kb limit on fonts, but this automatic download speeds up page load times. This helps prevent font-flashes, commonly seen on loading pages which will lower your CLS score.
If possible, remove Google Tag Manager
GTM can download unneeded (sometimes quite heavy) libraries and code which may decrease your LCP. If you only have one or two tracking utilities, it may do more harm than good to implement Google Tag Manager. It is however possible to use GTM correctly which won’t slow down your site, but this is for experienced users only.
Reserve space for images
It is important to only load a single image above the fold and place background videos below. In order to keep your CLS score high, make sure to reserve space within the html layout for images, ads and embeds. If you don’t reserve the space the layout will shift once the image loads in.
CSS transform; property
Use the transform; CSS property over other methods of animation as it has the smallest effect on CLS. Don’t shift the Height and Width properties of an element though, as this will lower your score making your site rank worse.
