How To Use Critical CSS

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 CSSOn 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 CSSOnce 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.,Preload ImagesWhen 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.
IMPORTANT NOTE: If you change the above the fold content on a page, then you should regenerate the critical CSS.