LiteSpeed Blog / Products / LSCache / WpW: Critical CSS and LiteSpeed Cache

WpW: Critical CSS and LiteSpeed Cache

June 20th, 2018 by Lisa Clarke LSCache 35 Comments

Welcome to another installment of WordPress Wednesday!
Today’s topic is: Critical CSS and LiteSpeed Cache

Chances are, if you’ve played around with LiteSpeed Cache for WordPress’ optimization features in the past, you may have encountered the dreaded FOUC, or “Flash of Unstyled Content.” This is caused when the browser loads a page’s content before it loads the styles defined for that content. The browser doesn’t know yet how the content should look, and momentarily displays the content without any formatting at all. This behavior is a side-effect of loading CSS and HTML asynchronously. It’s a common problem, but it has a solution, and that is what we’re going to explore today.

Disclaimer: The information contained in this post is accurate for LSCWP v4.5.0.1 [release log]. If you are using a newer version of the plugin, some details may have changed. Please refer to our documentation for the latest!

What is Critical CSS?

Your web browser needs two things in order to properly display a page:

HTML, which includes the content, function and structure of the elements on the page
CSS, which determines how those elements look when they are displayed

In an unoptimized site, all of the CSS that is linked to in the HTML header is loaded before the HTML body. This approach, however, can lead to a lot of waiting. And so site scoring services (like PageSpeed) recommend that you load CSS asynchronously. Essentially, what this does, is to load the content and the styling separately, without making one wait for the other before continuing.

But this can cause a problem. When page content is loaded before the CSS that styles it, you get FOUC. Basically, you see the text and maybe the images, too, but instead of displaying in the format you expect, the site momentarily looks like something straight out of 1994.

So, how can you load CSS asynchronously and avoid the unstyled content? Critical CSS.

Stylesheets can be large and complex, which is why it takes so long to wait for them to load. However, only a fraction of the styles is necessary for displaying above-the-fold content. It’s that fraction which is called “Critical CSS.” We can quickly load the Critical CSS first, and then, when the rest of the CSS and HTML are loaded together asynchronously, the browser already knows how to display the content that is initially visible.

LSCache has three settings that define how Critical CSS is handled in WordPress.

How LSCache Handles Critical CSS

From the WordPress Dashboard, navigate to LiteSpeed Cache > Page Optimization > CSS Settings. You’ll find the relevant settings about halfway down the page.

LSCache Critical CSS

Load CSS Asynchronously

This option defaults to OFF. When it is OFF, web pages load the normal way, where the browser loads the CSS from the HTML header before continuing on to display the content in the HTML body.

When you turn this option ON, CSS and HTML will be loaded at the same time. The page should load more quickly this way. In order to avoid the FOUC problem, the LSCache plugin automatically connects with QUIC.cloud to generate Critical CSS in the background via a cron job.

The QUIC.cloud Connection

Critical CSS is one of QUIC.cloud’s Online Services, and a certain number of CCSS calculations are provided for free to LSCache users every month. You can learn more about QUIC.cloud’s role in this process in our documentation, and you can learn more about possible costs on the QUIC.cloud website.

CCSS Per URL

This option defaults to OFF, which means that all Critical CSS files are generated by Post Type. In other words, there is one CCSS file for all posts, one for all pages, one for all products, and whatever kind of posts you may have on your blog.

If you turn this option ON, then a Critical CSS file will be generated for every single post. This option generates many more files, so only use it if the styling for individual posts within a single type varies dramatically.

Inline CSS Async Lib

Use this setting to speed things up a bit and avoid render blocking by the CSS Asynchronous Library. It defaults to OFF.

A Few More Details

A Purge All command will not delete any generated Critical CSS.

It’s not always necessary to Purge All anyway. It’s better to target your purges to what actually needs to go. Purge All doesn’t take Critical CSS, but it does take optimized CSS and Javascript along with it. Consider using Purge All – LSCache, if all you need is to clear the cache. That option leaves everything else, including CCSS, intact.

If you intend to regenerate CCSS, then you can use the Purge All – Critical CSS button. Just be aware that regeneration will cost you QUIC.cloud credits.

Please note, you may need to add QUIC.cloud’s Online Service IPs to your firewall’s allowlist.

If you have any questions about this, please leave a comment, visit our forum, or drop by our Slack community.

—
Have some of your own ideas for future WordPress Wednesday topics? Leave us a comment!

Don’t forget to meet us back here next week for the next installment. In the meantime, here are a few other things you can do:

Subscribe to the WordPress Wednesday RSS feed
Download LiteSpeed Cache for WordPress plugin
Learn more about the plugin on our website

—
This content was last verified and updated in March of 2022. If you find an inaccuracy, please let us know! In the meantime, see our documentation site for the most up-to-date information.

Tags: critical css, wordpress, wordpress wednesday

Categories:LSCache

Comments

steve chong September 2nd, 2022
Hi Lisa,
My site (staging though) seem to suffer from FOUC. Do take a look. I have tried so many things but to no avail.
Regards,
– steve
Reply
- Lisa Clarke September 7th, 2022
  Hi, Steve. I don’t really know how to help, but the support team should. Please open a ticket at https://quic.cloud/support and let them know the details.
  Reply
BAI VASIL October 15th, 2021
Hello,
I’ve enabled Asynchronous CSS but I don’t seee an option to Generate Critical CSS to solve the problems with formating. I’m with version v4.2
Reply
- Lisa Clarke October 15th, 2021
  The Critical CSS settings have been deprecated. Now Critical CSS is automatically generated in the background when Load CSS Asynchronously is enabled. If you are having formatting issues after enabling Asynchronous CSS, see if these troubleshooting steps can help. If you can’t find the issue, you can open a ticket and the support team will lend a hand.
  Reply
diegok October 1st, 2021
Hi,
I’ve been testing all the options, read all the documentation but can’t make the critical css work the way I want. In my website (olleros.com.ar) I am using a slider-revolution slide at the top of the page (as the above-the-fold content). The issue I am facing is that the browser is rendering the image just below the slider before the slider, then the whole graphical effect I am trying to create is being lost.
Could please advise?
Many thanks
Reply
- Lisa Clarke October 4th, 2021
  Please open a ticket. The support team should be able to help you figure out what’s going on there.
  Reply
paul doy March 8th, 2021
I’m using flatsome theme with lightspeed plugin and hostinger
Soon as I use CSS minify, CSS combine JS minify and JS combine I lose all my styles and banners on my website.
I’m clearing my cache when activating and deactivating and it’s definitely those items causing the problem
deactivating give me a page speed score of 55 activating gives me a score of 100
so I need to activate them
how would I activate those and maintain my website
thanks
Reply
- Lisa Clarke March 9th, 2021
  Most likely one (or more) CSS/JS files don’t like to be combined and/or minified. If you can locate that file, you can exclude it from optimization, which would allow you to use those features again.
  Unfortunately, there is no easy way to pinpoint which file is problematic. It will require a bit of trial and error. The whole process is explained step-by-step here.
  Alternatively, if you don’t want to be bothered figuring this out yourself, you can hire us to do the detective work for you.
  Hope this helps!
  Reply
Mert February 10th, 2021
Hello, when I turn on the “js combine” option, the hamburger menu and some js functions stop. Also the background image disappears.
I did JS combine off and reload the website. I have added all JS files to tuning> js excludes as /wp-content/themes/flatsome/assets/js/flatsome.js. I also added the css codes to the CSS excludes section:
.homepage-bg-edit .bg.bg-loaded {background-image: url (https://www.purpicks.com/wp-content/uploads/2019/07/Untitled-design-3.png)! important; }
However, it had no effect.
Please help.
Thanks
Reply
- Lisa Clarke February 10th, 2021
  Hi, Mert.
  After you changed the JS optimization settings, did you purge the cache? You should do a Purge All – LSCache after every change to optimization settings.
  If that doesn’t solve the issue, please open a ticket and the support team will be happy to help.
  Reply
  - Mert February 10th, 2021
    Sure i did a Purge All – LSCache after every change to optimization settings. If the JS combine is on, the issue persists. Hamburger menu and some js functions do not work. Although I added all the js files to the js exclude section, it still didn’t fix.
    Reply
  - Mert February 10th, 2021
    I fixed the issue, thanks.
    Reply
    Lisa Clarke February 10th, 2021
    Glad to hear that! If the solution is something that may benefit others, please feel free to share.
    Reply
Joeboy May 3rd, 2020
I have really been trying to get somewhere like above 85 on my site but I haven’t achieved that with this setting.
Can yo take a look to give a suggestion?
Reply
- Lisa Clarke May 4th, 2020
  You can take a look through our documentation for some ideas of what all of the settings do. For personalized tuning, we do offer a paid service. In particular, “Tier 4” service would be what you’d want for site tuning.
  Reply
Nestreeo December 1st, 2019
Hi, unfortunately I don’t have litespeed server and I’m using siteground hosting but LSCWP optimization has improved my site a lot. But I have a different page for mobile and I’m not sure its generating critical css for that page when browsed in mobile. Pagespeed score is good for desktop but not for mobile. Any suggestion please?
Reply
- Lisa Clarke December 2nd, 2019
  Hi, Nestreeo. Try turning Cache Mobile on. You can find that setting in the Cache settings tab.
  Reply
SRweb November 21st, 2019
My website working fast with LS cache. I don’t solve some issues as like- 1. Remove unused CSS (/min/1d034.css) and 2. Reduce the impact of third-party code blocked the main thread for 2,060 ms. Then please suggest to me, Thanks.
Reply
- Lisa Clarke November 25th, 2019
  I’m glad to hear you are seeing better speeds with LSCache. If you would like some advice for tuning particular settings, our Slack community might be able to help you. Or, try our support forum at the WordPress Plugin Directory, if you prefer.
  Reply
Roee yossef August 25th, 2019
Hey Guys,
Does the generated CSS styles are removed from the original file or both inline critical CSS and original CSS is loaded?
Reply
- Lisa Clarke August 26th, 2019
  Hello 🙂 The original CSS is not changed. So Critical CSS is loaded first, and then the original CSS is loaded, including any definitions that were also included in the Critical CSS.
  Reply
Donald Love April 19th, 2019
In several places (this post, Wiki page), it’s said that the CCSS is generated via cron-based queue when done in the background. What sort of timeframe are we talking about here? It’s clearly not seconds… minutes to hours? Days?
It’s the nature of most of us to make a change and then immediately go check it ourselves. That would seem to bias our experience in seeing FOUCs. It would be reassuring to know that CCSS is being generated quickly in the background.
Reply
- Lisa Clarke April 22nd, 2019
  Hi, Donald. Usually, it is within seconds or minutes. However we had a problem with the server this weekend that made it take much longer. We apologize if this has caused any inconvenience! We are working on improvements to the reliability of the service, as well as a way to let users know when CCSS requests are being impacted due to heavy load.
  Reply
Danny February 4th, 2019
After setting Generate Critical CSS In Background to off and cleared the lscache and checked the source code on the webpage which said everyting is in correct order………..still FOUC.
Reply
- Lisa Clarke February 5th, 2019
  Hi, Danny. Please create a ticket through our client area or by sending email to support@litespeedtech.com. Thanks!
  Reply
Nitish August 14th, 2018
Hi,
Could you please help me solve this issue with Litespeed post caches and generation of Ciritical CSS?
Litespeed caches whole HTML pages for logged out users to serve them more quickly. This means that once I post has been cached in logged out mode, I will have to purge all cache to make sure that visitors who are not logged in see a fresh copy.
After turning on the option to generate critical CSS, the code for pages has this code `Ciritical CSS Rules`. However, critical CSS is not generated instantly and created by a Cron job.
This means that if a logged out reader visits that particular post, the HTML code will look like `No CSS Rules`. Since, Litespeed caches pages for logged out visitors, this post will be cached with empty critical CSS.
Is there any way to make sure that critical CSS is also included in posts read by logged out users?
I hope that the question I am trying to ask is clear. If there is any confusion, I will try my best to explain it further.
Thanks. 🙂
Reply
- Lisa Clarke August 14th, 2018
  Hi, Nitish.
  Litespeed caches whole HTML pages for logged out users to serve them more quickly. This means that once I post has been cached in logged out mode, I will have to purge all cache to make sure that visitors who are not logged in see a fresh copy.
  Actually, this is not accurate. When you add a new post, the pages relevant to that post (i.e. the front page, the category archive, the tag archive, etc.) are all purged automatically. You do not have to Purge All. You can learn more about that here.
  As for Critical CSS, as long as you are not running a Purge All when you create/edit a post, the existing CCSS will be included in the cached HTML for that post.
  Does that answer your question?
  Also, I don’t know if you are aware of this, but LSCache also caches content for logged-in users by default. Unless you specifically turned it off, your site is serving cached content to everyone, not just logged-out users.
  Reply
  - Lauren Gray December 18th, 2018
    Hey, Lisa,
    Can you speak to this some more? After enabling Critical CSS on a couple sites, I’m seeing FOUC even when the critical CSS should now exist (both when logged in and logged out). I believe this is because the page HTML has been cached without the critical CSS. Does that sound possible/correct? Would the solution be to clear the LSCache? Would love to understand what’s happening here better and am happy to read through any resources you can provide. 🙂
    Best,
    Lauren
    Reply
  - Lauren Gray December 18th, 2018
    Hey, Lisa, ended up finding my way around just after submitting that comment! (I promise I looked beforehand, too! )
    Related post on troubleshooting mentioned paid support which included a troubleshooting guide where I found the “Still Seeing FOUC with Critical CSS Enabled” link which confirmed clearing LSCache should help.
    Phew!
    Reply
    Lisa Clarke December 19th, 2018
    Hi, Lauren.
    Yes, you are correct, and I’m glad you found some confirmation!
    Did a Purge All – LSCache work for you? We have had a few intermittent issues with the CCSS server over the last couple of days, so if you’re still seeing FOUC, that might be why. We’re working on it.
    I’m going to update this blog post to link to the wiki that ultimately answered your question 🙂
    Reply
    Lauren Gray December 19th, 2018
    Thanks for the reply, Lisa! Yes, “Purge All – LSCache” did seem to work for us. It was only happening on some pages, and those pages are working as expected now. Of course, the site has many, many posts so there’s always the possibility that we’re just not catching it. The site in question is http://recipetineats.com. 🙂
    Lisa Clarke December 19th, 2018
    Ok, and now that I’ve visited that page I suddenly feel the need to make a Christmas Trifle 😀
    I’m glad that solved your problem. And just to clarify, the number of posts really shouldn’t have any impact, since every post will use the same CCSS. (Now, if the site had many different types of posts [pages, posts, products, testimonials, etc.], that would make a difference, since each post type has its own set of CCSS generated.
    Apologies if you already realized that, but I thought I should clarify for anyone else who may be reading along.
Paul July 18th, 2018
It irritates the heck out of me That everytime i purge all caches or the system purges all caches the critical css starts to built all over again…….so visitors of the site keep on seeing the Fouc. Although it saves me around 400ms i have disabled this in the plugin settings.
Why does critical CSS have to built up again and again and again after purging cache?
Reply
- Lisa Clarke July 23rd, 2018
  Thanks for your feedback, Paul. There is probably some room for improvement in that area!
  Reply
- Lisa Clarke July 23rd, 2018
  Hey, Paul, we’ve been discussing it internally, and there are all kinds of reasons why removing CCSS from Purge All would not work. However, a good thing to remember is that it’s not always necessary to Purge All. If you, instead, press Purge All – LSCache, the Critical CSS is not purged in that case. (I’ve updated the blog post to reflect this suggestion.)
  Also, we’ll be updating the icon on the admin bar in wp-admin, so that it defaults to Purge All LSCache instead of Purge All.
  Reply