- This topic has 82 replies, 5 voices, and was last updated 3 years, 11 months ago by
.
-
Posts
-
Hi @David,
.site-content .content-area {
margin:auto;
}This CSS has implications. It is not making the pages mobile-friendly. I have just figured out this and again removed this CSS and my desktop CLS has been increased.
Trying to figure out how to solve this problem. Any kind of feedback and suggestions will be most welcome from GP team.
Kind Regards,
OnurCustomer Support
That solution looks fine to me!
Hi Team,
I really did not understand a problem which I faced recently. My recently created posts have almost 0 CLS but the old ones have CLS issues.
Examples:
Old Post (Has CLS issue): https://www.swtestacademy.com/xpath-selenium/
Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Fxpath-selenium%2F&tab=desktopNew Post (No CLS issue): https://www.swtestacademy.com/lambda-functions-in-java/
Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Flambda-functions-in-java%2F&tab=desktopBoth posts belong to the same theme and created in the same way but I did not understand what is the difference that causes this CLS issue.
You can run even a google page speed insight tests see the results.
If you find any clue, please let me know. It will be very much appreciated.
Thanks,
OnurHi
I take a fast look of pages…
The page with CLS 1st display the menu and the content, both centered, then it display both sidebars and the content is displaced to the left. The page w/o CLS 1st display menu, content and both sidebars.
Looking at the<head>both pages are diferent, page with CLS have a bunch of<meta http-equiv="origin-trial"....maybe these labels make the diff.Some others things:
You have 2 link preconnect (for font.googleapis.com and gstatic) between<style>labels<style> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </style>You have images lazyloaded (like java logo) but these images appears in the viewport, so you need to exclude these images from lazyload.
hope this can help.
Hi Longinos,
Thanks for your reply.
The page with CLS 1st display the menu and the content, both centered, then it display both sidebars and the content is displaced to the left. The page w/o CLS 1st display menu, content and both sidebars.
Why is this happening? I could not figure out the reason for the different loading behavior. Both pages are posts and have the same settings. Do you have any clue about this different loading behavior?
Lazy loading and fonts are the same for both pages. I think the main problem is different loading behavior. Btw, in order to reduce the CLS, I am using the below custom CSS:
@media only screen and (min-width: 1025px) {
.content-area {
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
}without this, the CLS problem was worse. Maybe we can find better solution to make this CLS numbers almost 0.
Hi
I don´t know from where come the origin trial meta, but in the page whit CLS there have near of 20 of such labels, like:
<meta http-equiv="origin-trial" content="A9RQ+LxFazAousxUwSCzaihJjHLO1UyjQp0teZKHl7WdbVjPDfHSKMd6D/ZI5MTjqClFycbl70EFd7cBJWXqKQEAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2MzQwODMxOTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
The page w/o CLS don´t have it, so pages are not the same html code.
As a personal experience big amount of data in the <head> html section may produce strange behaviours.
Can you try to disable these meta labels?Thanks Longinos!
Hi Onur.
advisable to check some of the things that Longinos raised.
CLS can increase if there is a delay in loading content, so long pages or delays in resources loading can lead to greater CLS. Try resolving the issues mentioned first and if need be we can revisit.Thanks to you all. I am trying to figure out where this http-equiv=”origin-trial” coming from and how can I disable it. Any feedback will be much appreciated.
https://blog.stephaniestimac.com/posts/2020/10/what-the-heck-origin-trials/
Not sure where they are coming from – they are strictly used for developers to trial new features, i haven’t seen them in a live site before.
You may want to temporarily disable plugins to see if one of them is adding them.
Thanks David, I am planning to try that when the site load is not high.
You’re welcome
I saw some custom fields which came from an old theme. I removed them but the results did not change. Also, I enabled and disabled all plugins rather than GeneratePress plugins. The weird thing is, if I create a new post, this problem is not happening but the old posts created previously in the old theme are problematic. There is something which causes this problem but I am still not sure what. I will investigate more and update you here if I find any clue.
Hi Onur
It maybe a no-brainer,but… can you take a look in the post code?
I will say, edit the post with the code editor rather than with the visual one.
Maybe these meta tags hare harcoded in the post and stored in the database.Sure Longinos, I will do it and get back to here again. Thanks for the suggestion.
- You must be logged in to reply to this topic.
