St/predictive search lazyload

[Rivka-Development]

Predictive Search Optimization Walkthrough

the optimization applied to the ST/predictive-search-lazyload branch to improve the initial page load performance, specifically targeting mobile devices.
By default, the predictive-search.js file was loaded on every page unconditionally. We have shifted this to an "on intent" lazy-loading model.

Changes Made

1. Removed Static Script Tag

• File: snippets/search-modal.liquid
• Removed the <script src="{{ 'predictive-search.js' | asset_url }}" type="module"></script> tag from the top of the file, preventing the browser from downloading and parsing this script during the critical rendering path.

2. Implemented "On Intent" Lazy Loader

• File: snippets/search-modal.liquid

• Appended a lightweight, vanilla JavaScript snippet at the end of the file.

• This script listens for events that indicate the user wants to search:

  - mouseover: When a user hovers over a search icon or the search bar.
  - touchstart: When a user touches the search icon on a mobile device.
  - focus: When a user tabs into the search input via keyboard.
  - click: A fallback catch for rapid interactions.
  

• Once any of these events are triggered, the script dynamically creates a <script> tag, points it to predictive-search.js, and injects it into the document.body.

• All event listeners are immediately removed after the first trigger to prevent redundant executions.

3. Impact & Benefits
   LCP & TTI Improvements: By removing a blocking (or semi-blocking) resource from the initial load, the browser has more bandwidth and main-thread time to render the visual elements (like Hero banners and Product Cards) faster.
   Data Savings: Users who visit the site but never interact with the search bar will save data natively, avoiding unnecessary downloads.