WordPress plugin to render your CSS as fast as possible. Crush your lighthouse scores by simply activating the plugin.
After videos and images, CSS is usually the main culprit on most websites for large network requests, especially with the prevalance of large CSS frameworks like Bootstrap. On top of that, the total file size isn't the only thing leading to poor speed scores and perceived page loads. The actual visual rendering of the page counts for a lot too.
If you look at Google Lighthouse's metrics you'll see that most of them are highly impacted by how your CSS renders your page (not just the size). Therefore your CSS should be highly optimized.
- Takes inventory of all the styles used on each page of your WordPress site
- Removes anything unused from them
- Based on an alaysis of the distribution of your CSS on your pages, it will split the files into priority chunks:
- Global Critical
- Global Medium
- Global Low
- Page specific
This method works best on an HTTP/2 connection where resources can be downloaded in parallel (more smaller files are better than fewer larger ones). There is an option however to limit requests and reduce the amount of splitting that's used.
If your theme uses PurgeCSS itself, such as in TailwindCSS, you may want to just build your own optimized files yourself in your theme. One problem you may run into however, is that PurgeCSS won't be able to find the classes generated by WordPress, only your source code. This plugin can generate a text file with all the WordPress classes used so your build process can pick up on it and avoid over-purging.
Install the plugin and then visit pages in order for the plugin to take inventory of your pages. On trafficked sites this should happen by itself, but in cases of low-traffic or dev sites, you may want to manually visit the page.
https://betterprogramming.pub/3-libraries-to-remove-unused-css-f09ffc9777da https://github.com/sabberworm/PHP-CSS-Parser Tailwind purge regex:
/[^<>"'`\s]*[^<>"'`\s:]/g
Regex for extracting tag names and classes
(?<=id=")[^"]+|(?<=id=')[^']+|(?<=\[id\]=")[^"]+|(?<=\[id\]=')[^']+|(?<=<)[\w_-]+|(?<=[\[?ng]{0,2}class[Name]{0,4}\]?=")[^"]+|(?<=[\[?ng]{0,2}class[Name]{0,4}\]?=')[^']+|(?<=@include\s)[^\s]+