How To Use Critical CSS

Critical CSS is the minimum amount of CSS needed to style the content that appears above the fold when a page first loads. Instead of making the browser wait for your entire stylesheet to download before it can display anything, critical CSS lets the browser style and show the top of your page almost instantly — while the rest of the styles load in the background.

Avada includes the option to enable/disable Critical CSS. This performance feature is not automatically enabled upon installation of Avada and can be enabled in the Avada Performance Wizard (Step 6 – Optimization) or in the Avada Dashboard.

Once Critical CSS is enabled, you can access the Critical CSS page from the Avada Dashboard by navigating to Avada → Maintenance → Critical CSS.

Critical CSS is the CSS necessary to style the above-the-fold content. When generated for a page, this will be loaded into the website’s page head, with the rest of the styles moved to the footer, which should mean the above-the-fold content is styled more quickly and there is less render-blocking time.

On the right-hand side of the Critical CSS page, you can select which content you want to generate the Critical CSS for. Options are Homepage, All Pages, Specific Pages, Global Single Post, and Global Single Portfolio. Make your choice, and then click on Generate Critical CSS.

Depending on your choice and the number of pages or posts on your website, this CSS generation may take some time. You will see a dialog, as shown below, while the CSS is being generated. Do not close the browser during this process, or it will be interrupted.

Once the process has completed, you will see the screen look something like this (shown below), with the pages for which Critical CSS has been generated listed.

When you hover over the generated CSS, you can see links below each set to help you manage the Critical CSS. You can delete the set entirely, or clear or regenerate both the Mobile and Desktop CSS. There is also a Regenerate button at the far right, which regenerates both.

When critical CSS is generated, it also checks for images above the fold that are set to skip lazy loading. If any are found, it will save those along with the critical CSS and preload them to speed up load time.

After a major Avada update, previously generated Critical CSS may no longer match the updated styles, causing visual issues or layout artifacts on the website. For this reason, rebuilding your Critical CSS is always recommended after a major update.

In some cases, the Avada team may also temporarily disable Critical CSS during an update to help prevent these issues for users. If this happens, an Admin Notice will be displayed. The best way to restore Critical CSS is to regenerate all Critical CSS using the bulk actions tool, and then re-enable the feature if needed.

No, it’s not necessary. If a third-party cache plugin is in use, it makes sense to do so. Critical CSS adds a dedicated style tag to the website’s head with the above-the-fold CSS, and moves the remaining compiled styles to the footer. So, it could be affected by third-party cache plugins.