Have you noticed changes in your page layout or missing content after activating Leap? This can be frustrating, but don't worry; there are several potential causes and solutions to help you keep Leap enabled while maintaining your site’s functionality. This article will guide you through diagnosing and fixing issues related to script delay, remove unused CSS, and minification features. Follow these troubleshooting steps to resolve layout problems and optimize your performance with Leap.

When Leap is enabled, users may experience several common symptoms related to the page layout. These include:

1. Page Layout Issues: Users might notice that the page layout appears incorrectly, which could be due to the CSS not rendering properly.
2. Content Misplacement or Non-Loading: Elements on the page may appear in incorrect locations or fail to load altogether, often because essential CSS files are being lazy-loaded or removed.
3. General Site Functionality Problems: Various site functions may break due to the improper minification of CSS, JavaScript, or HTML files, potentially impacting overall site performance.

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 menus, if the script is required for the feature to work. The scripts that are required for the menu to load 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 incorrectly categorized as unused because the CSS file is not needed to load the actual page and is only used when the mobile menu is selected. This can lead to Leap incorrectly removing CSS files that are needed to load the menu.
• Minify - The Minify features optimize CSS, JavaScript, and HTML files to reduce the file size. Most of the time this will not cause any issues. However, on rare occasions, the minify feature can remove some important code from the CSS, JS, or HTML files which affects your site's layout or content.

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

Step 1: Is this Leap?

• Deactivate Leap to see if this issue is caused by Leap or something else. If the issue goes away, then we know Leap is causing the issue.

Step 2: What feature is causing this?

• Deactivate the features mentioned above (Script Delay, Remove Unused CSS, Minify) by going to the Leap dashboard > Optimize > Change settings, then toggling off these settings one at a time.
  • Note: For the Minify features, you may want to initially just disable Minify entirely to see if this is the cause, and then determine which specific minification feature is the issue by disabling the advanced settings one by one afterward.

Step 3: Preview:

• Once you have disabled one of the settings, go to the preview and see if the page layout is correct. Depending on which feature needs to be disabled, you will need to follow one or more of the following procedures to fix the page layout.
  • Note: It can be the case that multiple features are causing the issue, and you will need to follow multiple guides below.

Script Delay

If the issue is caused by Script Delay, follow these steps:

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. Exclude scripts one by one by selecting Don't Delay for the troublesome scripts, then preview the site to see if this fixes the page layout issue. (Note: you may need to exclude multiple scripts in order for the page layout to be correct)

5. 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 Remove Unused CSS is the cause, follow these steps:

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. 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 page layout issue. (Note: you may need to exclude multiple files in order for the page layout to be correct)

Minification Features

If the Minify feature is the cause, follow these steps:

1. Determine which setting is causing the issue by disabling one at a time and then previewing the site to check the page layout. (Note: Typically with layout issues, this is either Minify CSS or Minify HTML)

2. For Minify Javascript, turn off the setting.

2. For Minify CSS, find the CSS that is being affected. This can be more challenging, so you may want to contact our Support team for help.

• Open the page with the layout issue. Then go to Leap > Optimize > Change Settings > disable Minify CSS > open the preview and go to the page within the preview. This allows you to view a broken and working version of the site side by side.
• For both pages, open Chrome dev tools by pressig F12 on your keyboard, or right-clicking on the page and selecting Inspect.
• You can then use the select element tool (the blue icon in the image below) to click on the broken parts of the page. Select the same elements on the working version of the page too.

• In dev tools, make sure you are in the Elements view and that the styles sub menu is open. (Note: this may be a little hidden, in which case you will need to drag it out to view it more easily)

• Now you can compare the CSS files that are being loaded on both versions of the page. If you notice a file that is loaded on the working version that is different to what you see on the broken version, this is a good indication of what CSS file needs to be excluded from Minify CSS.
• Then go to the Exclusion Rules for Minify CSS > click Create New Rule

• Create a rule for the CSS file you noticed was different between the two page versions.

• (Note: You may need to repeat this multiple times to fixes the issue. If you are struggling to find the CSS file, you can always contact our support team who will be happy to help)

3. For Minify HTML, use the available toggles to fine-tune the HTML minification, or completely disable it if needed. (Note: if all are toggled on, HTML minification is completely disabled)

• Keep IE Conditional Comments - Preserve IE conditional comments in the HTML.
• Keep Default Attribute Values - Preserve default attributes for tags.
• Keep End Tags - Preserve end tags.
• Keep Quotation Marks - Preserve quotation marks around tag attributes such as type='text/javascript'.
• Keep Whitespace - Preserve whitespace between inline tags but still collapse multiple whitespace characters into a single whitespace character.

You can toggle those on and off until you find a configuration where the issue is resolved.  You may need to toggle on multiple settings.

Once you've found the right combination of settings, if you had clicked Change Settings, make sure to Preview the site, then go to the next page and Activate the new Leap settings.

By following these troubleshooting steps, you should be able to resolve most page layout issues.

To prevent future issues and maintain optimal performance while using Leap, consider the following tips:

1. Regularly Monitor Site Performance: Periodically check your site's performance to identify and address any new issues that may arise due to updates or changes in your site’s content and structure.
2. Documentation and Support: Keep detailed documentation of any changes you make to the Leap settings. This can be helpful for troubleshooting and when seeking support.
3. Avoid Page Builders: Consider minimizing or gradually moving away from using heavy page builders like Elementor, as they can complicate optimization efforts and impact site performance.

By following these preventative measures and maintaining a regular check on your Leap settings, you can optimize your site’s performance and minimize the risk of encountering future issues.

If you need further assistance with your page layout after activating Leap, please log in via https://support.ezoic.com/ to make use of our dedicated resources for support. We're here to help!