Differences

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

--- litespeed_wiki:cache:lscwp:optimize-issue [2018/06/03 19:52]
qtwrk [How to fix the problem]
+++ litespeed_wiki:cache:lscwp:optimize-issue [2020/11/14 15:40] (current)
Lisa Clarke Redirect to new Documentation Site
@@ Line 1: / Line 1: @@
-======How to Fix Problems Caused by CSS/JS Optimization======
+~~REDIRECT>https://docs.litespeedtech.com/lscache/lscwp/ts-optimize/~~
-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]].