Poor CLS scores when using Videp or YouTube elements in Gutenberg

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!

Hi Fernando,

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

Mark

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

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

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

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?

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

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!

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.

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.

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

Ok - we'll be here :)

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

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.

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.