Are you experiencing issues with your search bar after activating Leap? This article is designed to help you troubleshoot and resolve common problems associated with the search bar not loading or functioning as expected due to Leap's optimization settings. We'll walk you through identifying whether Leap is causing the issue and provide step-by-step instructions to fix it, ensuring you can enjoy the benefits of Leap without compromising your site's functionality. Let's get started and restore your search bar's performance!

1. Search bar is not functioning as expected
2. Search bar is not interactive
3. Search bar is slow to respond
4. Search bar works intermittently

Potential causes

• Script Delay - This tool defers the loading of scripts in order to improve loading times. However, delaying some scripts might break site functionality, such as search bars, if the script is required for the feature to work. The scripts that are required for the search bar to work will depend on the theme / page builder tools you are using.
• Remove Unused CSS - The Remove Unused CSS feature detects unused CSS files and then prevents them from being loaded to improve loading speed for the necessary files and content. Sometimes CSS files will be incorectly categorized as unused because the CSS file is not needed to load the actual page and is only used when the search bar is selected. This can lead to Leap incorrectly removing CSS files that are needed to load the search bar.

Firstly you will need to determine if this is indeed caused by Leap and which feature mentioned above is causing this issue. The easiest steps to take are as follows:

1. Is this Leap?
   • Deactivate Leap to see if the issue is caused by Leap or something else. If the issue goes away when Leap is deactivated, then we know Leap is causing the issue.
2. What feature is causing this?
   • Deactivate either Script Delay or Remove Unused CSS by going to the Leap dashboard > Optimize > Change settings, then either Script Execution > Script Delay off or CSS > Remove Unused CSS off, then click Next. Make sure to disable one feature at a time, then follow Step 3, then come back to disable the other feature.
3. Preview:
   • Once you have disabled either of the settings, go to the preview and see if the search bar is working. Depending on which feature needs to be disabled, follow the appropriate procedure to fix the search bar.
   • Note: It can be the case that both features are causing the issue, and you will need to follow both guides below.

Script Delay

If the search bar worked when Script Delay was disabled:

1. Navigate to the Script Delay settings and use the Find Delayed Scripts Tool.

2. Click the “Clear Table” button, then enter the URL of the page you are troubleshooting in the “Find Scripts on URL” section and press Enter on your keyboard.

3. Review the list of external and inline scripts found on the specified URL. Scripts that are bubbled in for Don't Delay will be added to the Exclusion Rules and will no longer be delayed. Scripts bubbled in for Delay will remain delayed. The scripts that are highlighted in yellow have been marked as potentially troublesome to delay, which can help when trying to determine which scripts that are delayed may be causing problems on the site.

4. Use the search bar to filter relevant scripts by entering the name of your theme or just “theme”. The most common scripts that need to be excluded in the case of search bar issues are scripts related to the theme.

5. Exclude scripts one by one by selecting Don't Delay for the troublesome scripts, then preview the site to see if this fixes the search bar issue. (Note: you may need to exclude multiple scripts in order for the search bar to work)

6. If you are using a page builder like Elementor and excluding every script does not resolve the issue, you will need to completely disable Script Delay. (Note: Disabling Script Delay is detrimental to site speed; consider moving away from page builders like Elementor which are known for adding bloat to sites and making it difficult to optimize scripts and CSS.)

Remove Unused CSS

If the search bar worked when Remove Unused CSS was disabled:

1. Navigate to the Remove Unused CSS options and use the Find CSS Sheets Tool.

2. Click the “Clear Table” button, then enter the URL of the page you are troubleshooting in the Find Styling on URL section and press Enter on your keyboard.

3. Review the CSS files detected on that page. Files marked as Process are able to be removed by Leap. Files marked as Don't Process will be excluded from being removed by Leap.

4. Use the search bar to filter relevant CSS files by entering the name of your theme or just “theme”. The most common CSS files that need to be excluded in the case of search bar issues are related to the theme.

5. Exclude necessary CSS files from removal one by one by selecting Don't Process for the relevant files. Then preview the site to see if this fixes the search bar issue. (Note: you may need to exclude multiple files in order for the search bar to work)

Once you've found the right combination of scripts in Script Delay or CSS Files in Remove Unused CSS, and have previewed the site, go to the next page and Activate the new Leap settings. 

By following these troubleshooting steps, you should be able to resolve most search bar functionality issues.

To maintain optimal functionality of your search bar and prevent issues when using Leap, consider implementing the following best practices:

1. Regularly Update Themes and Plugins: Ensure your themes and plugins are always up-to-date. This can help avoid compatibility issues that may arise with the latest Leap updates.
2. Test Before Activating: Before fully enabling Leap features like Script Delay and Remove Unused CSS, use the preview function to test if the search bar works correctly. This can help you catch any issues early and adjust settings as needed.
3. Minimize Use of Page Builders: Page builders like Elementor can cause significant issues with optimization tools. Limit their use or consider alternative solutions that are more compatible and less likely to interfere with Leap’s optimization processes.
4. Monitor Performance Regularly: Periodically check the performance and functionality of your site, including the search bar, to ensure everything is running smoothly. Address any issues promptly before they escalate.

By following these tips, you can help ensure your search bar remains functional and your site performs optimally when utilizing Leap.

If you need further assistance with getting your search bar to work, please log in via https://support.ezoic.com/ to make use of our dedicated resources for support. We're here to help!