Conquering Layout Shift in Templates?

How To
1

Hello,

I’ve been playing around with Google Lighthouse for several years now. I am very adept at making pages have good Google Page Speed scores.

I’ve run into an issue, which seems to be the same sort of issue Elementor sites have. I noticed if you use a ‘template’ element above the fold, there is a higher chance of having CLS. I believe this is because inside the template there may have be many different CSS used, such as on the ID level, plus class level, plus framework level.

It seems the CSS are loaded separately (external files) and have a minor network delay compared to having the actual internals of the template directly onto a page.

Are there any work around for this? Or is it simply commonly accepted to not have a template elements above the fold? I guess it may be subject to what you are putting inside the template element, but even so, the CSS loading and delays probably function the same regardless.

I’ve run tests:

  1. Elements from template loaded directly onto the page - best result 0.002 layout shift.
  2. Template element above the fold - medium result - 0.162 layout shift.
  3. Template with conditional logic being told where to load using the after header hook - worse result - 1.162 layout shift.

My conclusion is that we probably should not use any template element above the fold.

Or are there any special options for loading the CSS better to avoid these layout shift?

Thanks

Michael

2

make performance recording with chrome you can see what is happening with screenshots more clearly.

it saves the each milisecond as screenshot and you can see what is shifting.

learn this and you will understand what is the cause.

3

Thanks Sinanisler

I am aware of how to find layout shifts. After digger around the forums further, I can see other threads that are pointing out the same issue. It’s not with the CSS itself, but how it’s getting loaded which is making the layout shifts.

Bricks Team is aware and seem to be working on solutions. Thanks.

1 Like
4

i have injected a template as hero section with the hook bricks_before_header and it causes a bad layoutshift. it‘s exactly how you say that there is something with the loading of the templates or what ever. i made fix height etc. but this doesn‘t solve the problem. do I add this section directly on the page i have no problem… it also happens with bricks version 1.12.1…