Archived topic
CLS Issue
21 replies · Started by Ana on February 1, 2022
Hello, I've been trying to solve a CLS issue on my site, as all the pages are showing .50 CLS. Over 130 have exactly the same issue. Page Insights shows the cause of the CLS to be
Site
<header class="site-header" id="masthead" aria-label="Site" itemtype="https://schema.org/WPHeader" itemscope="">
0.138
Is there anything I can do to fix this? I use WPRocket as a caching plugin and Cloudflare as CDN.
Thanks,
Ana
Hi Ana,
Are you minifying and combining CSS files through WP Rocket? Could you try disabling these settings if so, and see if this is what’s causing the issue?
If this doesn’t work, could you also try disabling WP Rocket temporarily to rule out if a different setting in WP Rocket is causing the issue?
Moreover, may we also have the link to the site in question so we can check from our end as well?
Hope to hear from you soon! :)
Hello,
I'm not minifying either CSS, Java, or HTML all of those settings are off. The same goes for Cloudflare as I think it causes issues on the front end. The site is homemadepizzapro.com and as of today, there are 138 pages showing the same CLS issue.
On another note, I just updated to WP 5.9 and now I'm also having issues saving the posts. I can't save any post that includes a reusable block unless I convert the reusable block into a regular block. If you have any guidance on this issue as well, it would be greatly appreciated.
If you need any other info, please let me know.
Thanks,
Ana
Hi Ana
I ran a quick test for your website, and found that these elements in your website are loading late: https://share.getcloudapp.com/6quEbrq6
Also see: https://share.getcloudapp.com/rRuNgj4e
This may be related to how WP Rocket is optimizing the CSS loading.
Can you try disabling lazy loading and see if this addresses the issue?
See this for reference: https://wp-rocket.me/blog/lazy-loading-wordpress-5-5/#:~:text=Google%E2%80%99s%20dedicated%20article.-,How%20to%20Disable%20Lazy%20Loading%20in%20WordPress%C2%A0,-There%E2%80%99s%20more%20to
With regards to having issues saving posts, may we now if there’s a specific error message upon trying to save?
Hope to hear from you soon! :)
Ok, I enabled lazy loading in WPRocket so it would deactivate the native lazy loading from WP, as per the attached article you sent me. There has been no change in CLS. The same error persists.
For example: Here are the results of this post in the CLS tab.
Home » Oil in Pizza Dough: Here’s Everything You Need to Know Oil in Pizza Dou…
Site
<header class="site-header" id="masthead" aria-label="Site" itemtype="https://schema.org/WPHeader" itemscope="">
0.138
This is causing a CLS of .50 on all pages.
As to the saving of posts, there is no error. When you open an existing post that has reusable blocks, it won't update or save unless the reusable blocks are converted to regular blocks. WP doesn't show any errors when trying to update, it just freezes and won't do anything unless you reload the post.
Thanks,
Ana
Hi there,
can you provide a URL to that post ?
Here you go:
https://homemadepizzapro.com/oil-pizza-dough/
I'm also struggling with not being able to save posts unless I convert the reusable blocks to regular blocks. That didn't happen before the latest WP update.
Thanks for your help.
Ana
On initial load i see the Top bar appear without any icons, then the navigation loads withiout icons, and then those icons load, this causes elements to be pushed down as each part of the content is loaded and the various styles are added.
I would suggest speaking with Ezoic as it looks related to the Optimzations they are adding to your site.
Reusable block issue - does this happen if you create a new reusable block on a new post? Or is it only happening with existing reusable blocks ?
Ezoic is making my life super difficult. I can't wait to find an alternative, but still don't have enough traffic to switch.
As to the reusable blocks.
It happens with existing reusable blocks. I have not tried adding new reusable blocks. I did update the existing reusable blocks to see if I could fix the problems, but it didn't work.
Thanks,
Ana
Not sure what we can do with the JSON resuable block issue as its not a theme related issues and the reasons for it are not clearly documented in WP's error reported.
If you can right click > inspect the editor, to open the developer tools, and then try publishing the change, so it throws the JSON error ... Are there any red errors in the developers tools console ?
Might give us a pointer on whats causing it.
Good morning,
As soon as I place a pre-existing reusable block, a ton of red errors show up on the screen. It appears repetitive, the same error along the page. Here's what the error says.
version 3.3.2
deprecated.min.js?ver=8778985ac0dfb16f24f8ef86d0718f43:2 wp.compose.withState is deprecated. Please use wp.element.useState instead.
i @ deprecated.min.js?ver=8778985ac0dfb16f24f8ef86d0718f43:2
deprecated.min.js?ver=8778985ac0dfb16f24f8ef86d0718f43:2 wp.compose.withGlobalEvents is deprecated since version 5.7. Please use useEffect instead.
i @ deprecated.min.js?ver=8778985ac0dfb16f24f8ef86d0718f43:2
settings.js?v=1643281970&ver=287:1710 Page: null
wpil_admin.js?ver=1642509237:157 Object
blocks.min.js?ver=28d5b8f8805a22435cbdc51927067812:2 Updated Block: core/cover
blocks.min.js?ver=28d5b8f8805a22435cbdc51927067812:2 Updated Block: core/button
blocks.min.js?ver=28d5b8f8805a22435cbdc51927067812:2 Updated Block: core/cover
blocks.min.js?ver=28d5b8f8805a22435cbdc51927067812:2 Updated Block: core/cover
blocks.min.js?ver=28d5b8f8805a22435cbdc51927067812:2 Updated Block: core/gallery
blocks.min.js?ver=28d5b8f8805a22435cbdc51927067812:2 Updated Block: core/cover
wpil_admin.js?ver=1642509237:157 Object
jquery-migrate.min.js?ver=3.3.2:2 JQMIGRATE: Migrate is installed, version 3.3.2
3style-handler.js?ver=1.1.0:15 Uncaught (in promise) TypeError: wp.data.select(...).__experimentalGetParsedReusableBlock is not a function
at cssObjectMaker (style-handler.js?ver=1.1.0:15:79)
at style-handler.js?ver=1.1.0:36:3
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17360
at Array.forEach (<anonymous>)
at n (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17349)
at Object.emit (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17494)
at i (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17681)
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:18690
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:16310
at b (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:8590)
DevTools failed to load source map: Could not load content for chrome-extension://eakacpaijcpapndcfffdgphdiccmpknp/scripts/content_page.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for https://homemadepizzapro.com/wp-content/plugins/lasso/admin/assets/js/bootstrap-select.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Do you have any cache plugins enabled on the site ? If so can you disable them.
I deactivated WP Rocket and the problem persists.
This shows in yellow in the inspect console
deprecated.min.js?ver=8778985ac0dfb16f24f8ef86d0718f43:2 wp.compose.withState is deprecated. Please use wp.element.useState instead.
i @ deprecated.min.js?ver=8778985ac0dfb16f24f8ef86d0718f43:2
deprecated.min.js?ver=8778985ac0dfb16f24f8ef86d0718f43:2 wp.compose.withGlobalEvents is deprecated since version 5.7. Please use useEffect instead.
This shows in red in the inspect console
Uncaught (in promise) TypeError: wp.data.select(...).__experimentalGetParsedReusableBlock is not a function
at cssObjectMaker (style-handler.js?ver=1.1.0:15:79)
at style-handler.js?ver=1.1.0:36:3
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17360
at Array.forEach (<anonymous>)
at n (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17349)
at Object.emit (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17494)
at i (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17681)
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:18690
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:16310
at b (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:8590)
2style-handler.js?ver=1.1.0:15 Uncaught TypeError: wp.data.select(...).__experimentalGetParsedReusableBlock is not a function
at cssObjectMaker (style-handler.js?ver=1.1.0:15:79)
at style-handler.js?ver=1.1.0:36:3
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17360
at Array.forEach (<anonymous>)
at n (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17349)
at Object.emit (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17494)
at i (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:17681)
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:18690
at data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:16310
at b (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:8590)
What blocks are inside the reusable block ? Can you link me to a post and explain where i can see one ?
Theres a possibility it contains out of date code. So you may need to rebuild them,
Blocks: Heading, Paragraph, Image, Post List, and Product list.
Here's a sample page: https://homemadepizzapro.com/how-to-preheat-a-pizza-stone/
The reusable blocks are the advertiser disclosure section at the top of the post. The Ooni section at the center of the post.
And everything that is at the end after the Last Slice Section. Starting with Enjoy.
