I have experienced this issue on multiple sites. But now mentionting here, bcz it’s an issue which I think should be solved.
When we create a template and hook into bricks_before_header or bricks_after_header
Everything else, the Header, main content, everything loads perfectly but the “Topbar” styles loads with a delay.
I’m not using any cache plugin, it’s not a server cache issue, bcz I built the sites for cleints on different servers with the same issue.
When I put the “Topbar” directly in header template, then it loads fine.
Recently, I was solving this issue by adding a code element before the actual “Topbar” element and styling it via Custom CSS. So that bricks can load CSS, before loading the actualy template.
can you try on 1.12-beta on one of your staging websites, if you see the same issue? Because we solved some CLS problems in latest beta, so maybe worth a try.
But please, just do it on staging, with your setup, and let me know.
i have the same issue and it‘s not solved in 1.12.1. i use a template for a hero section with the hook bricks_before_header and it causes cls:-/ it rates my lage 30 points down because of this :-/
I can see the layout shift happening on hero while the page loads.
on your hero both your video bg and the center logo shifts way way too much.
and they load slow as well.
give fixed heights and positions exacly for the desktop so it doesnt shift.
hero layout shifts are pain to fix because thats the first thing it loads and usualy they are big in area so smallest mistakes kills your scores on hero.
this is not bug.
just optimize better. set your heights sizes positions …etc
I’ve defined fixed heights etc. but it’s not working… it’s loading the css of the template slower than the content. so the content is visible for milliseconds and then the hero is coming and pushes all the content down…
@Matej I switched the CSS Option to “External Files” and now the problem is solved. So with the inline CSS, the CSS is still loaded after the footer (bricks-dynamic-data-inline-css).
@Matej Is it possible that the Lighthouse Test of Google Page Speed has a problem with a template before the header? Because when I remove the template, the test works fine. do I add the template with the hook bricks_before_footer it works too. It has no impact of inline CSS or external files…