[Support request] Poor CLS scores when using Videp or YouTube elements in Gutenberg

Home Forums Support [Support request] Poor CLS scores when using Videp or YouTube elements in Gutenberg

Home Forums Support Poor CLS scores when using Videp or YouTube elements in Gutenberg

  • This topic has 24 replies, 4 voices, and was last updated 1 month ago by Mark.
Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #2240931
    Mark

    Hi there,

    We’re in the process of moving to Generatepress in order to try and improve CWV.

    We are getting high CLS scores when embedding YouTube videos using either the YouTube or Video elements in Gutenberg (we are running the latest version of GP & Premium).

    However, the number drops to almost zero if we use the “custom HTML” element and embed with an iframe. This good score similar to the number on the live page which does not use GP.

    Here is the report: https://rb.gy/gfae4t

    We prefer to use the YouTube or Video element as that is what we do on another GP site (and we have no issues there). We prefer not to mess around with the dimensions in Custom HTML.

    Thanks for your help 🙂

    #2240955
    Fernando
    Customer Support

    Hi Mark,

    Try placing the YouTube Embed Block inside a Container Block, then set a minimum height as such: https://share.getcloudapp.com/6quzkdyA

    Try something like 43vw.

    This will allow you to reserve/allocate a space for the YouTube Embed Block: https://share.getcloudapp.com/6quzkdyA

    Hope this helps!

    #2241880
    Mark

    Hi Fernando,

    This didn’t work (I also set to 43 minimum height in the container).

    Mark

    #2241891
    Derek

    I would be interested to see where this goes as well.

    Mark – do you typically insert 1 you tube video per blog?

    #2241892
    Mark

    Hi Derek,

    Yes. Sometimes two. I’m testing on pages with just the 1 video though.

    I’d prefer to use the youtube player Gutenberg element as that’s foolproof to use. Having to use iframes means we have to manually play with size ratios and it gets messy

    #2241897
    Derek

    Hi Mark,

    Yes, I am currently adding 2 videos as well. I would be interested to see how you get this fixed as I am looking for the same solution. I always thought the embed function was ok to use. How sure are you that it is these embedded videos that are causing CLS issues?

    Have you tried adding a lazy load plugin that only loads the videos as the user gets to them?

    #2241955
    Mark

    Embedding actually works (embedding iframes), it’s the YT player in Gutenberg that is giving issues

    #2242015
    Fernando
    Customer Support

    Can you try placing the T in a Container Block once more? I’ll try to observe what’s occurring. This is the link I’m looking at: https://staging.kayakguru.com/floating-paddle/

    If you use a YouTube Block, there should be an option to retain its aspect-ration on all screen sizes. You can also turn this off if you prefer: https://share.getcloudapp.com/bLuBJZ5y

    Hope to hear from you soon!

    #2242958
    Mark

    Hi Fernando,

    Keeping the YouTube block and switching off “resize for smaller devices” has dropped the desktop CLS right down, and slightly reduced the CLS for mobile to 0.355.

    It needs to be close to zero or 0.02 as per the live version.

    I then put the YT block into a container and the CLS went up to 1.3 seconds (with “Resize for smaller devices” on).

    Then, with the YT block still in the container (with “Resize for smaller devices” switched to off), the CLS went back down to 0.355 again

    I have left the page like this.

    It seems that to container makes no difference.

    #2243492
    David
    Staff
    Customer Support

    Hi there,

    when i check the Page Speed Insight report you provided above, the main CLS issue i see is related to Logo.
    The Logo is being lazy loaded and optimized by Shortpixel which looks to be messing with its size. Best to exclude logos from that process. Most image optim plugins allow you to exclude imgs with a specific CSS class. For all the GP logos you can use is-logo-image

    If you can fix that first then we can revisit the video i necessary.

    #2244496
    Mark

    Hi David,

    I added the image in after my last comment. I appreciate the feedback though. We’re working on not lazy-loading the image.

    Note I’ve run more tests and the CLS for the pages is exactly the same as it was before I added the logo.

    I’m going to finish off the redesign work to help stop any potential conflict in optimisation work. Will ping back when I’m finished (in the next day or two).

    Thanks

    #2244695
    David
    Staff
    Customer Support

    Ok – we’ll be here 🙂

    #2245729
    Mark

    Hi David,

    I’ve completed most of the theme setup now. The logo has also been omitted from lazy-load.

    The CLS is poor on all pages regardless of video, although video pages are much worse. In fact all metrics are poorer than what I was expecting.

    I’ve created a similar home page to the live version. The live site

    There are the URLs I’m looking at are in the private section.

    For comparison, here is another site on GeneratePress which has been set up fairly similarly (in the private section) The metrics are good for this site.

    Hope you can help

    Thanks,
    Mark

    #2245764
    Fernando
    Customer Support

    Hi Mark,

    I tried viewing your site with and without WP Rocket to check if the CLS is being caused by a setting you have in WP Rocket.

    Screen recording with WP Rocket: https://share.getcloudapp.com/Wnu7EzO7

    Without: https://share.getcloudapp.com/5zurJWQ5

    As shown in the videos, the CLS seems to be coming from a setting in WP rocket.

    Can you try disabling settings that optimize CSS for instance in WP rocket and see how it goes? Are you merging CSS?

    Hope to hear from you soon.

    #2246730
    Mark

    I don’t believe we do. The Combine CSS Files (Combine CSS merges all your files into 1, reducing HTTP requests. Not recommended if your site uses HTTP/2) is unchecked.

    I’ll test settings and get back to you once I get confirmation on aspects from WP Rocket support.

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