Fixing Layout Issues in LSCWP

Sometimes when you try to optimize a WordPress page, you end up with layout or functionality issues. This is because a CSS or JavaScript file on the page is incompatible with LiteSpeed optimization. In this video, we’ll explain how to find and exclude incompatible files, so that you can optimize your pages without incident. If you’d like to follow along, you’ll need a WordPress website with the LiteSpeed Cache plugin installed and activated. And we also ask that you disable any other caching or optimization plugins for now, so that they don’t interfere with the troubleshooting process. We’ll be covering three topics: How to prove that LiteSpeed optimization is causing your page’s problem. How to determine whether the problem is with CSS or with Javascript, and How to find the specific files that are to blame and exclude them from optimization. Once these steps are complete, your layout or functionality problems should go away. To determine whether LiteSpeed optimization is to blame for your page’s issues, open an incognito browser window and visit the page. In this example, you can see that the hamburger menu doesn’t work. Visit the page again, but this time append our special “before optimization” query string to the end of the URL. You can find the query string in the description below, for easy cutting and pasting. How does the page look and work now? If the page is fine with the query string appended to the URL, then you probably have a CSS file or a JavaScript file that is incompatible with optimization. This is the case with our example. The hamburger menu is working again. If your page is still wrong, then the issue is NOT with LiteSpeed optimization. Try deactivating the plugin. Does that resolve the issue? If it does, this video won’t be able to help. Please contact our friendly technical support team for further assistance. So, we’ve determined that you have a CSS or Javascript optimization issue, but now we need to figure out which one it is. Before we begin troubleshooting, we recommend that you wait until a quiet time for your site, when traffic is low, or that you try these steps on a development site instead. Every time we try something new, we will be purging the cache, and this may lead to temporarily degraded performance for your end users. Layout issues are often related to CSS, while functionality issues tend to be JavaScript related. We’ll be demonstrating CSS troubleshooting, but you can start with JavaScript, if you prefer. Start by disabling CSS optimization: from the WordPress Dashboard, navigate to LiteSpeed Cache > Page Optimization > CSS Settings, turn off all of the CSS optimization features, and save the settings. If you are using Guest Mode, you will also have to turn that off in the General settings. Next, purge the cache. Navigate to LiteSpeed Cache > Toolbox > Purge and click the Purge All button. Purge all CSS and JavaScript, too. If you have a proxy in front of your site, like QUIC.cloud CDN or LiteSpeed Web ADC, be sure that the cache is emptied at those levels as well. Lastly, refresh the webpage and see how it looks. If the page still has a problem, turn the CSS optimizations back on, and repeat the previous steps with the JavaScript optimizations on the JS Settings tab. If the layout looks correct after turning off CSS optimizations then you know the problem is caused by CSS optimization. If the layout looks correct after turning off JavaScript optimizations then you know the problem is caused by JavaScript optimization. At this point you have successfully identified which type of optimization is causing the problem. In our example, it is a CSS issue. In the next step, we will demonstrate how to find and exclude any problematic files. For the rest of this video, we’re going to assume that your page’s problem is caused by a CSS file. If you have a JavaScript issue, the steps are exactly the same. Just substitute JavaScript whenever we say CSS. To find the problematic CSS files: first we will need to get a list of every CSS file being used by the page then, we’ll exclude all of those files from optimization and finally, we’ll reintroduce each file one-by-one, and see if the page has been affected By the end of this process, your site should be looking good, and you should have one or more CSS files being excluded from optimization. Let’s get started. Visit the page in your browser with the “before optimization” query string appended to the URL. Open the browser tools and navigate to the Network tab. Select the CSS filter, and reload the page. You now have a list of every CSS file used by that page before optimization. Copy all of these files and paste them somewhere for safekeeping Back in the WordPress plugin, enable all of the CSS optimization functions you wish to use, if you haven’t already. Navigate to LiteSpeed Cache > Page Optimization > Tuning - CSS and enter all of the files from your list, one-per-line, in the CSS Excludes box. Purge the cache and check the page. It should be displaying and functioning correctly. Now, remove one CSS file from the CSS Excludes box, save your settings, and purge the cache. If you are using the Unique CSS or Critical CSS QUIC.cloud services, reload the page to add it to the service queues. Wait for the UCSS and CCSS queues to run, and then reload the page again. Is the layout still ok? Then that file you just removed was not the problem. Is the page broken again? Then that file WAS a problem. Put it back in the CSS Excludes box. Repeat these steps until you have removed and tested every CSS file. The files that remain in the CSS Excludes box at the end of the process are the ones that are incompatible with optimization. At this point, your site should look good and work well, and you should have one or more CSS files excluded from optimization. And that’s it! We hope this video has empowered you to fix your page’s CSS and JavaScript optimization issues. We realize this can be a tedious process though, so if you’d rather not do it yourself, our team can do it for you. Visit the link in the description and order Premium Support to have your WordPress site optimized by a LiteSpeed technician. Thanks for watching, liking, sharing, and subscribing. See you soon!