Lazy Loading Answers Search Bar

Search Best Practices - Integration
1

Hello!

I have a client who is concerned about the pagespeed impact of loading Answers on every page, when many users won’t interact with the search bar.

Their header is designed so that the searchbar is hidden on page load and becomes visible when someone clicks on a magnifying glass icon. They’d like to dynamically load the Answers script after a user has clicked on the icon to show the search bar.

Do we have any recommendations / best practices / concerns around an integration like this?

Thanks

2

I made a demo for this here: lazy load answers search bar - CodeSandbox

It seems to work pretty well, although on a throttled network connection there is some delay between clicking the button and the search bar showing up.

It might be necessary in that case to have a non-answers search bar with the same styling that’s then swapped out when the library loads.

3

Ahoy!

The methodology used in your demo should work well.

For the proposed dummy searchbar, the main issue with the current searchbar assets is that the css is render blocking. Doing something like “load the JS when the dummy searchbar is clicked, and init the searchbar using the dummy’s state is doable but:

  1. adds complexity
  2. will delay the initial autocomplete by the time it takes to load the assets
  3. doesn’t fix the problem of render-blocking css, since the dummy searchbar needs styling

There will need to be some code splitting in the theme to defer non critical css (which is currently not done) if you want to pursue this option.

Further reading on deferring non-critical css: Defer non-critical CSS

Best,
Bowen