- This topic has 17 replies, 2 voices, and was last updated 2 years, 5 months ago by David.
-
AuthorPosts
-
October 16, 2021 at 1:43 am #1965033Onur
Hi to all GP Team,
On this page: https://www.swtestacademy.com/java-9-functional-programming-features/
When I run the google page speed test I am getting CLS errors.
Page Speed TestWhen I debug the problem on chrome dev tools, I saw that the right sidebar is loading later than the left sidebar and content.
First content, then left sidebar, and then right sidebar is loading.
When I used the below CSS and turn-off (remove unused CSS of WP Rocket), the problem was gone.
.both-sidebars .site-content { justify-content: center !important; }
But I wanted to use remove unused CSS features by excluding some CSSs to have better speed results. Do you have any suggestions on which CSS cause this problem, which one should I exclude? Currently I am excluding the below ones:
/wp-content/plugins/enlighter/cache/enlighterjs.min.css
/wp-content/plugins/metronet-profile-picture/dist/blocks.style.build.css
/wp-content/plugins/gp-premium/blog/functions/css/style.min.css
/wp-content/themes/generatepress/assets/css/main.min.css
/wp-content/plugins/lightweight-social-icon/css/style-min.css
/wp-includes/css/dist/block-library/style.min.css
/wp-content/plugins/subscribe-to-comments-reloaded/includes/css/font-awesome.min.css
/wp-content/plugins/prismatic/css/styles-blocks.css
/wp-content/themes/generatepress/assets/css/components/comments.min.css.both-sidebars
.enlighter-t-wpcustom
.enlighterThanks,
OnurOctober 16, 2021 at 1:50 am #1965035OnurI excluded below ones but no luck.
/wp-content/plugins/gp-premium/(.*).css
/wp-content/themes/generatepress/(.*).cssOctober 16, 2021 at 6:52 am #1965183DavidStaffCustomer SupportHi there,
where did you add the CSS to your site ?
October 16, 2021 at 10:09 pm #1965793OnurAdditional CSS part in customization.
October 17, 2021 at 2:31 am #1965876DavidStaffCustomer SupportNot sure, the Additional CSS is output as inline style like so:
<style id="wp-custom-css">
You could try adding the#wp-custom-css
ID to the exclude rules.If that don’t work you would need to check with WP Rocket
October 17, 2021 at 2:57 am #1965894OnurThanks, David, I will try and let you know.
October 17, 2021 at 3:35 am #1965908OnurHi David,
I did extensive tests and found the issue by comparing the whole page source.
Below is the screenshot of the comparison result
When I disabled the below plugin, I started to get 0 CLS results. I think the other way to resolve this is to exclude its JS from delay the JS list but it will also cause other penalties.
https://wordpress.org/plugins/metronet-profile-picture/
Is there any way to show the profile pictures without any plugin?
Thanks for your help.
OnurOctober 17, 2021 at 3:37 am #1965910DavidStaffCustomer SupportWhose profile image is it displaying?
Is this your users ( ie. logged ) ?October 17, 2021 at 3:39 am #1965911OnurI found a way to upload profile pictures. I will now do it for all users on my blog.
I am getting only a CLS which is zero that’s why I am neglecting it for just now. But if you have any suggestions, I will apply to remove this one as well. 🙂
CLS zero but layout shift warning
Thanks David,
OnurOctober 17, 2021 at 3:50 am #1965919DavidStaffCustomer SupportAre you using any conditional loading of menu items ?
October 17, 2021 at 3:53 am #1965921OnurAs I know, I do not using anything for menu items. I do not have specific CSS or other things but let me check one more time my custom CSSs and get back to you.
October 17, 2021 at 4:01 am #1965929DavidStaffCustomer SupportOn initial load, only some of the menu items load, then later the rest of them do – see here:
This is not a CSS issue, as the HTML starts loading then stops as the browser does something else and then goes back to complete loading the HTML for the menu. This is similar to whats happening with your sidebars loading later. Never seen this before something definitely odd the way your site loads its content.
Its not going to cause any CLS issues as the movement is only horizontal, and the menu changing size doesn’t cause the Layout to shift.
October 17, 2021 at 4:23 am #1965943OnurThis time my other page has been broken. I opened a ticket to WP Rocket to have a feature that we can use this feature for only mobile because for desktop it is really not stable. I think also this feature is a BETA feature and maybe the best is we should wait a bit to see some progress and fixes at their side. I really got tired of debugging and fix the problems. At least, I will have zero CLS when I am not activating the remove unused CSS feature. I may do some more tests in the future and update here with my outcomes.
Thanks,
OnurOctober 17, 2021 at 6:35 am #1966022DavidStaffCustomer SupportThe link you provided scores 97 on mobile, so i am not sure what the issue is.
I don’t personally think eliminating unused CSS is going to make a big deal of difference even if it worked correctly.One option you may want to look at is the Google Font that Enighter ( syntax highlighter ) is loading. Not sure if it has an option to change the font, but using the
monospace
system font in place of a google font would eliminate the need to load a google font.October 17, 2021 at 11:25 am #1966458OnurHi David,
I have just found a chance to read the last two messages.
Those problems are going away, whenever I am disabling the remove unused CSS feature of WP rocket. I am not sure what kind of algorithm is happening behind the scene. Thus, I cannot say what is the real root cause of these CLS problems.
The link you provided scores 97 on mobile, so I am not sure what the issue is.
Onur: Yes it is a good score and thanks to the GeneratePress theme first. The thing is when I used the remove unused CSS feature I am getting 99 and 100. That’s why If I have a chance to use that function, why should not I?I will check the font-related tweaks. Even I will disable enlighten to see the results.
Thanks for your replies.
-
AuthorPosts
- You must be logged in to reply to this topic.