Lazy Loading of content

Could you please tell me how I can implement Lazy Loading of content in Offcanvas using JS? Ajax? I want the offcanvas content to not be present in the HTML when the page loads, but to load this content when a trigger (e.g., a button) is clicked.

This will significantly reduce the HTML code and provide a huge benefit for SEO.


You could use Bricks’ popup template, which has AJAX built in.

Then the only thing needed would be to handle the animation and positioning to make it work more like an offcanvas would. sliding in etc.

(I don’t believe there’d be any benefit SEO wise though, especially if it’s just a menu inside your offcanvas)

I understand how to do this using a Popup, but how can I load content if it is just a div on the page or a shortcode with a template?

1 Like

Hi guys! Is using a popup template still the best solution at the beginning of 2025? I want to achieve the same what Pavel described. I am working on a website with more than 250 product categories, which probably will significantly affects the performance of the website if it is loaded on every single page load.

Thank you!

what you are talking about is not lazy loading it is ajax

HTMX is the way to go

this is click based example but making this as viewport entrance …etc is easy to implement.