Try Now

How to Generate Critical CSS

Critical CSS is the minimum CSS required to render above-the-fold content i.e; The CSS required to render the part of a page in a visible view-port at the time of render.

So what Critical CSS feature in SpeedyCache do is, it extracts the Critical CSS of the page, and then in-lines the generated CSS in the HTML of that page and makes other externally included CSS asynchronous.

How to generate Critical CSS

There are 3 ways Critical CSS can be created

  • Using create now action in Settings tab under File Optimization Section
  • Directly whenever cache is created
  • Critical CSS for single post/page using the option in SpeeyCache Metabox

Using Create Now action

This method is Works better if Cache is already generated.

  • In SpeedyCache Go to -> Settings Tab -> File Optimization section.
  • In there enable Critical CSS and Save settings.
  • Once settings are saved now you can either click on Create Now action to preload the Critical CSS.
  • You can check the Logs too, it stores the logs of last 10 Critical CSS generation requests.
SpeedyCache Critical CSS Create Now

Critical CSS on Cache Creation

For this you just need to enable Critical CSS, and if your page is not cached and when it starts to cache, Critical CSS will start to generate in parallel too, and after a few seconds of generation of Cache, Critical CSS will be updated in the Cache files.

Critical CSS generated this way won't reflect in the Cache immediately, it may take 30 seconds if Critical CSS generation is successful.

Creating Critical CSS for Single Page

To create Critical CSS for single page, you need to open the page/post in edit mode, either with Classic Editor, or with Gutenberg editor.

Once you are in the edit mode, you will find a Metabox of SpeedyCache as shown in the image below

SpeedyCache Metabox generate Critical CSS

As you are in the editor all you need to do is Click on the Generate CriticalCSS button and the Critical CSS will be generated if successful.

These are all the possible ways to generate Critical CSS for your WordPress site and improve your First Contentful Paint(FCP).
If you face any issues related to Generation of Critical CSS or have query related to it, you can contact us at

    Was this page helpful?
    Newsletter Subscription
    Subscribing you to the mailing list