Archived topic
CLS in 1st page element
11 replies · Started by Longinos on March 11, 2021
Hi there
I´ve upgraded to GPP 2.0.0-alpha3 and now I have CLS in the 1st element of the page. Now this 1st element is secondary navigation, but if changed to primary navigation, then the cls is here.
Have a GenerateBlock element tyoe Page Hero and use autoptimize to inline all css.
Test I have done:
1.- Don´t inline all css, combine all files (not the inlined css) -> no cls
2.- Don´t put the GenerateBlock w7 and w/o all css inlined -> no cls
I´ve provided 2 url. Number 1 is the site with gpp upgraded (and cls issue), number 2 is a site w/o gpp upgraded (is gpp 2.0.0-alpha2), site structure is similar in both.
Some clue? Can I made some test?
Hi there,
Have you sorted this out?
I've ran both sites on Google PSI and both yield 0 CLS.
First link - https://share.getcloudapp.com/9Zu81Z17
Second link - https://share.getcloudapp.com/Qwu9Zpm6
Let us know.
Hi Elvin
In the first site we have changed to use autoptimize file, so not css inlined for now.
I will change it to inline css and then have CLS in navigation so you can test.
And you need to look at the Lab Data, not the Origin Summary, these changes 1 time each moth.
P.D. You need to check the desktop version. In mobile version no navigation bar is showed, so no cls.
Hi there,
Are you sure the Page Hero has any effect on this? I'm not seeing how it would be connected.
If it's something in the navigation, the best thing you can do is un-pick the navigation by removing items one by one to see if one is causing it.
Hi Tom
I say it (the hero page element) as informational only.
Is the secondary nav. If I unset the secondry nav and let only the primary, no cls.
No matter what number of elements have in the secondary menu.
If the primary is in the off canvas panel, then no cls.
So the cls is when 2 menus are on top of page.
P.D. No cls whit LH in chrome. PSI report cls with the 3bar icon of the off canvas.
P.D. 2: I´ve swiched to use autoptimize files, don´t inline it. CLS have a bigger ipact on score thant have 1 critical chain.
So right now I'm seeing 0 CLS on both pages - is this because you removed the menu items?
What if you add menu items without dropdown menus?
Hi, Tom
No, it is because I´ve switched from inline all css to get all css unified in 1 file.
Now the pages have 1 big css file (17Kb) and some css inlined like generate-style-inline-css or generate-secondary-nav-inline-css.
The CLS comes when secondary navigation is in header and all css is inlined.
In this condition the elements origin of the CLS are:
div.inside-navigation.grid-container.grid-parent and div.inside-navigation.grid-container
If the primary menu is moved to the offside canvas, then some times have cls in and some times not, in the element <span class="gp-icon icon-menu-bars">.
In all cases if the css are in a file then no cls.
Seem like whe all css is inlined the order and/or the speed that css is applied are diferent than when the css is in a file.
I´ve decided switch to use file because the impact in rating of cls is bigger than that having chaining of critial request (1, the css file)
Sorry for my very bad english.
Strange, the only reason I could see inlining being a CLS issue is if it was being loaded too late/not in the <head>. I'm not sure why there would be a difference between the CSS being in a file vs. inline if they're both loaded in the same area.
Either way, nice to see the 0 CLS score - performance looks great :)
Yes, when the css is inlined is at the same point that the autoptimize css file, in the head.
Maybe some thing related to centered alineation with flex?
Not sure how that would affect it really. The CSS should be identical whether it's inline or in a file. Maybe the file is deferred?
No, the file is not deferred in any way. But the inlined css takes less time that a file. The file need time to conection, download and apply the css.
But is only a hipotesis trying to explain the isue.
Very strange indeed. I'll keep an eye out for similar issues.
