--- title: Integration best practices description: Best practices for integrating the Autocomplete API for optimal performance and user experience. slug: autocomplete/guides/integration-best-practices docKind: guide hub: autocomplete --- Optimizing your autocomplete implementation is crucial for a fast and responsive user experience. ## Avoiding latency ### Direct implementation (recommended) If you implement the JSON API directly, we strongly recommend consuming it **directly from the HTML page** (client-side). - **Why?** This avoids the latency of proxying requests through your backend servers. - **Security**: The API is designed for public access. No sensitive information (like private keys) is required to call it, only your `tracker_id`. ### Avoid proxying Do **not** proxy calls to Luigi's Box Autocomplete API via your backend servers. This introduces unnecessary network hops and delays the response, making the search-as-you-type experience feel sluggish. ## Performance optimization ### DNS prefetching To avoid the DNS lookup penalty on the very first autocomplete request, we recommend adding a DNS prefetch instruction to your HTML code. Add the following code anywhere in your `` tag: ```html ``` ### Fetch only necessary fields To reduce payload size and improve parsing time, only request the fields you actually display in the autocomplete dropdown. Use the `hit_fields` parameter to specify a comma-separated list of fields. **Example**: `hit_fields=title,price,image_link,url` ## Implementation choice | Method | Pros | Cons | |:---|:---|:---| | **[Autocomplete.js](/autocomplete/autocomplete-js/)** | Plug-and-play, built-in caching and analytics, handles UI rendering | Less UI customization flexibility | | **Direct API** | 100% UI control, integrating into native mobile apps | Must implement caching and analytics manually, requires more development effort |