SOLVED: Large CLS for the entire body if template added via bricks_before_header hook

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: PRIVATELY / NDA

I have a pre-header added as a template, using the bricks_before_header hook. If I enable this template, gets 0.874 CLS

If I disable this template, there is no CLS whatsoever.

Due to an NDA, I can only send the link privately

image
image1127Ă—362 13.6 KB

Vs

image
image1326Ă—387 14 KB

2

Hi Apex,
Thanks so much for your report!

We are aware of the problem and already have a task for it on the to-do list.
The loading order causes the problem: the styles are probably output below the footer, which is suboptimal for an element at the top of the page.

You can work around the problem temporarily by inserting the necessary styles in a style tag in Bricks » settings » header scripts. This is not pretty, but it ensures the styles are available much earlier.

Best regards,
timmse

3 Likes
3

I’m looking forward to seeing this fixed also. I was surprised that I can’t use a Template element without FOUC. Any idea on when this will be fixed?

4

Any update on this problem?
Templates are very important feature of Bricks Builder, especially when you pass some controls to the client to have them edit only parts of the page.

Also, if you use a template for a header to use throughout the site it becomes very problematic.

5

Hi guys, we are still working on the task to find the most efficient and above all permanent solution. We will update the thread as usual as soon as this is done :v:

4 Likes
6

I have the same issue with empty cart and cart page.

7

Hi, any update on this please?

8

Hi,

the task is still WIP (Work In Progress), so I can’t give you a new update. For now, the best workaround is to do what @timmse wrote above:

Best regards,
Matej

1 Like
9

Almost done with a website and from no where, the templates started showing FOUC, now i have to include the elements directly on the pages, i hope upcoming components do not suffer this :sweat_smile:

10

Hi guys,

We’ve fixed this in Bricks 1.12 BETA, now available as a manual download (Bricks – Account)

Please let us know if you are still experiencing issues.

You can see the full changelog here: Bricks 1.12 Changelog – Bricks

As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

Best regards,
Matej

12

This is definitely not fixed. I’m working on a dev site that is still experiencing the same thing, and I’m on Bricks 1.12.1.

If I insert the template, no FOUC. If I use the Template element I get FOUC.

1 Like
13

You are right, the issue was just confirmed here:

1 Like