Oops Try Again It Looks Like You Forgot to Link to Your Stylesheet!

Troubleshooting CSS/JS Problems¶

You may enable optimization features in LiteSpeed Cache for WordPress, and find that your site no longer displays correctly. It's a common problem, just information technology's probably not, strictly speaking, an result with the LSCache plugin. Instead, it'due south more likely to be an outcome with a unmarried CSS or JavaScript file that conflicts with all the rearranging that the automatic optimization processes perform.

Finding Conflicts¶

Verify it'due south a Folio Optimization Issue¶

Before nosotros go to as well much trouble, let's make sure that it really is an optimization upshot.

In a private/incognito browser window (or separate browser not logged in to WordPress), view your site without any of the CSS, JS, and other page optimizations enabled past appending /?LSCWP_CTRL=before_optm to the finish of the link.

Example

For www.example.com, use world wide web.instance.com/?LSCWP_CTRL=before_optm to see the page without optimizations.

How does the site look without optimizations?

Information technology still looks bad¶

If your site is still non displaying correctly, and so the problem is not with LSCache's optimization features.

What happens if you lot deactivate the LSCache plugin completely? Does the site await fine? If so, and then another feature of LSCache is interfering with your site. Visit our forum, and let us know what's happening.

If the site is still messed-up even after deactivating LSCache, and so the upshot is related to something else on your site and unfortunately, we can't help. It's probably a good time to contact your hosting provider.

It looks good now¶

This confirms that the upshot lies somewhere in the optimization features. Now you have two options:

• Turn off the CSS and JS optimization functions for good, and purge the cache. This is an easy solution, and if yous choose to do this, your site can still benefit greatly from caching fifty-fifty without optimization enabled. Remember, y'all don't have to utilize the CSS or JS optimizations to use LSCache!
• Turn those options dorsum on, do some troubleshooting to find the problematic file, and exclude that file from optimization. If you want to get this route, go along to the next step.

Verify it'due south a CSS/JS Optimization Consequence¶

Effort the following steps to pinpoint CSS and JavaScript errors:

1. Plow off optimization: from the WordPress Dashboard, navigate to LiteSpeed Enshroud > Folio Optimization. Click the CSS Settings tab, and set all of the CSS optimization features to OFF. Click the JS Settings tab, and fix all of the JS optimization features to OFF.
2. Purge the cache: navigate to LiteSpeed Cache > Toolbox > Purge and printing the Purge All push button.
3. Bank check your site: reload the folio. Does information technology withal look bad?

If it still looks bad, then your trouble is likely something else.

If it no longer looks bad, then at that place is JavaScript or CSS somewhere on your site that is incompatible with some LSCache optimization features. This guide will help you lot to observe the problematic files and exclude them from optimization.

Identify Whether it'due south a CSS or JavaScript Issue¶

The first pace in finding the problematic file is determining whether we are looking at a JavaScript result or a CSS effect.

Let's cheque JavaScript showtime:

1. Check that the JS-related optimization functions are enabled, and the CSS functions are disabled.
2. Purge the cache, if you enabled/disabled anything in the outset step.
3. View the folio. How does it look?
4. If it's messy, and so one of your JS files is problematic. Jump ahead to Detect and Exclude.
5. If it's fine, then your JS files are also fine and you lot can movement on the check CSS.

If JavaScript wasn't the culprit, and then information technology's probably CSS. Let's verify.

1. Disable the JS-related optimization functions, and re-enable the CSS functions.
2. Purge the cache again.
3. View the folio. How does information technology look?
4. It should exist messy, proving that one of your CSS files is problematic.

At present that yous know whether it'southward CSS or JS, you'll demand to find the specific file that is causing the trouble.

Detect and Exclude the Problematic File(s)¶

Tip

For the purposes of these instructions, we're going to assume you lot have a CSS file causing trouble. If, in fact, your outcome is with JavaScript, yous can still follow these aforementioned steps. Only imagine that the instructions say "JS" everywhere that they say "CSS."

In order to find the file that is at fault, outset we need to go a list of all possible CSS (or JS) files. Once that is done, we will exclude the entire list of files from optimization, and and so reintroduce them one-by-1 until we've found our culprit.

Go a List¶

1. Visit your site with optimizations disabled by appending /?LSCWP_CTRL=before_optm to the terminate of your URL. This ensures that you lot are getting a listing of the original CSS files, and not the LiteSpeed-generated versions.
2. Using the browser'due south Developer Tools, visit the Network tab, and click CSS to view only the CSS files.
3. Reload the page. You should see a list of all of the CSS files in apply past that page, listed in the Name column.
4. Make a list of these files. You will accept to exclude them all from optimization, equally described in the next footstep.

If you need to see the full path of whatever ane CSS file, click on the proper noun of that file, and click Headers. You volition find the full location of the selected file listed as Request URL.

Examination the List¶

1. Enable all of the optimization functions you wish to use.
2. Exclude all of the CSS files from optimization: Navigate to LiteSpeed Cache > Page Optimization > Tuning and enter the files from your list, one-per-line, in the CSS Excludes box.
3. Purge the cache and check the site. It should be displaying correctly.
4. Remove one of the CSS files from the exclude listing, and purge the cache.
5. Check the site.
   1. If it still looks okay, then that file you just removed was not the problematic file.
   2. If the site looks broken, then yous know you have found a problematic CSS file. Put it back in the box and leave it in that location.
   3. If at that place are more unchecked files, echo from Step 4.

At the end of this process your site should look good, all of the optimization functions you wish to apply should be enabled, and you lot should take one or more than problematic CSS or JS files sitting the in the CSS Excludes or JS Excludes box and eliminated from time to come optimization.

Avant-garde Tuning¶

You would probably similar to effort skipping some steps. If y'all are experienced with website optimization, or if you know you only changed one plugin before the issues started, so you may be able to salvage some fourth dimension. Hither are a few practical tips to help you know what to look for, to save yous time, and to make sure you haven't missed anything:

Warning

If y'all're already logged into WordPress, then either open up a private/incognito window or utilise another browser.

1. Inspect the problematic area

   Right-click the problematic area and select Inspect. This will open your browser's Developer Tools and show you related sections of code. That should give you hints to help recognize which plugin/theme might need tuning either in the plugin/theme's own settings or by exclusion from LSCache optimization. If information technology's non obvious, try comparing this Inspect window to one for a non-optimized version of the folio.

2. Cheque for browser errors

   While you lot have Developer Tools open (yous can toggle with F12 key), select the Console tab and see if whatever Errors are at that place since they could mention which file or inline lawmaking is affected.

3. Check the waterfall

   Earlier and after changes, yous should check the waterfall under the Network tab in your browser'due south Developer Tools to see:

   • Which order things load
   • Which files are taking noticeably longer to load than others
   • Which files are loading longer than before changes were made
     • If all resources from a domain are loading slowly then see some more folio loading troubleshooting tips

4. Make sure your site is mobile-friendly

   There's commonly an icon that looks like a cell phone & tablet next to each other in the corner of Developer Tools that you can utilize to view your site as if you're using other types of devices. Click that icon to can make sure that your site looks and functions properly while optimized. It's best to do this from a computer, since you tin't employ Programmer Tools very well on touchscreens if at all. You lot may likewise desire to test with different Throttling options to simulate slower connection speeds.

Note

If you accept Invitee Mode enabled then yous may want to examination as if you lot're e'er a commencement time company by temporarily calculation or removing the user agent or IP address that you lot're testing with. If non, the page will refresh then fast you won't be able to see any details on what it was similar in "Guest Way" before.

Other Issues¶

CSS/JS Changes Causing Frequent Cache Miss¶

Since updating to LSCWP v4.4.2, y'all may accept begun experiencing more frequent enshroud misses, despite making no changes to your settings. Typically, this is related to the new way that v4.four.2 handles cache direction with the CSS/JS Combine option, and tin can be problematic on a site where CSS or JS change oftentimes.

What May be Happening¶

Your site has CSS or JavaScript content that changes very frequently. This is likely considering of random numbers or strings in the selectors, or something forth those lines, and these random strings regenerate ofttimes (for example, with every new visitor, or every x minutes, etc.).

• When the CSS or JS changes, the combined CSS or JS must be regenerated.
• And when the combined CSS or JS is regenerated, all cache entries for the pages which include that CSS/JS must be purged.
• And once the pages are purged, the next visitors volition feel a cache miss.

So many cache misses affect site operation and user experience.

How to Confirm¶

Using your browser's Developer Tools, navigate to the Network tab and reload an affected page on your site.

In the list of loaded files, locate the combined CSS file and the combined JS file, and brand notation of the file names.

Reload the page. Click the offset resource, which should exist the page you only loaded. Look for the X-LiteSpeed-Cache: header. If it's a striking, reload the page until you see a miss. At present note those combined CSS and JS file names once more. Have the names of the files changed?

If a cache miss on the page is always accompanied by a combined CSS filename modify, or a combined JS filename change, then you tin can confirm that frequent cache misses are being acquired by frequently changing CSS or JS.

How to Cease the Purge¶

There are two ways to bargain with this trouble:

1. Disable CSS Combine and/or JS Combine. This is the easiest solution, only it is not platonic, every bit it turns off all combination.
2. Notice the problematic selector(due south) that are frequently irresolute, and exclude merely those selectors from combination.

Read on to learn how to find and exclude the problematic selector(south).

For these instructions, we'll assume that it was the combined CSS file that was changing frequently. The procedure is exactly the same for JavaScript; simply supervene upon "CSS" with "JS" in every stride.

1. Bold you are all the same in the developer tools, double click on the combined CSS file to open it in a new tab.
2. Render to the browser tab with your site's page and reload until you see the combined CSS file name change over again in developer tools.
3. Double click on the combined CSS file to open it in a new tab.
4. Re-create and paste each version of combined CSS into a diff checker site (such equally https://www.diffchecker.com/) and compare.
5. You should see a few lines of CSS highlighted. This is where the 2 combined files differ, and indicates where the problematic selectors are.
6. Presumably the selectors will have a common string (for instance, with abc_12345 and abc_67890, the common cord is abc_). Effigy out what that is for your combined CSS.
7. To observe out where those selectors are coming from, plow off CSS Combine temporarily, reload the page, and note the private CSS files that are included on the page.
8. Search each of those files for the common string from the problematic selector.
9. Once y'all find information technology, from your WordPress Dashboard, navigate to LiteSpeed Cache > Page Optimization > Tuning and enter the CSS filename in the CSS Excludes box. If there are multiple CSS files, add together all of them, one per line.
10. If the problematic selector is non in a file, only is inline with the page's HTML, then navigate to LiteSpeed Cache > Page Optimization > Tuning and enter the common string from the selectors in the CSS Excludes box. If there are multiple sets of problematic selectors, add all of them, one per line.
11. Re-enable CSS Combine.

This should put a terminate to the frequent changes to Combined CSS, which will in turn stop the frequent purging and enshroud misses.

Y'all can use the developer tools like before to ostend this solution has been a success.

Tip

If you have CSS Minification enabled, chances are the problematic CSS string has been minimized as well and doesn't actually appear as-is in whatever of the original CSS files. If you want to exclude the problematic CSS string from optimization, you volition demand to practise 1 of two things:

1. Don't exclude the entire string; only exclude a partial string that will not be affected past minification
2. Plow off minification, and repeat the process to notice the problematic string in its original class

The aforementioned issue and solution also apply to minimized JavaScript.

Disk Space Filling Fast¶

Some plugins may generate CSS or JavaScript with random strings. If CSS Combine or JS Combine is enabled, the presence of such random strings volition crusade a new combined file to be created for each page in the site. If the site has a separate mobile view, then there will be 2 combined files created for each page in the site. For each additional cache vary, another set of combined files will be created. Equally you lot can imagine, this is non ideal, and has the potential to fill up up your server infinite.

To terminate this behavior, you lot must exclude the randomized CSS or JS from being combined.

Find and Exclude the Random Cord¶

• Visit your site, appending /?LSCWP_CTRL=before_optm to the finish of the domain proper noun (as in example.com/?LSCWP_CTRL=before_optm), in two separate browsers or incognito windows.
• View the page source in each window
• Re-create and paste each source into a diff checker site (such every bit https://www.diffchecker.com/) and compare
• Y'all should see a few lines of CSS or JS highlighted. This is where the two page loads differ, and indicates where the random strings are.
• Presumably the cord will have a mutual role (for case, with abc_12345 and abc_67890, the common part is abc_). Figure out what that is for your page.
• Enter the common part of the random string in CSS Excludes or JS Excludes as appropriate.
• Purge All CSS/JS

Case

In the image below, the highlighted areas all include a CSS id that begins with .tdi_ and ends with a random group of characters (2_35c in i window, and 2_5f5 in the other).

You lot would exclude the cord .tdi_ from CSS optimization.

Another way to find the random cord is to compare the combined CSS or JS files for a page using the same separate-window diff-checker method. This is easiest if you take minification turned off.

Example

Continuing with the same site in the previous example, the image below shows the difference in the combined CSS file when loaded in separate windows. In this instance, you see yet more variations on tdi_: tdi_49_013 and tdi_49_5d0.

This shows the decision to exclude .tdi_ is the correct one.

CSS Non Properly Reloaded After Update¶

About likely, this is non an LSCache outcome, since LSCWP doesn't cache static files.

If your theme's CSS is not properly loaded later an update, check your browser cache. Does the reload work? Do y'all take a CDN or a reverse proxy in front of your spider web server, such equally Cloudflare? These caching mechanisms may need to exist purged. Run across this forum postal service for more details.

Critical CSS Not Loading¶

First and foremost, please make sure that all of our service node IP'due south are allowlisted on your server, your WordPress security plugins (if any), or other security apparatus on your website such as a CDN/Application Layer Firewall.

If information technology notwithstanding isn't working after that, take a expect at the following:

• Check the wp-content/litespeed/ccss/ directory for any CSS files, and check if any CSS files are generated. Files should exist generated inside that directory for each of the Postal service Types on your WordPress site.
• If the CSS files do non exist or the CCSS binder does non be, wait for the cron to execute. The cron will generate CCSS from our Cloud Servers.
• If the CSS files exist and are valid, do a Purge All - LScache selection from the LSCache menu on the Admin Bar. The new CSS would not take been included in older buried pages.
• If the CSS files comprise ccss-timeout, it means communication with your server timed-out when we tried to generate Critical CSS. In this case, delete that CSS file manually and Purge ALL - LScache then that it tin can re-generate.
• If the CSS files contain Syntax Error, and so one of your CSS files contains an error. You can narrow down the actual erroneous CSS file like and so:
  1. Turn off CSS Combine and Minify
  2. Purge All and Purge Critical CSS
  3. Try to re-generate CCSS. The side by side CSS file generated inside wp-content/litespeed/ccss/ should show the real CSS file which has the syntax mistake.
  4. Fix the syntax fault in the CSS file indicated, and Purge Critical CSS.
  5. Re-enable CSS Minify and CSS Combine again now.

Still Seeing FOUC with Disquisitional CSS Enabled¶

Enabling the Generate Critical CSS (CCSS) feature is supposed to eliminate Wink of Unstyled Content (FOUC), then why practise yous sometimes withal encounter information technology, even though the setting is configured to ON?

When Load CSS Asynchronously is enabled, your site'south CSS will be loaded at the same time every bit the HTML. And then any content that is loaded before the relevant CSS volition be rendered without style, as in this screenshot.

LiteSpeed automatically generates Critical CSS in order to terminate this beliefs. It inserts essential CSS style rules inline into the page HTML, so that those rules are executed before the content loads. (Yous tin larn more about how this works, on our blog.)

Sometimes, though, you may notice unstyled content, even with Critical CSS generated.

Crusade:¶

FOUC happens when CCSS has not been inserted inline into the HTML of the page.

When a folio renders unstyled, check the source code. You will probably see something similar to this:

                                            <style id="litespeed-optm-css-rules"></way>                          

In the image below, it's the surface area marked in carmine on line 4.

The <style> tags are in that location, only they are empty, which means CCSS is enabled, but the rule is not notwithstanding generated/inserted into the page.

Possible Explanations¶

And so, why wouldn't the CCSS be inserted into the page nevertheless?

It takes a few seconds to generate Disquisitional CSS, and if you take set Generate Critical CSS in the Background to ON, LSCache adds the page to a cron-based queue so that the CCSS may be calculated later. As a result, there may be times when the page is loaded before the CCSS is available, and this leads to FOUC.

Please be aware that same types of pages share the same CCSS. For example, if you take post1, post2 and post3, when yous access post1, CCSS will be generated. That CCSS volition then be at that place and ready to use when post2 and post3 are accessed.

Solution¶

Try a Purge All - LSCache after the CCSS rules are generated. This volition allow LSCache to insert CCSS into pages that had been already buried earlier the CCSS was generated.

Verify¶

When CCSS is properly inserted, you will see the rules inserted between the <style> tags, equally shown by the red line in the epitome below:

Debug Disquisitional CSS Generation¶

If you take verified that CCSS has failed to generate, this may be due to a syntax mistake. In that location are a few ways to expect for such errors in your CSS.

Method i: QUIC.deject Dashboard¶

If you have linked your site to QUIC.deject, you can check in the QUIC.deject dashboard. Navigate to the Page Optimization tab, and wait for any warnings in the Recent Requests area, similar so:

In this case, a CSS Syntax Error is conspicuously listed, along with the path to the CSS file that has the error, and a description of the error (Unclosed block). Gear up the error and CCSS should begin working properly.

Method 2: Your File System¶

If you have not linked your site to QUIC.cloud, y'all tin directly check your file system. Navigate to the /wp-content/litespeed/ccss directory past FTP or your control panel file manager. Look within the CSS files in that directory. Ane of them should comprise a syntax error.

In this example, home.CSS gives usa the Unclosed block syntax error and tells us where to find the file to fix.

Method 3: HTML Source Code¶

Lastly, y'all can check the HTML source code, though this method is not as reliable as the previous two and is less preferred.

In this instance, you can see the Unclosed block error displayed in the spot where your Critical CSS should take been inserted.

Find the Original CSS File¶

Regardless of the method used, y'all probably discovered something like this:

                                            /*CssSyntaxError: /wp-content/litespeed/cssjs/5aaa0.css:1:one: Unclosed block*/                          

/wp-content/litespeed/cssjs/5aaa0.css is the file that causes the problem, but this is not the original CSS file. Whatsoever file that you find inside of the /wp-content/litespeed/ directory is one that has been generated by the LiteSpeed Cache plugin.

In this case, information technology is an optimized CSS file generated through the CSS Combine and/or CSS Minify features. You cannot fix the syntax error in a generated file. You need to fix information technology at the source.

To observe the original source CSS you will need to turn off optimization and bank check again.

1. Navigate to Page Optimization > CSS and set CSS combine to OFF and CSS Minify to OFF. Salve your changes.

   

2. Navigate to Toolbox > Purge and perform a Purge All and a Purge All - CCSS, or do it from the Admin Bar as shown.

   

3. Visit the spider web page so that the CCSS is regenerated.
4. Utilize whichever method y'all used the first time to re-check the CCSS and look for the syntax error.

   

Tip

CCSS generation has a time limit to avoid server overload. If you lot can't go your CCSS to regenerate right away, please wait for few minutes and then try again.

In one case CCSS has regenerated, your fault checking should reveal something like the post-obit:

                                            /*CssSyntaxError: /wp-includes/css/dist/block-library/style.min.css:1:ane: Unclosed cake*/                          

This is much more than useful to you lot, as it is the original CSS file that you should exist able to ready yourself. Or, at least, you should be able to contact the theme author or plugin author who provided the file to you lot.

If you're not sure where the CSS came from, the file proper name should give yous a hint. If it was from a plugin, the path should wait similar /wp-content/plugins/plugin-proper name/path/file.css. A theme's CSS should wait something similar /wp-content/themes/theme-name/path/file.css.

Note

For the purpose of illustrating the outcome, we deliberately sabotaged a WordPress default CSS file to trigger a syntax error. Usually, /wp-includes/css/dist/block-library/style.min.css would non be a problematic file.

Incomplete UCSS¶

Sometimes UCSS is generated without some necessary CSS selectors, resulting in a distorted display. This is ordinarily because such selectors require user interaction, and are not visible to the UCSS generator.

In such cases, if you observe the missing CSS selectors and add them to the UCSS Allowlist box, you tin solve the problem. Execute the following steps to observe the relevent CSS selectors and allowlist them.

Important First Step for Invitee Mode Users

If you accept not explicitly enabled UCSS, and you are only using UCSS as part of the Guest Mode + Guest Optimization feature, then you will demand to temporarily force LSCWP to apply Guest Mode and Guest Optimization for all visits from your IP address. To practice so, navigate to LiteSpeed Cache > General > Tuning and add your local IP accost to the Guest Mode IPs listing.

1. Navigate to LiteSpeed Cache > Page Optimization > Tuning Settings where the UCSS Allowlist field tin be establish. Leave the page open up at that place.
2. Visit your website in a separate window, and have the programmer tools visible. The problems in your website's display should be visible in this window. We'll phone call this Window A.
3. Open up some other window with developer tools visible. This time visit your site, but suspend the /?LSCWP_CTRL=before_optm cord to the terminate. For example, https://www.yoursite.com/?LSCWP_CTRL=before_optm. This will display your site without whatever of the optimizations, and information technology should look correct to yous. We'll call this Window B.
4. In Window A, correct click your mouse over the problematic area of the page and select Inspect from the menu.
5. Do the same in Window B.
6. Compare the contents of the two Inspect windows, line past line. Wait for any selector that appears in Window B's Inspect item but does non appear in Window A's Audit particular.
7. Copy the missing selector and paste it into the UCSS Allowlist box.
8. Echo the previous ii steps until you take found every missing selector from the problematic surface area(due south) of the website.
9. When you've finished adding selectors to the UCSS Allowlist, press the Save Changes button.
10. From the WP-Admin Admin Bar at the top of the screen, hover over the LiteSpeed Enshroud symbol, and so click Purge All. Hover over the symbol again and click Purge All - UCSS.
11. Render to your website in Window A, and reload the folio. This will trigger a request to generate a new UCSS file.
12. If you have time to await, yous can skip the adjacent ii steps, and the UCSS will be automatically generated via the cron.
13. To leap start UCSS generation, navigate to LiteSpeed Cache > Folio Optimization > CSS Settings and expect for the queue displayed under the Generate UCSS setting. Run the queue manually.
14. Navigate to the LiteSpeed Cache Dashboard, find the queue displayed with Unique CSS and click Force cron. Wait a few minutes for UCSS to generate.
15. Return to your website in Window A, and reload the folio again. This time, the new UCSS file should exist in apply, and you lot should see an comeback in the display.
16. If you see some comeback but there are still areas that are problematic, repeat the process: compare the two Inspect displays for Window A and Window B, and allowlist all of the problematic CSS selectors.

Don't Forget

If yous added your local IP address to the Guest Style IPs list previously, remove information technology now and press the Save Changes button.

Featherbed Optimization in AJAX¶

If y'all have a disharmonize, and you need to bypass optimization functions in AJAX, you tin can either add some code to your theme's functions.php, or you can telephone call the advisable filter when using AJAX.

In the Theme's Functions¶

Add the post-obit to your theme's functions.php file: defined( 'DOING_AJAX' ) && add_filter( 'litespeed_can_optm', '__return_false' );

Telephone call the Filter¶

When using AJAX, yous can telephone call the above filter, and return false.

DevTools Failed to Load SourceMap¶

Chrome may prove a message like the post-obit in it's developer tools:

                            DevTools failed to load SourceMap: Could not load content for https://example.com/wp-content/litespeed/cssjs/xxxx.js.map: HTTP error: condition code 404 , cyberspace :: ERR_HTTP_RESPONSE_CODE_FAILURE                          

Do not worry, this is admittedly normal. The tool is trying to load the resource map for a minified JS or CSS file, so that it may be unminified. Of class, this file doesn't be, then information technology returns a 404 error.

You may ignore this error. Information technology will Not affect your site in any way.

---

Last update: March 18, 2022

taylorabodencire.blogspot.com

Source: https://docs.litespeedtech.com/lscache/lscwp/ts-optimize/

Share this post