Some issues you can get with Critical CSS Tool
Here is some issues you can get when use the Critical CSS Tool - you can check here to know how to fix it.
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:
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:
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 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:
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.
Last updated