sharingsunshine

Chief Information Security Officer

Andrew Porter

<div>
<div class="content wysiwyg-content fr-view">
<p>I am having trouble with the CLS (Cumulative Layout Shift) regarding my WooCommerce product images. &nbsp;This is causing those pages to fail the web core vitals score that I need. &nbsp;This is what is getting flagged as the issue. &nbsp;Please tell me how to stop this shifting problem.<a href="https://filedb.experts-exchange.com/incoming/2021/08_w35/1570382/cls-problem.jpg" rel="ugc"><img src="https://filedb.experts-exchange.com/incoming/2021/08_w35/1570382/cls-problem.jpg" class="fr-fic fr-dib"></a><br>This is one of the pages that is failing - <a href="https://www.theherbsplace.com/product/super-supplemental-vitamins-minerals-p-539/" id="isPasted" rel="ugc">https://www.theherbsplace.com/product/super-supplemental-vitamins-minerals-p-539/</a></p>
</div>
</div>


cls-problem.jpg


I am having trouble with the CLS (Cumulative Layout Shift) regarding my WooCommerce product images.  This is causing those pages to fail the web core vitals score that I need.  This is what is getting flagged as the issue.  Please tell me how to stop this shifting problem.
This is one of the pages that is failing -
https://www.theherbsplace.com/product/super-supplemental-vitamins-minerals-p-539/

How To Improve CLS for WooCommerce product images?

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

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.