WpW: Critical CSS and LiteSpeed Cache

June 20th, 2018 by LSCache 33 Comments

WordPress Wednesday: Critical CSS and LiteSpeed Cache

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 the Load CSS Asynchronously optimization feature. It’s a common problem, but it has a solution, and that is what we’re going to explore today.

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.

Critical CSS and LiteSpeed Cache: FOUC and Normal Display

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 > Settings > Optimize. You’ll find the relevant settings about halfway down the page.

Critical CSS and LiteSpeed Cache: LSCache Optimization Screenshot

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 can load more quickly this way, but it may initially load without formatting, as described above. To avoid that problem, you will want to generate the Critical CSS and load that first. That is what the next setting is for.

Generate Critical CSS

This option defaults to ON, but it only works if Load CSS Asynchronously is also ON. When both settings are enabled, the Critical CSS is generated by LiteSpeed’s remote CCSS server, and then sent back to LSCache.

Note that some themes already generate Critical CSS for you. In that case, you can turn this option OFF.

Once the Critical CSS has been generated, it will be loaded first, and then the rest of the CSS will be loaded asynchronously with the HTML. The page will no longer load without formatting. Mission accomplished!

There is one small issue, though. When your site has not yet had the Critical CSS generated (or after a Purge All), the first visitor to request a page will need to wait for LSCache’s remote CCSS server to generate the styles. That can take a few seconds that the visitor may not be willing to spend. This leads us to the next setting.

Generate Critical CSS in the Background

You can avoid having visitors wait for the initial calculation of Critical CSS by turning this option ON. (It is ON by default, but it will not work unless the previous two options are also ON.)

When this setting is enabled, the first visitor to request the page doesn’t have to wait for the Critical CSS to be generated. Instead of waiting for the remote CCSS server to calculate and return the Critical CSS, LSCache instead adds the page to a cron-based queue to be calculated later in the background. In the meantime, the page continues to load asynchronously for the visitor without waiting.

The only drawback to this approach is that the first visitor is likely to get the FOUC. You need to decide which is worse: a quick flash of unformatted content? or having to wait a few seconds for the Critical CSS to be generated before anything on the page loads at all? If it were me, I’d take the FOUC.

A Few More Details

Critical CSS and LiteSpeed Cache: Computer on a Desk

Critical CSS is generated for the different types of pages that may be displayed on your site, but is not generated page-by-page. For example, there is a set of Critical CSS that is applied to all posts, another that is applied to all category archives, and another that is applied to all product pages, etc.

A Purge All command will delete all generated Critical CSS. However, if you purge an individual page, like example.com/store/earrings/, the Critical CSS that had been generated for product pages will still be immediately available for use the next time the page is requested.

It’s not always necessary to Purge All anyway. It’s better to target your purges to what actually needs to go. Purge All takes Critical CSS as well as 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.

For more on how CCSS and cache interact, and why you might still be seeing FOUC when CCSS is enabled, read this wiki article.

Please note, you may need to whitelist our remote CCSS server: ccss.api.litespeedtech.com

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

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

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:


Related Posts