Troubleshooting a Site that Displays Badly

Hi,

If your site appears broken (i.e. it displays badly) after upgrading from v2.9 to v3.0, here are a few things you can check:

• If your site is serving via HTTPS (which, nowadays, it should be doing), and you have enabled the Javascript/CSS Minify and/or Combine settings, please verify that your WordPress URL and Site URL are both using HTTPS as well. LiteSpeed Cache uses these fields to determine the hostname for minified/combined file links, and if these begin with https:// instead of https:// like the rest of your site, modern browsers, such as Chrome, will block the mixed content. Your page will load without CSS/JS files, which will likely break the display.

1. From the WordPress Dashboard, navigate to Settings > General.
2. Verify both WordPress Address (URL) and Site Address (URL) begin with https://.

• If you experience Flash of unstyled content (or FOUC) in the first second of loading your page, before it displays normally, this is probably due to Load CSS Asynchronously. There are a few possible solutions:

1. Simply disable asynchronous loading. Navigate to LiteSpeed Cache > Page Optimization > CSS Settings and set Load CSS Asynchronously to OFF. This is the simplest and quickest way to solve FOUC, but it has the potential to negatively impact your page speed score.
2. To keep Load CSS Asynchronously ON, you will need to set Generate Critical CSS to ON. Critical CSS (AKA CCSS) is meant to address this FOUC by inserting critical CSS rules into HTML code directly, letting the browser render the page in the viewport. The rest of the CSS is loaded after the initial render. Due to the nature of CCSS generation, this will cause a certain delay if CCSS rules are not generated yet. Therefore, you have two options:

1. Set Generate Critical CSS In Background to ON, meaning CCSS will generate after the page is loaded, and it will be inserted into the page the next time the cache is purged. You’ll still see FOUC until that time.
2. Set Generate Critical CSS In Background to OFF, and the CCSS will be generated while the page is loading. This will add a few-second delay for the first visitor to request the page, but it will only happen once. This is a smoother solution than the one above, but it comes with a delay the first time it is loaded.

• Check whether a page has CCSS rules inserted. There are two ways to do this:

1. Check HTML source code directly. You should see at very beginning of your HTML code

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

   (where ...... represents the CCSS rules). If you see this section is empty, that means that CCSS is not generated or not inserted.

2. Look for files in the /wp-content/litespeed/ccss/ directory. There should be a list of them with names like home.css, page.css, post.css, category.css, etc. Check the contents of these files.

• If you see normal CSS rules, but they are not inserted into the HTML code, that means that the page was cached before the CCSS was generated. This typically happens when generation happens in the background. Navigate to LiteSpeed Cache > Toolbox > Purge and Purge All – LSCache to regenerate the HTML and insert the CCSS.
• If you see something that indicates a Syntax Error, then please disable CSS Combine and CSS Minify, Purge All – LSCache, Purge All – Critical CSS, and try to generate CCSS again. This time, if you check the file, you will see which of your original CSS files contain an error, and what you need to fix to make it work.

You can get more tips for troubleshooting CSS and Javascript issues in our documentation.

And, of course, if these solutions don’t help, feel free to start a new support topic (please don’t reply to this one).

Thank you!

• This topic was modified 4 years, 10 months ago by LiteSpeed Lisa. Reason: HTML typo
• This topic was modified 4 years, 10 months ago by LiteSpeed Lisa. Reason: HTML typo II
• This topic was modified 4 years, 10 months ago by LiteSpeed Lisa. Reason: Regular typo