# Style optimization

{% hint style="info" %}
**Who can use this feature?**

* This feature is available for Pro and Enterprise plan users
  {% endhint %}

### Page loader

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. 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 loader
3. Select loading preset and size.
4. Click **Save**

<figure><img src="/files/QDxvebl2kTNbS7l5IONG" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

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.

{% hint style="info" %}
Learn more about [Critical CSS. ](/seo-suite-help-center/knowledge-hub/critical-css-extraction-deep-dive.md)
{% endhint %}

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

2. Click **Turn on** Cricital CSS Generator

   <figure><img src="/files/gQB8aTwTl0LaslUhtPuO" alt="Critical CSS Generator turn on"><figcaption></figcaption></figure>

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

   <figure><img src="/files/5Q2dK8iY3Gh4nOVnga6D" alt="Critical CSS Generator applied to pages"><figcaption></figcaption></figure>

4. Click **Generate**

   Critical CSS progress may take a few minutes. <br>

   <figure><img src="/files/ibRsFnnQZQk67wxRVaEO" alt="Critical CSS Generate"><figcaption></figcaption></figure>

   <figure><img src="/files/3ealJOGOKCrHfHDxFuJZ" alt="Critical CSS Generator is done"><figcaption></figcaption></figure>

5. Click **Save**\
   After finishing CSS process, there'll be analysis of how it helps your store. <br>

   <figure><img src="/files/CBoc3B9siDjwNArTykr2" alt=""><figcaption></figcaption></figure>

Learn more about how cricital CSS extraction works:

{% content-ref url="/pages/hMEjYdl3DDKqeXVzFDXw" %}
[Critical CSS Extraction deep dive](/seo-suite-help-center/knowledge-hub/critical-css-extraction-deep-dive.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avada.io/seo-suite-help-center/site-speed-up/speed-up-custom-mode/style-optimization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.