While RapidLoad typically optimizes without disruption to layouts or styles, conflicts are possible. If you are experiencing a broken layout with RapidLoad enabled, we recommend trying the following fixes.
Enable a safelist pack if available
RapidLoad has created safelist packs for plugins with known conflicts. Check the available safelist packs for any plugins currently installed on website. If you find any, try enabling them one at a time. You can find them in the plugin Advanced Settings section.
Enable “Load original CSS files” in Additional options
Some JavaScript creates or updates CSS selectors on interaction. Enabling this option will inject a page’s original CSS files upon user interaction. This can resolve some JavaScript related issues while still reducing initial page load times.
Locate and safelist conflicting CSS selectors
If the affected element(s) are easy to spot, try locating their associated CSS selectors with the browser inspector and adding them to your safelist. More information on how to locate browser inspectors can be found below:
For more information on RapidLoad selector safelists and how to apply them, please refer to the Sitewide Safelists and Blocklists article.
Disable Additional options one at a time
RapidLoad’s additional options are disabled by default. If you’ve enabled any of the following options and are experiencing layout issues, try disabling these options one at a time.
- CSS variables
- Animation keyframes
- @font-face rules
- Analyze JavaScript
More information about these settings can be found in the Additional options article.