<div>
Normally high CLS values occur when you're loading an external resource where the external machine is slow or glitchy.<br />
<br />
<u><a href="https://webpagetest.org/result/210515_AiDcKA_1d0921394b5a87c75d2466e7c060fcd9/1/details/#waterfall_view_step1" rel="ugc">https://webpagetest.org/result/210515_AiDcKA_1d0921394b5a87c75d2466e7c060fcd9/1/details/#waterfall_view_step1</a></u> shows the problem, which in your case relates to your hosting.<br />
<br />
Take a look at the times to serve all the .css files.<br />
<br />
Following requests...<br />
<br />
1) HTML component serves slow. Likely using mysqltuner + adding in all suggested database tuning will fix this.<br />
<br />
2-8) The lag serving all these files will almost surely produce visual CLS.<br />
<br />
15) Is the likely killer. So your HTML has rendered (1), then your CSS produces massive CLS (2-8), then a font file pushes down the pipe (15) much later which will almost surely produce more CLS.<br />
<br />
To reduce CLS to near zero, serve your font file first.<br />
<br />
Also, dig into your server logs + determine how you can speed up serving your .css files, as this will also likely make a difference.
</div>


sharingsunshine

<div>
<div class="content wysiwyg-content fr-view">
I am trying to get my Cumulative Layout Shift (CLS) value down to an acceptable level for mobile. &nbsp;I am including the pagespeed readout for the website which is <br><a href="https://www.henricomg.org" rel="ugc">https://www.henricomg.org</a><br><br>Please tell me what needs to be done to get the cls value into the green and acceptable to Google.<br><br>The bottom images shows the 3 items that are causing the cumulative layout shift. &nbsp;How do I fix that problem?<br><br><br><br><a href="https://filedb.experts-exchange.com/incoming/2021/05_w20/1561105/cls1.jpg" rel="ugc"><img src="https://filedb.experts-exchange.com/incoming/2021/05_w20/1561105/cls1.jpg" class="fr-fic fr-dib"></a><a href="https://filedb.experts-exchange.com/incoming/2021/05_w20/1561106/cls2.jpg" rel="ugc"><img src="https://filedb.experts-exchange.com/incoming/2021/05_w20/1561106/cls2.jpg" class="fr-fic fr-dib"></a>
</div>
</div>


cls2.jpg

cls1.jpg


I am trying to get my Cumulative Layout Shift (CLS) value down to an acceptable level for mobile.  I am including the pagespeed readout for the website which is
https://www.henricomg.org
Please tell me what needs to be done to get the cls value into the green and acceptable to Google.
The bottom images shows the 3 items that are causing the cumulative layout shift.  How do I fix that problem?

Need CLS Variable To Be Lower

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.

Web Development

Google is an American multinational technology company specializing in Internet-related services and products that include online advertising technologies, search, cloud computing, software, and hardware.

Google

pagespeed

WordPress is a free and open-source content management system (CMS) based on PHP and MySQL for creating websites and blogs. Features include a plugin architecture, a template system and strong management, customization and search systems; through its dynamic presentation of content, webmasters have the flexibility to create websites easily.