Have you ever loaded your favorite website only to have the text and links of the page displayed before the images and video and other website stylings, like coloring and specific fonts, then after a few seconds the page looks normal?
That’s called a FOUC, or Flash of Unstyled Content.
This happens when the browser loads the content of a page before it loads the CSS styles that go with it. As a result, the browser doesn’t know where to put the content on the page, so it interprets it as best it can, which is to display the text without any formatting at all.
If you recently enabled the Load CSS Asynchronously feature in the LiteSpeed Cache for WordPress Plugin and you’ve noticed an uptick in FOUC incidents, then you should know, this is actually a side effect of using the Load CSS Asynchronously feature.
Fear not, the problem has a solution, and that’s what we’ll be covering in this Knowledge Base article on Generating Critical CSS in the LSCache for WordPress plugin.
Above-the-fold refers to the information that loads in the browser window before the user has to scroll down.
How to Generate Critical CSS in LiteSpeed Cache for WordPress
What is Critical CSS?
First, let’s cover a little bit about what Critical CSS is and how CSS is typically used when it’s unoptimized.
The modern web browser requires a few things in order to properly display a page. At a minimum, two of these things are:
- HTML Code, which includes the content, function, and structure of the content and other elements on the page being requested.
- The CSS file sets how the content and elements on the page should look after they are loaded.
If you remember your HTML, you know the CSS typically goes in the Header which gets loaded before the Body. That means there’s a lot of waiting for everything to load. As a result, sites like GTMetrix will suggest you load your CSS Asynchronously.
Asynchronously means the CSS is loaded separately from the rest of the content on the page.
This creates the problem we talked about above — the dreaded FOUC.
So how can you load your site’s CSS asynchronously and avoid a FOUC incident? By using Critical CSS>
Stylesheets are often large and complex, as they contain styles for every element on your site… this level of detail increases the amount of time your browser needs to parse through the information and render out what is needed, which is why it takes so long.
However, only a tiny portion of the styles are needed for displaying information above the fold.
The tiny bit of the styles needed is what is called “Critical CSS”. If the Critical CSS can be quickly loaded, a FOUC issue won’t occur and the rest of the CSS and HTML can be loaded asynchronously, and the user will never know the difference, except the page will load a bit faster.
Are you tired of slow WordPress hosting? We use LiteSpeed caching to deliver content to your visitors almost instantly. ⚡ Check out our WordPress Hosting plans
How to Enable Critical CSS in the LiteSpeed Cache Plugin for WordPress
Enabling Critical CSS in the LSCache for the WordPress plugin is really easy, however, you need a Quic.cloud domain key to use this feature as QUIC.cloud handles the generation of Critical CSS and loads remaining CS asynchronously. The two features go hand in hand with each other, so it’s all built into one feature with the current version of the LSCache for WordPress Plugin.
Step 1: Login to your /wp-admin and in the menu on the left, hover over the LiteSpeed Cache option. Then, in the little menu that pops out, click General.
Step 2: When the General Settings page opens, look for the Domain Key Section.
Click Request Domain Key.
After clicking Request Domain Key, your page will reload and you will see this message at the top of the page:
If you wait about a minute, maybe two, then refresh the page again, you’ll note the Domain Key field is filled with ***. This means you have a domain key from Quic.Cloud!
Your domain key field will look like this when your key has been issued:
Step 3: Now to enable Critical CSS, click Page Optimization in the LiteSpeed Cache menu on the left.
Then click Save Changes in the top right corner to save your changes.
And that’s it! Now your CSS will load asynchronously and Quic.cloud will handle the generation of Critical CSS for you!