{"id":9840,"date":"2018-06-20T10:59:59","date_gmt":"2018-06-20T14:59:59","guid":{"rendered":"https:\/\/blog.litespeedtech.com\/?p=9840"},"modified":"2018-06-20T10:59:59","modified_gmt":"2018-06-20T14:59:59","slug":"critical-css-and-litespeed-cache","status":"publish","type":"post","link":"https:\/\/lswp.store\/index.php\/2018\/06\/20\/critical-css-and-litespeed-cache\/","title":{"rendered":"WpW: Critical CSS and LiteSpeed Cache"},"content":{"rendered":"<p><a href=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx.png\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-9842\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx.png\" alt=\"WordPress Wednesday: Critical CSS and LiteSpeed Cache\" width=\"640\" height=\"320\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx.png 640w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx-300x150.png 300w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx-600x300.png 600w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Welcome to another installment of <a href=\"http:\/\/blog.litespeedtech.com\/tag\/wordpress-wednesday\">WordPress Wednesday<\/a>!<br \/>\nToday\u2019s topic is: <strong>Critical CSS and LiteSpeed Cache<\/strong><\/p>\n<p>Chances are, if you\u2019ve played around with LiteSpeed Cache for WordPress\u2019 optimization features in the past, you may have encountered the dreaded FOUC, or \u201c<a href=\"https:\/\/en.wikipedia.org\/wiki\/Flash_of_unstyled_content\">Flash of Unstyled Content<\/a>.\u201d This is caused when the browser loads a page\u2019s content before it loads the styles defined for that content. The browser doesn\u2019t 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\u2019s a common problem, but it has a solution, and that is what we\u2019re going to explore today.<\/p>\n<p><strong><em>Disclaimer<\/em><\/strong><em>: The information contained in this post is accurate for LSCWP v4.5.0.1 [<\/em><a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/#developers\"><em>release log<\/em><\/a><em>]. If you are using a newer version of the plugin, some details may have changed. Please<\/em><a href=\"https:\/\/docs.litespeedtech.com\/lscache\/lscwp\/\"> <em>refer to our documentation<\/em><\/a><em> for the latest!<\/em><\/p>\n<h2>What is Critical CSS?<\/h2>\n<p>Your web browser needs two things in order to properly display a page:<\/p>\n<ul>\n<li>HTML, which includes the content, function and structure of the elements on the page<\/li>\n<li>CSS, which determines how those elements look when they are displayed<\/li>\n<\/ul>\n<p>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.<\/p>\n<p><a href=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx03-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-9854 size-full\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx03-1.png\" alt=\"Critical CSS and LiteSpeed Cache: FOUC and Normal Display\" width=\"1006\" height=\"434\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx03-1.png 1006w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx03-1-300x129.png 300w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx03-1-768x331.png 768w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx03-1-600x259.png 600w\" sizes=\"(max-width: 1006px) 100vw, 1006px\" \/><\/a><\/p>\n<p>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.<\/p>\n<p>So, how can you load CSS asynchronously <em>and<\/em> avoid the unstyled content? <strong>Critical CSS<\/strong>.<\/p>\n<p>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\u2019s that fraction which is called \u201cCritical CSS.\u201d 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.<\/p>\n<p>LSCache has three settings that define how Critical CSS is handled in WordPress.<\/p>\n<h2>How LSCache Handles Critical CSS<\/h2>\n<p>From the WordPress Dashboard, navigate to <strong>LiteSpeed Cache &gt; Page Optimization &gt; CSS Settings<\/strong>. You\u2019ll find the relevant settings about halfway down the page.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-12153 size-full\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/critical-css-updated.png\" alt=\"LSCache Critical CSS\" width=\"981\" height=\"419\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/critical-css-updated.png 981w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/critical-css-updated-300x128.png 300w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/critical-css-updated-768x328.png 768w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/critical-css-updated-600x256.png 600w\" sizes=\"(max-width: 981px) 100vw, 981px\" \/><\/p>\n<h3>Load CSS Asynchronously<\/h3>\n<p>This option defaults to <code>OFF<\/code>. 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.<\/p>\n<p>When you turn this option <code>ON<\/code>, 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.<\/p>\n<h4>The QUIC.cloud Connection<\/h4>\n<p>Critical CSS is one of <a href=\"https:\/\/quic.cloud\/quic-cloud-services-and-features\/\">QUIC.cloud&#8217;s Online Services<\/a>, and a certain number of CCSS calculations are provided for free to LSCache users every month. You can learn more about QUIC.cloud&#8217;s role in this process in <a href=\"https:\/\/docs.litespeedtech.com\/lscache\/lscwp\/pageopt\/#load-css-asynchronously\">our documentation<\/a>, and you can learn more about possible costs on <a href=\"https:\/\/quic.cloud\/online-services-costs\/\">the QUIC.cloud website<\/a>.<\/p>\n<h3>CCSS Per URL<\/h3>\n<p>This option defaults to <code>OFF<\/code>, which means that all Critical CSS files are generated by Post Type. In other words, there is one CCSS file for all <code>post<\/code>s, one for all <code>page<\/code>s, one for all <code>product<\/code>s, and whatever kind of posts you may have on your blog.<\/p>\n<p>If you turn this option <code>ON<\/code>, then a Critical CSS file will be generated for\u00a0<em>every single post<\/em>. This option generates many more files, so only use it if the styling for individual posts within a single type varies dramatically.<\/p>\n<h3>Inline CSS Async Lib<\/h3>\n<p>Use this setting to speed things up a bit and avoid render blocking by the CSS Asynchronous Library. It defaults to <code>OFF<\/code>.<\/p>\n<h2>A Few More Details<\/h2>\n<p><a href=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx01.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9844\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx01.jpg\" alt=\"Critical CSS and LiteSpeed Cache: Computer on a Desk\" width=\"1000\" height=\"799\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx01.jpg 1000w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx01-300x240.jpg 300w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx01-768x614.jpg 768w, https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx01-600x479.jpg 600w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p>A <strong>Purge All<\/strong> command will not delete any generated Critical CSS.<\/p>\n<p>It&#8217;s not always necessary to\u00a0<strong>Purge All<\/strong> anyway. It&#8217;s better to target your purges to what\u00a0<em>actually<\/em> needs to go. Purge All doesn&#8217;t take Critical CSS, but it does take optimized CSS and Javascript along with it. Consider using <strong>Purge All &#8211; LSCache<\/strong>, if all you need is to clear the cache. That option leaves everything else, including CCSS, intact.<\/p>\n<p>If you intend to regenerate CCSS, then you can use the\u00a0<strong>Purge All &#8211; Critical CSS<\/strong> button. Just be aware that regeneration will cost you <a href=\"https:\/\/quic.cloud\/online-services-costs\/\">QUIC.cloud credits<\/a>.<\/p>\n<p>Please note, you may need to <a href=\"https:\/\/quic.cloud\/docs\/onboarding\/adding-quic-cloud-ips-to-allowlist\/\">add QUIC.cloud&#8217;s Online Service IPs<\/a> to your firewall&#8217;s allowlist.<\/p>\n<p>If you have any questions about this, please leave a comment, visit <a href=\"https:\/\/wordpress.org\/support\/plugin\/litespeed-cache\/\">our forum<\/a>, or drop by <a href=\"https:\/\/goo.gl\/FG9S4N\">our Slack community<\/a>.<\/p>\n<p>&#8212;<br \/>\nHave some of your own ideas for future <a href=\"http:\/\/blog.litespeedtech.com\/tag\/wordpress-wednesday\">WordPress Wednesday<\/a> topics? Leave us a comment!<\/p>\n<p>Don\u2019t forget to meet us back here next week for the next installment. In the meantime, here are a few other things you can do:<\/p>\n<ul>\n<li>Subscribe to the <a href=\"http:\/\/blog.litespeedtech.com\/tag\/wordpress-wednesday\/feed\/\">WordPress Wednesday RSS feed<\/a><\/li>\n<li>Download <a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\">LiteSpeed Cache for WordPress plugin<\/a><\/li>\n<li>Learn more about the plugin <a href=\"https:\/\/www.litespeedtech.com\/products\/cache-plugins\/wordpress-acceleration\">on our website<\/a><\/li>\n<\/ul>\n<p>&#8212;<br \/>\n<em>This content was last verified and updated in March of 2022. If you find an inaccuracy, please let us know! In the meantime, see <a href=\"https:\/\/docs.litespeedtech.com\">our documentation site<\/a>\u00a0for the most up-to-date information.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>FOUC is caused when the browser loads a page\u2019s content before it loads the styles defined for that content. Critical CSS can eliminate that.<\/p>\n","protected":false},"author":1,"featured_media":9842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[82,316,317],"class_list":["post-9840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cache","tag-critical-css","tag-wordpress","tag-wordpress-wednesday"],"jetpack_featured_media_url":"https:\/\/lswp.store\/wp-content\/uploads\/2018\/06\/wpwxx.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts\/9840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/comments?post=9840"}],"version-history":[{"count":0,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts\/9840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/media\/9842"}],"wp:attachment":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/media?parent=9840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/categories?post=9840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/tags?post=9840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}