WIP: Layout shift and no styling at first load

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.

Website: https://ecom.dailytechprice.com/
Bricks Version: 1.11.1.1

It’s not only this version issue. The same issue faced on older versions.
Hard Refresh the browser every time or try in new incognito window.

Hi @muhammadadeel,

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.

Thanks.
Matej

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 :-/

Hey @fsu,

can you share a link to your website, so I can check?

Thanks,
Matej

Hi Matej.

Yes. How can I send you the link in private?

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).

Hi @fsu,

thank you for the link. The one that you send, is it staging? If it is, can you revert to “inline”, so that the issue will be there?

Thanks.

I set it back to inline. Now it happens again :wink: You can check it now.

Hi @fsu,

thank you for switching back to inline, we confirmed it now, and added it to our internal bug report.

Thanks,
Matej

2 Likes

Hi Matejy

Thanks. I will change it back to external files :slight_smile:

Best

2 Likes

@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…