Critical CSS (CCSS)

“Critical CSS” is the minimum CSS code necessary to style a page for the first paint. Pages with critical CSS inserted directly into the HTML avoid the dreaded FOUC, or Flash of Unstyled Content, when loading CSS asynchronously.

FOUC happens when CSS files and HTML files are loaded at the same time. If the HTML loads faster, before the CSS can be processed, the content will flash on the screen unstyled, until the CSS files are read.

Our CCSS service generates Critical CSS for your pages, and inserts it directly into the page’s HTML. Even if the CSS files are loaded more slowly than the page HTML, the first screen will still display fully formatted. This is because the necessary CSS was included in the HTML.

Use our Critical CSS service to load your pages properly formatted, near instantly!

How it Works

Flash of Unstyled Content, as HTML loads before CSS is ready

Critical CSS avoids FOUC and loads the page properly styled

CCSS is the CSS needed to style content visible at first paint

<!doctype html>
<html>
  <head>
    <title>
     An Optimized Web Page
    </title>
     <style type="text/css">
      (Your minified inline Critical CSS would be here)
     </style>
  </head>
  <body>
     (Your markup)
  </body>
</html>

CCSS is inserted directly into the page’s HTML, dramatically reducing the perceived load time, and ensuring content is loaded fully styled.

Cost

Free for the first 100 CCSS requests/month. LiteSpeed Server users get up to 1200 additional free CCSS requests/month. 5000 CCSS requests may be purchased for 3000 credits.

Tiers*

Monthly free quota for Critical CSS processing

Tier Free Quota
Basic
100 calculations
LiteSpeed Server
500 calculations
LiteSpeed Enterprise
1,000 calculations
QUIC.cloud Hosting Partner
2,000 calculations

* See Pricing page for description of tiers.

Pay as You Go

Purchase one-time additional Critical CSS quota
Product Quota Cost
1 Refill Unit
5,000 calculations
3,000* credits

* Introductory rates. Please see the Pricing Page for details.

Join Forces with QUIC.cloud

Team up with QUIC.cloud! If you are interested in donating a node, using our service in your own product development, or even if you are a CDN service interested in collaboration, we want to hear from you! In return, you will be helping your own customers and getting your name seen by our QUIC.cloud users. It’s a win-win!