Speed up your website with PurgeCSS

2019-08-21 | Toni Pohl

Modern websites and website templates use Cascading Style Sheets (CSS) intensively. To load websites faster, it makes sense to reduce these files to the essential content. You can do that with many tools. PurgeCSS is one of them. See the How To here.

I wanted to optimize a small, static one-pager website. I used a HTML5 template with Bootstrap 4. Nothing very fancy, but simple and modern. All my tests ran against my localhost.

Installation of PurgeCSS

PurgeCSS is a tool to remove unused CSS that can be used as command or as part of a development workflow. The tool can be installed with the Node Package Manager (NPM) as described at www.purgecss.com/cli. To install PurgeCSS globally, run this command:

npm i -g purgecss

Test with a sample website

My sample "SomeWeb" consist of a static website index.html that includes a bunch of CSS files, in folder assets/css as here.

image

Currently, the 10 CSS file are about 392KB. All files that are included are downloaded by browsers of the visitors of that website.

image

Run the web

We open the website with the helpful Live server extension in Visual Studio Code

image

…which then opens http://127.0.0.1:5500/index.html in my Google Chrome browser.

As we see in the Google Chrome Dev tools (press F12) when running the Audits, that the website performance is ok-ish, but could be better (58 and 5.1sec loading time).

image

So, let´s optimize the CSS as one step to improvement.

Run PurgeCSS

To reduce the CSS files, we open Node.js command prompt from the Start menu…

image

…and run the PurgeCSS command. The command should include these three parameters:

purgecss –-css [the CSS files *.css]
-–content [the website(s) *.html]
–-out [the path for the optimized files]

You can get the parameters with purgecss.com –help. If you omit the --out parameter, the command shows the output in the console window. Also, the target directory CSSNew must exist and should be created before. In my sample I used the full path to the website. The command looks as here (in one line):

purgecss --css C:\TFSRepo\atwork\SomeWeb\assets\css\*.css
--content C:\TFSRepo\atwork\SomeWeb\*.html
--out C:\TFSRepo\atwork\SomeWeb\assets\cssnew\

image

Done. If there´s no error message, the tool has completed it´s job. Comments are not removed.

Check the optimized result

Let´s see the reduced CSS file. Now they are only 132KB instead of 392KB. That´s a file size reduction to 33%.

image

Now let´s rename the both folders. Folder CSS becomes CSSOld and CSSNew becomes CSS (so that the new folder is used by the website without modifying index.html). Again, we reload the website and run a new Audit.

image

So, the Performance indicator went from 58 to 79. Still orange, but we saved a full second for loading the files, 4.2sec instead of 5.1sec loading time. That´s good. Of course, the website must be checked if everything is still looking good and complete.

Minimize CSS (and JS)

As next step, we could use online tools to minimize the CSS files, such as cssminifier.com, www.cleancss.com or www.minifier.org (or a ton of other tools or during a DevOps process).

image

The minimized content would replace the purged CSS content. Again, the website must be checked for completeness…

Use CDN

It´s also a good idea to replace common libraries through version from CDN, as GetBootstrap.com recommends. See it at Get started with Bootstrap. Simply search for "cdn [script]" in your favorite search engine to land at cdnjs.com. Then, you can replace the local versions by the CDN versions as here…

<!-- <script src="assets/js/vendor/jquery-1.12.4.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src="assets/js/bootstrap.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

etc.

More performance measuring

Another tip in Google Chrome Dev Tools (F12) is to press CTRL + SHIFT + P and type "Show coverage". This opens the Coverage panel that shows unused CSS parts, marked in red (unused), green (used) or both colors if a CSS class is partly used. In my sample, it seems, I can fully remove the animate.css stylesheet in my index.html since it´s shown as a completely red bar, etc.

measuringimage

Improving step by step

Of course, the Network, Performance and Audit features also help to identify more performance issues. So, removing the unused CSS brings and continue to optimize brings more performance as we see here…

image

And so on… the main indicators should be green.

Start here

So, PurgeCSS is a good start for optimizing a website. The rest can be optimized later. I hope this article gives you an idea how to start optimizing websites. Winking smile

Categories: Developer, English, HTML5, Tools

Source: https://blog.atwork.at/post/2019/08/21/Speed-up-your-website-with-PurgeCSS