- This topic has 24 replies, 4 voices, and was last updated 1 year, 9 months ago by Mark.
-
AuthorPosts
-
June 1, 2022 at 10:35 pm #2240931Mark
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 🙂
June 1, 2022 at 11:13 pm #2240955Fernando Customer SupportHi 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!
June 2, 2022 at 5:00 pm #2241880MarkHi Fernando,
This didn’t work (I also set to 43 minimum height in the container).
Mark
June 2, 2022 at 5:41 pm #2241891DerekI would be interested to see where this goes as well.
Mark – do you typically insert 1 you tube video per blog?
June 2, 2022 at 5:44 pm #2241892MarkHi 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
June 2, 2022 at 6:00 pm #2241897DerekHi 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?
June 2, 2022 at 8:23 pm #2241955MarkEmbedding actually works (embedding iframes), it’s the YT player in Gutenberg that is giving issues
June 2, 2022 at 10:32 pm #2242015Fernando Customer SupportCan 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!
June 3, 2022 at 5:52 pm #2242958MarkHi 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.
June 4, 2022 at 9:06 am #2243492DavidStaffCustomer SupportHi 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 useis-logo-image
If you can fix that first then we can revisit the video i necessary.
June 5, 2022 at 5:36 pm #2244496MarkHi 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
June 6, 2022 at 1:20 am #2244695DavidStaffCustomer SupportOk – we’ll be here 🙂
June 7, 2022 at 12:28 am #2245729MarkHi 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,
MarkJune 7, 2022 at 1:18 am #2245764Fernando Customer SupportHi 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.
June 7, 2022 at 9:37 pm #2246730MarkI 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.
-
AuthorPosts
- You must be logged in to reply to this topic.