Archived topic
Avoid large layout shifts
3 replies · Started by Simon on November 5, 2021
Hi
I have fixed all the problems I can address under the heading 'Avoid large layout shifts' on GTMetrix, but there is one that is always there that I cannot fix.
"These DOM elements contribute most to the CLS of the page."
<html lang="en-GB" style="margin-top: 80px;">
I think that must be you, not me! I'm using GP Premium with Generate Blocks, and it has appeared on other sites.
Can we deal with it?
Thank you
Hi there,
you can see the GP Header Template here:
You'll notice it only has this:
<html <?php language_attributes(); ?>>
Which would result in this HTML:
<html lang="en-GB">
Whereas the element being reported by GTMetrix has an inline style: style="margin-top: 80px;"
That style is not in the theme template, so the only way it get there is through Javascript adding it, so another plugin / function is adding that style.
Thing is - if i test your site i do not see that, but one of the GTMetrix tests i saw a top bar banner ( in the filmstrip ) thats not present when i view the site... do you have a dynamic top banner that is added to the site ?
Wow David! Good investigative work,
Yes, I'm using the plugin: WP BrowserUpdate to show users when their browsers are more than one behind the current version. And within that, an option to "Shift down the page in order not to obscure content behind the notification bar" was selected.
So that was the cause. So it is now deselected and overlays instead.
I can't imagine that GTMetrix use out of date browsers, but yes, the banner does show up on their tests.
Major thank you. (And apologies for thinking that it might be in GP!)
The scripts those plugins use can be a little hit and miss, as they have to 'ask' for the browser client details to ascertain its XYZ browser ... and sometimes that can get missed.
I wouldn't be too bothered if GT Metrix picks up on it - only really an issue if Google Search Console does.
Glad to be of help!
