[Resolved] CLS and Grid Container Issue

[metcomllc@aol.com]

On most of my pages I have issues related top grid-container that is causing them to fail CLS

For example https://www.tryhypnosisnow.com/become-emotionally-available/ <div id="page" class="site grid-container container hfeed grid-parent">

[David]

Hi there,

The problem looks related to how the Cache / Optimization plugin is optimising the CSS and lazy loading the images.

Can you first disable your cache/optimization plugin and then retest the page to check this.

[metcomllc@aol.com]

I am working on above the fold CSS. Is there a way (add html code) to lazy load my mobile header https://www.tryhypnosisnow.com/wp-content/uploads/2021/03/cropped-hypnosis-NYC-Hypnotherapy-New-York-City-hypnotist.jpg?

[David]

Personally i wouldn’t recommend lazy loading anything above the fold …. you want that content to be loaded before anything else

[metcomllc@aol.com]

I just realized that this header is for my desktop https://www.tryhypnosisnow.com/wp-content/uploads/2021/03/cropped-hypnosis-NYC-Hypnotherapy-New-York-City-hypnotist.jpg, not my mobile (I have different headers for desktop and mobile) but for some reason Google Page Insights is flagging this image “Defer offscreen images” on mobile only even though it is not being used on mobile. Any suggestions?

[Tom]

Hi there,

I’m seeing 0.03 CLS on your mobile site right now, and it’s not referencing that image. Did you get this resolved?

[metcomllc@aol.com]

My desktop CLS has been fixed but my “mobile” Core Web Vitals (Largest Contentful Paint
and Total Blocking time) still need work. I appreciate whatever assistance you can provide.

[David]

The LCP time is high because the first image in your content – which is the LCP element is being Lazy Loaded. If you check the PSI report and look at the film strip it provides you will see the image is not there on the first frame – disable the lazy loader on that image. Most lazy loaders allow you to use a CSS class to exclude them.

[metcomllc@aol.com]

Thank you for your response. I am not a developer. I use A3 lazy load and the exclusion class is skip-lazy. Do I add that to my HTML code to the image block in WordPress?

[Elvin]

Hi there,

Image blocks have Additional CSS class(es) field like this: https://share.getcloudapp.com/7KuPL9rB

You can put the exclusion class on this field.

[metcomllc@aol.com]

Thank you. I added additional CSS class and disable the WP lazy load feature but I still have the same issue with this page https://www.tryhypnosisnow.com/become-emotionally-available/ on “mobile”.

[David]

Unfortunately the method Elvin provided doesn’t work.
When using an Image Block WP outputs the image inside another element and the Additional CSS Class gets added to that and not the <img> html where it is required.

To fix that you would select the Image Block, and from the Blocks Toolbar 3 dot menu select Edit as HTML

You will see something like this:

<figure class="wp-block-image size-large"><img src="http://testsite.local/wp-content/uploads/2021/03/iamge_name.jpg" alt="" class="wp-image-6"/></figure>

That code needs to be edited where you see the classes field eg. class="wp-image-6"
Within that add a space after whatever classes are in there and include the skip-lazy class. In my example that would be:

class="wp-image-6 skip-lazy"

Once added you can use the 3dot menu to change to Edit Visually.

[metcomllc@aol.com]

Thank you. When inspecting the element/image now <img src="https://www.tryhypnosisnow.com/wp-content/uploads/2019/12/Become-Emotional…" alt="Hypnosis to Become Emotionally Available NYC" class="wp-image-4562 skip-lazy" width="382" height="393"> however the “MOBILE” Cumulative Layout Shift
and Total Blocking time still fail.

[David]

The Blocking time looks fine on the test i just ran.
The logo is the issue – its not a standard layout which is allowing for reflow…. should the mobile logo always be displayed above the Search and Hamburger icon ?

[metcomllc@aol.com]

Are you asking if this https://www.tryhypnosisnow.com/wp-content/uploads/2020/04/hypnosis-nyc-hypnotherapy-New-York-City.jpg logo should always be visible? Yes
Above the search? Yes
What is a Hamburger icon?

What are my options to address this?

[Author]

Posts