Style optimization

Style optimization helps your store have a good-looking and well-organize experience to visitors.

Who can use this feature?

  • This feature is available for Pro and Enterprise plan users

Page loading

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.

  1. In "Speed up customization", click Style optimization

  2. Click Turn on page loading

  3. Select loading type: loading circle & loading process.

    If you select loading circle, select size of loading icon.

  4. Click Save

Critical CSS Generator

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.

  1. In "Speed up customization", click Style optimization

  2. Click Turn on Cricital CSS Generator

  3. Select pages of your website to apply CSS generate .

  4. Click Generate

    Critical CSS progress may take a few minutes.

  5. Click Save

pageCritical CSS Extraction deep dive

Last updated