Performance problem in query loop and popup

Feature Requests / Improvements
1

Browser: Chrome 115
OS: Windows

Hi bricks team,

bricks builder is really great in terms of performance. Especially in Html structure where everything is written cleanly and there is nothing extra. I tried to check the implementation of quick view in the query loop and so I added the template element in the query loop so that the popup displays the content correctly.
I compared the value of page DOM Elements (The page where the query loop is located) before and after I added the popup quick view.
Surprisingly, the amount of DOM Elements increased by about 500!
The reason for this is that by adding the template element to the query loop, the value of the DOM elements inside the popup is repeated in each loop item.
So if the popup quick view has 40 DOM Elements, on the other hand, if we have displayed 9 posts in the query loop, 360 DOM Elements will be created!

For this reason, I decided to check this with Jet Engine and Jet Popup plugins in Elementor. For this reason, I decided to check this with Jet Engine and Jet Popup plugins in Elementor. It is interesting to know that when I put a button in the jet engine listing to show popup quick view, the amount of DOM Elements on the page did not increase. Even 1 piece!

I’m not sure, maybe it’s because jet engine loads the popup content as ajax, but bricks directly (because we put the template element in the query loop). Whatever the reason, I hope it can be solved in bricks.

Screenshot

4 Likes
2

Hey @jolia,

thanks for your report.

I’ve moved it to the Feature Requests / Improvements area though as this is not a bug.

Best,

André

3

thank you @aslotta, So Do you confirm that the current bricks method is not a performance-optimal method in this case?

4

Hey @jolia,

no. I do not confirm that generally. It totally depends on the context if you want the content to be populated at page load or via AJAX.

Best,

André

5

You are right. jet engine and jet popup load the content through ajax, which causes the extra DOM volume (popup content) to be removed from the page. This is much better and more efficient than repeating the template element in each query loop item.

6

Hey @jolia,

but that also means that people who deactivate / block JS in their browser are not able to see any popup at all (yes, there are those people). Not to mention a11y and SEO challenges.

That’s why I think having the AJAX option would be a great addition – not a replacement.

Best,

André

7

Hi @aslotta,

Exactly. I also do not agree with its replacement. But the method we can use if needed.

Thank you for participating in this discussion.