Style optimization
Style optimization helps your store have a good-looking and well-organize experience to visitors.
Last updated
Style optimization helps your store have a good-looking and well-organize experience to visitors.
Last updated
Who can use this feature?
This feature is available for Pro and Enterprise plan users
A page loading, often seen as a spinning icon or progress bar, is a user interface element that signals to the user that the page is in the process of loading content.
By setting up a page loader, Avada SEO Suite helps your site have better experience improving the FCP and minimizes bounce rates. This sometimes may come in handy when your site has noticeable Content Layout Shifts and it would be better to only show the content after the page loader.
In "Speed up customization", click Style optimization
Click Turn on page loading
Select loading preset and size.
Click Save
During the painting of the website, the website will need the HTML and CSS first to show the content. In order to show the First Contentful Paint, the CSS is required to be downloaded first. Which pose a challenge for the browser when the main CSS file may range around 50kb or above.
Critical CSS Generator will improve the First Contentful Paint metrics by inlining the most important CSS of the Home, Product, Collection page to load along side with the HTML of the page, and then delay the loading of the render-blocking CSS files. By doing this, the FCP metrics will be improve and saving your site from bounce rate, later on better user experience.
Learn more about Critical CSS.
In "Speed up customization", click Style optimization
Click Turn on Cricital CSS Generator
Select pages of your website to apply CSS generate .
Click Generate
Critical CSS progress may take a few minutes.
Click Save After finishing CSS process, there'll be analysis of how it helps your store.
Learn more about how cricital CSS extraction works:
Critical CSS Extraction deep dive
