Differences

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

--- litespeed_wiki:cache:lscwp:optimize-issue [2018/01/22 19:40]
Eric Leu [How to fix CSS/JS optimize issue]
+++ litespeed_wiki:cache:lscwp:optimize-issue [2020/05/04 13:51]
Shivam Saluja
@@ Line 1: / Line 1: @@
-======How to fix CSS/JS optimize issue======
+======How to Fix Problems Caused by CSS/JS Optimization======
-For faster our WordPress site purpose, LSCache plugin provide Optimize function, which includes Minify/Combine/Push functions.
+**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]].
-But in some cases we will see page may broken after enable all the optimize functions.
-This wiki is going to show you how to fix CSS combine issue. Other cases,(e.g. JS, combine, push) should be all similar.
-Before start, please open [[https://developer.chrome.com/devtools | browser developer tool]] to help you check the issue.
-=====Let's start=====
-  - Check optimize issue site
-    - CSS Minify ''ON'' with no issue \\ {{:litespeed_wiki:cache:lscwp:opt-1.png?800|}}
-    - CSS Minify ''ON'' + Combine ''ON'' issue occurred \\ {{:litespeed_wiki:cache:lscwp:opt-3.png?800|}}
-  - How to fix
-    - Disable ''minify'' to see css file in clear \\ {{:litespeed_wiki:cache:lscwp:opt-2.png?800|}}
-    - Click the file you can see the full path of plugin. One plugin may have multi css or js file. You can simply add plugin name as excluded \\ {{:litespeed_wiki:cache:lscwp:opt-4.png?800|}}
-    - From issue page, we can see the product of small image can not show due to CSS combine. So, we try to add the issue css(e.g. woocommerce-smallscreen.css) as CSS Excludes from Tuning \\ {{:litespeed_wiki:cache:lscwp:opt-6.png?800|}}
-  - How to verify
-    - Enable CSS Minify ''ON'' + Combine ''ON'' again. Click Purge All button. Page now shows normally and we can see woocommerce-smallscreen.css is not optimized \\ {{:litespeed_wiki:cache:lscwp:opt-5.png?800|}} \\
+For the purpose of speeding up your WordPress site, the LSCache plugin provides Optimization functions, which include Minify, Combine, and Push.
+In some cases when all of the optimization functions are enabled, you may find that your page formatting is broken. This wiki will show you how to fix a CSS Combine issue by disabling it for the offending style sheets. Other cases,(e.g. JS Combine, Push, etc.) may be solved in a similar way.
+Before we begin, please open [[https://developer.chrome.com/devtools | your browser's developer tool]] to help you check the issue.
+=====Verify that the issue is caused by CSS Combine=====
+When only **CSS Minify** is ''ON'', there is no issue
+{{:litespeed_wiki:cache:lscwp:opt-1.png?800|}}
+When both **CSS Minify** is ''ON'' and **CSS Combine** is ''ON'', an issue occurrs: the product image does not display normally.
+{{:litespeed_wiki:cache:lscwp:opt-3.png?800|}}
+===== How to fix the problem=====
+First, disable **CSS Minify** so that you may see the CSS file clearly.
+{{:litespeed_wiki:cache:lscwp:opt-2.png?800|}}
+You are going to want to find the CSS file that is causing the problem, and exclude it from optimization. There are a few ways to do that. You can exclude every CSS file that is associated with a particular plugin (option 1 below), or exclude one specific CSS file (option 2). Either way, you will use the **CSS Excludes** box on the **LiteSpeed Cache > Settings > Tuning** tab.
+  - **Method 1:** Click the name of the first CSS file on the left side, so you can see the full path of the plugin. One plugin may have multiple CSS files, so you can exclude every one of them by entering the plugin's partial path (in this case ''woocommerce-tm-extra-product-options'') in the **CSS Excludes** box. \\ {{:litespeed_wiki:cache:lscwp:opt-4.png?800|}}
+  - **Method 2:** Alternately, you can try excluding just one CSS file by entering the file name (in this case ''woocommerce-smallscreen.css'') in the **CSS Excludes** box. \\ {{:litespeed_wiki:cache:lscwp:opt-6.png?800|}}
+=====How to verify it worked=====
+Turn **CSS Minify** ''ON'' + **CSS Combine** ''ON'' again. Click **Purge All** button. The page now displays normally and we can see that woocommerce-smallscreen.css is not optimized.
+{{:litespeed_wiki:cache:lscwp:opt-5.png?800|}}
+=====Tips=====
+If you didn't guess the right CSS file, and you are still seeing a badly-formatted page, try the process above again with another CSS file.
+If you have any LSCache plugin suggestions or questions, you are welcome to visit [[https://wordpress.org/support/plugin/litespeed-cache/ | the forum]].