Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
litespeed_wiki:cache:lscwp:optimization-troubleshooting [2020/05/04 13:50]
Shivam Saluja 		litespeed_wiki:cache:lscwp:optimization-troubleshooting [2020/11/14 15:40] (current)
Lisa Clarke Redirect to new Documentation Site
Line 1: Line 1:
-====== Conflicts with CSS/​JavaScript Optimization ====== +~~REDIRECT>​https://​docs.litespeedtech.com/​lscache/​lscwp/​ts-optimize/~~
-**Please Note**: This wiki is valid for v2.9.x and below of the LiteSpeed Cache Plugin for WordPress. If you are using v3.0 or above, please see [[https://​docs.litespeedtech.com/​lscache/​lscwp/​overview/​|the new documentation]]. +
- +
-So, you enabled optimization features in LiteSpeed Cache for WordPress, and your site no longer displays correctly. It's a common problem, but it's probably not, strictly speaking, an issue with the LSCache plugin. Instead, it's more likely to be an issue with a single CSS or JavaScript file that conflicts with the Minification or Combination process. +
- +
-This troubleshooting guide will help you find that problematic file yourself and exclude it from optimization. +
- +
-(NOTE: If you really don't want to do the detective work yourself you can [[litespeed_wiki:​cache:​lscwp:​support|hire LiteSpeed to do it for you]].) +
- +
-===== Verify it's an Optimization Issue ===== +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​lscwp-troubleshooting-01.png?​800|}} +
- +
-Before we go to too much trouble, let's make sure that it really is an optimization issue. Turn off all optimization features, purge the cache, and check your site, like so: +
- +
-  - Turn off optimization. From the WordPress Dashboard, navigate to **LiteSpeed Cache > Settings > Optimize** and set all of the following to `OFF`: **CSS Minify**, **CSS Combine**, **CSS HTTP/2 Push**, **JS Minify**, **JS Combine**, **JS HTTP/2 Push**. +
-  - Purge the cache. Navigate to **LiteSpeed Cache > Manage > Purge** and press the **Purge All** button. +
-  - Check your site. Reload the page. Does it still look bad? +
- +
-==== It still looks bad ==== +
- +
-If it's still not displaying correctly, then the problem is not with LSCache'​s optimization features. +
- +
-What happens if you turn of LSCache completely? Does the site look fine? If so, then some other feature of LSCache is interfering with your site. [[https://​wordpress.org/​support/​plugin/​litespeed-cache/​|Visit our forum]], and let us know what's happening. +
- +
-If the site is still messed-up even after turning off LSCache, then the issue is related to something else on your site and we, unfortunately,​ can't help. It's probably a good time to contact your hosting provider. +
- +
-==== It looks good now ==== +
- +
-Congratulations,​ you have confirmed that the issue lies somewhere in the optimization features. Now you have two options: +
- +
-  - Leave those optimization options turned off for good. This is an easy solution, and if you choose to do this, your site can still benefit greatly from caching even without optimization enabled. Remember, you don't have to use combine and minify to use LSCache! +
-  - Turn those options back on, do some troubleshooting to find the problematic file, and exclude that file from optimization. If you want to go this route, proceed to the next step. +
- +
-===== Identify Whether it's a CSS or JavaScript Issue ===== +
- +
-The first step in finding the problematic file is determining whether we are looking at a JavaScript issue or a CSS issue. +
- +
-Let's check JavaScript first: +
- +
-  - Re-enable the JS-related optimization functions, and leave the CSS functions disabled. +
-  - Purge the cache again. +
-  - View the page. How does it look? +
-  - If it's messy, then one of your JS files is problematic. Jump ahead to **Find and Exclude**. +
-  - If it's fine, then your JS files are also fine. +
- +
-If JavaScript wasn't the culprit, then it's probably CSS. Let's verify. +
- +
-  - Disable the JS-related optimization functions, and re-enable the CSS functions. +
-  - Purge the cache again. +
-  - View the page. How does it look? +
-  - It should be messy, indicating one of your CSS files is problematic. +
- +
-Now that you know whether it's CSS or JS, you'll need to find the specific file that is causing the problem. +
- +
-===== Find and Exclude the Problematic File(s) ===== +
- +
-For the purposes of these instructions,​ let's assume you have a CSS file causing trouble. If, in fact, your issue is with JavaScript, you can still follow these same steps. Just imagine that the instructions say "​JS"​ everywhere that they say "​CSS."​ +
- +
-In order to find the file that is at fault, first we need to get a list of all possible CSS (or JS) files. Once that is done, we will exclude the entire list of files from optimization,​ and then reintroduce them one-by-one until we've found our culprit. +
- +
-==== Get a List ==== +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​lscwp-troubleshooting-02.png?​800|}} +
- +
-Using the browser'​s Developer Tool, visit the **Network** tab, and click **CSS** to view only the CSS files. Reload the page. You should see a list of all of the CSS files in use by that page, listed in the **Name** column. Exclude everything on this list from optimization. (You can exclude files by full URL or by partial path.) +
- +
-If you need to see the full path of any one CSS file, click on the name of that file, and click **Headers**. You will find the full location of the selected file listed as **Request URL**. +
- +
-==== Test the List ==== +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​lscwp-troubleshooting-03.png?​800|}} +
- +
-  - Enable all of the optimization functions you wish to use. +
-  - Exclude all of the CSS files from optimization:​ Navigate to **LiteSpeed Cache > Settings > Tuning** and enter the files from your list, one-per-line,​ in the **CSS Excludes** box. +
-  - Purge the cache and check the site. It should be displaying correctly. +
-  - Remove one of the CSS files from the exclude list, and purge the cache. +
-  - Check the site. +
-    - If it still looks ok, then that file you just removed was not the problematic file. +
-    - If the site looks broken, then you know you have found a problematic CSS file. Put it back in the box and leave it there. +
-    - If there are more unchecked files, repeat from Step 4. +
- +
-At the end of this process your site should look good, all of the optimization functions you wish to use should be enabled, and you should have one or more problematic CSS or JS files sitting the in the CSS Excludes or JS Excludes box and eliminated from future optimization. +
- +
-Don't forget, if this feels like too much trouble, [[litespeed_wiki:​cache:​lscwp:​support|we can do it for you]].+
  • Admin
  • Last modified: 2020/05/04 13:50
  • by Shivam Saluja