How To Use Critical CSS
Last Update: February 13, 2023
Critical CSS is a performance feature that was added in Avada 7.4. You can enable this in the Options > Performance tab, or when going through the Performance Wizard. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS, or at Maintenance > Critical CSS from the Avada Dashboard.
Both take you to the Critical CSS page, where you can generate Critical CSS for both pages and posts. Critical CSS is the CSS necessary to style the above the fold content. When generated for a page, this will be loaded into the page head, with the rest of the styles moved to the footer, which should mean the above the fold content is quicker to be styled and there is less render blocking time.
Generate Critical CSS
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 etc. you have on your website, this CSS generation may take some time. You will see a dialog as can be seen below, while the CSS is being generated. Do not close the browser during this process, or it wil be interupted.
Manage Critical CSS
Once the process has completed, you will see the screen looks something like this, with the pages listed for which Critical CSS has been generated.
When you mouse over the generated CSS, you can see some links underneath each set to help you manage the Critical CSS. You can delete the set entirely, or you can clear or regenerate both the Mobile CSS or the 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 which are set to skip lazy load. If any are found, it will save those along with the critical CSS and preload them to speed up load time.
Critical CSS Disabled After Major Update
After a major update of Avada, the Critical CSS will be temporaily disabled. This happens automatically, as after Avada has been updated, the old CSS can cause artifacts on your pages. The best way to restore the critical css is to regenerate all critical css (using bulk actions) and then enable it.