Try to load autocomplete and other js when the search button is clicked

Created on 20 January 2025, about 10 hours ago

Problem/Motivation

Found via πŸ› Front-end Performance Suggestions (Via Google Lighthouse) Active .

search_api_autocomplete relies on core's autocomplete library, which relies on jQuery UI/jQuery. This in itself is fine - we haven't finished removing the jquery_ui dependency from core autocomplete yet.

However, when search_api_autocomplete is enabled for anonymous users, it can be the only reason that various JavaScript libraries are loaded at all. On Drupal CMS this increases the js weight for the anonymous front page from around 10kb for the base recipe, to 280kb (uncompressed) for the base recipe + search recipe.

When someone is just browsing the site, none of the additional js libraries are needed.

Steps to reproduce

Proposed resolution

It might be possible to borrow some logic from core's Big Pipe module.

Something like:

1. In a hidden HTML element, generate the contents of an AjaxResponse which attaches the libraries needed for search autocomplete. This would be similar to a big pipe js placeholder but could have hard-coded HTML around it.

2. In some minimal js, get Drupal's AJAX API to process that AJAX response/commands when the search is clicked.

The AJAX system would then take care of loading any libraries that aren't already loaded, only when the search is used.

πŸ“Œ Task
Status

Active

Version

1.0

Component

General code

Created by

πŸ‡¬πŸ‡§United Kingdom catch

Live updates comments and jobs are added and updated live.
  • Performance

    It affects performance. It is often combined with the Needs profiling tag.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024