# Some issues you can get with Critical CSS Tool

### 1. You got an error when generating Critical CSS:

When you generating Critical CSS, if you get an error - that means you have at least one error in the CSS syntax, it makes the Tool can't generate Critical CSS files. 

The error in the CSS syntax can come from 2 things:

* Error CSS syntax from a CSS file
* Error CSS syntax from inline CSS

### a. Error CSS syntax from a CSS file:

The error CSS syntax from a CSS file will appear like the image below:

![](/files/-MZ5kSbjizu_baIpofa2)

Here you can see the error:

* From the CSS file has URL:  **<https://pencitesting.com/wp-content/plugins/example-plugins/style.css>**
* The error syntax appears on line **221** of that CSS file

So, you can find the plugin/file that has this error and disable or fix the error syntax and try it again.

### b. Error CSS syntax from inline CSS:

The error CSS syntax from inline CSS will appear like the image below - it has **<http://localhost>** text on the error message:

![](/files/-MZ5mPcji7hQ31AF4j2H)

With the inline CSS error, you can find where it appears by selected the URL like the image above, press **Ctrl + V** to copy the URL and paste it to the browsers and you can see detail about this inline-CSS - and you can see the inline CSS has an error on line 6.

### 2. Generate Critical CSS files is successful but the website doesn't improve the scores?

If you see the message that the critical CSS files are generated successfully - but when you check your site on Google Page Speed, you don't see the scores are improving. Here are 2 things that can cause this problem:

#### a) The caching from your plugins/ hosting/server:

With this case, please make sure you've clear all the cache and disabled all the caching plugins to make sure everything renders correctly. When critical CSS files load to your site, you can enable a caching plugin later - as we did on the video tutorial.

One more thing that can be affected your caching is the caching from your hosting/server. Example like **SiteGround** hosting - they have a caching from themself, you can check [this guide](https://www.siteground.com/kb/clear-site-cache/) to know how to clear it. We also recommend you disable the caching from SiteGround since you will use a WordPress caching plugin.

#### b) The Firewall from the hosting and WordPress Security plugins:

In this case, that means the critical CSS files doesn't upload to your `/wp-content/uploads/` folder. It can be caused by the Firewall from your hosting or the security plugins you're using. Let's disable the Firewall or security plugins then refresh the Critical CSS Tool & click the "Upload CSS" button to re-upload it - when everything is uploaded, you can enable FireWall/ Security plugins again:

![Refresh the tool and click to "Upload CSS" button](/files/-MZ5owXqR0p1goDjANEK)

### Or use another way: Manually upload CSS files to your hosting by:

* Login to your hosting > File Manager or access the files via FTP account by using a tool like FileZilla
* Go to directory  **/wp-content/uploads/** of your website > and create a new folder with name  **critical-css**   - if you don't see it.
* Open the folder you've saved the Critical CSS Tool  > go to directory **resources/app/criticalcss/src/dest** > click on your website URL here > and you can see all critical CSS files the tool generated for your site here. Copy all the CSS files and upload it to folder  **critical-css**  as we said above.


---

# 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://optimize.pencidesign.net/2.-create-critical-css/some-issues-you-can-get-with-critical-css-tool.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.