[Resolved] CLS and Grid Container Issue

Home Forums Support [Resolved] CLS and Grid Container Issue

Home Forums Support CLS and Grid Container Issue

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #1728471
    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">

    #1728508
    David
    Staff
    Customer Support

    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.

    #1728608
    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?

    #1728861
    David
    Staff
    Customer Support

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

    #1728875
    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?

    #1730058
    Tom
    Lead Developer
    Lead Developer

    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?

    #1730073
    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.

    #1730307
    David
    Staff
    Customer Support

    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.

    #1730317
    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?

    #1730389
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1731269
    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”.

    #1732142
    David
    Staff
    Customer Support

    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.

    #1732279
    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.

    #1732322
    David
    Staff
    Customer Support

    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 ?

    #1732364
    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?

Viewing 15 posts - 1 through 15 (of 34 total)
  • You must be logged in to reply to this topic.