A white background with orange text that says `` for brands who believe ''

6 Tips For Optimising CWV and Improving CLS Score

Macauley Smith • Jun 23, 2021

6 Tips For Optimising CWV and Improving CLS Score

A computer monitor with a google logo on top of it.

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.

A graphic showing the difference between organic seo and local seo
by Peter Jones 31 May, 2022
Explore the distinctions between local and organic SEO strategies. Learn how to optimize for local searches and improve organic rankings.
A purple background with the words local seo on it
by Peter Jones 16 Feb, 2022
Learn how local SEO drives customer growth. Tap into local searches to attract more clients and expand your business reach.
A blue background with a computer screen and people standing around it.
by Peter Jones 11 Feb, 2022
Master the art of PPC marketing with our comprehensive guide. Drive targeted traffic and maximize your ROI effectively.
More posts
Share by: