Oh Dear is the all-in-one monitoring tool for your entire website. We monitor uptime, SSL certificates, broken links, scheduled tasks and more. You'll get a notifications for us when something's wrong. All that paired with a developer friendly API and kick-ass documentation. O, and you'll also be able to create a public status page under a minute. Start monitoring using our free trial now.

Reducing the size of a css file

Original – Nov 20th 2017 by Freek Van der Herten – 2 minute read

PurgeCSS is a tool that can reduce the filesize of a CSS file. It does this by removing any css classes that are not used. It can detect which CSS classes are used by scanning the source files of your application.

In this tweet Jonathan Reinink shared how it can be configured in Laravel Mix:

???? I just gave Purgecss a try on project using @tailwindcss, and I'm super impressed. It massively reduce the final CSS file size with basically no work on my part.

Here's my Webpack config: https://t.co/MOhrzToqot

Big thanks to @AndrewDelPrete for figuring this out. ????
— Jonathan Reinink (@reinink) 20 november 2017

Jonathan mentions massive reductions in the filesize of a css. Let's take a look at how much is massive. This is the output of yarn run production for murze.be before installing PurgeCSS.

stats before purgecss

155 kB for front.css and 162 kB for back.css. Not bad. Let's add PurgeCSS.

stats before purgecss

The resulting files are 90% smaller. Pretty impressive!

If you want to know more about PurgeCSS be sure to check out this blogpost by Andrew Del Prete.

Stay up to date with all things Laravel, PHP, and JavaScript.

You can follow me on these platforms:

On all these platforms, regularly share programming tips, and what I myself have learned in ongoing projects.

Every month I send out a newsletter containing lots of interesting stuff for the modern PHP developer.

Expect quick tips & tricks, interesting tutorials, opinions and packages. Because I work with Laravel every day there is an emphasis on that framework.

Rest assured that I will only use your email address to send you the newsletter and will not use it for any other purposes.

Comments #

What are your thoughts on "Reducing the size of a css file"?

Comments powered by Laravel Comments

Want to join the conversation? Log in or create an account to post a comment.