What is Critical CSS and How Does it Work?
Updated over a week ago

The Critical CSS contains only the minimum required CSS code to correctly render any page's above-the-fold content.

Critical_CSS.jpg

Without Critical CSS, your visitors would temporarily see your site with missing styles until everything on the page loads. This hurts both actual and perceived performance.

NitroPack generates the Critical CSS by accessing your web page with JavaScript disabled. Doing this ensures the resulting styles don't rely on dynamically created elements from JavaScript. After all, the Critical CSS is only used before any other resources are loaded (the non-critical CSS and JavaScript).

Follow these steps if you want to see what your site would look like with only Critical CSS:

  1. Disable JavaScript in your browser. Follow this tutorial to see how to do it:
    โ€‹https://www.wikihow.com/Disable-JavaScript

  2. Access your website. What you see is how your site will load with Critical CSS. In some cases, some website themes may look strange with JS disabled. If you want to improve the overall user experience of your visitors, consult with your theme developer to enhance the style of your theme while JavaScript is disabled.

  3. Finally, re-enable JavaScript in your browser.

Did this answer your question?