Facing CLS Issue on Website

When loading your site, I experienced a lot of layout shift, which is what’s bringing your score down.

Consider these tips:

Always precise elements size ‘width’ and ‘height’ attributes for images and videos, as well as embeds and any iFrames. Don’t use “auto” for these attributes.

Reserve required space for your web page elements so that the browser allocates the needed space (see CSS Aspect Ratio)

Never dynamically inject content above the existing one without user interaction

If you have elements added with user interaction, show them in 0.5s window, otherwise, it is counted as a layout shift.

If you need animations on your page, prefer transform animations

Don’t update DOM (Document Object Model) asynchronously

Ensure that your needed web fonts are loading fast to avoid FOIT/FOUT

Sort through loaded fonts, often we load fonts unnecessarily

Preload critical fonts

Add font-display:optional to avoid font switching issues`

For you, I would check the images on the page and make sure you have fixed height and width for those as a great starting place. Also, make sure you’re pre loading fonts.

• This reply was modified 3 years, 7 months ago by chemicloud.

Thank you very much for the suggestions I will apply these things on my website. I appreciate your efforts.

Hi, all issues are resolved on welding easy. This is an appreciation post very thankfull for your support.
Thanks

• This reply was modified 3 years, 7 months ago by danialtmrc.