Defer all search scripts
To ensure the search script does not impact the page load, ideally all three scripts should be marked with the async
attribute. However, this presents a timing issue which could be resolved by using the defer
attribute instead.
According to the HTML 5 specification, adding the async
attribute to a <script>
tag should not cause that script to load out of document order. However, Chrome does not honor this rule. (MDN is ambiguous about whether this is right or wrong). If we were to add async
to all search script tags, then it's plausible for the scripts to load in an unexpected order. If this happens, the search UI will not load properly and will be left in an unusable state.
One workaround is to use the defer
attribute instead of the async
attribute. All browsers, including Chrome, respect the document order when using the defer
attribute. And defer
provides almost the same benefit as async
.
async - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async
defer - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer
Another idea is to go ahead and add async
to all three scripts, but then configure the search index script to wait until both lunr
and antoraLunr
are available, and only call the init
function once they both are.