Use PurgeCSS to Remove Unused CSS in WordPress Themes

When developing WordPress themes, we often use CSS frameworks to ensure visual consistency and speed up development. Once theme development is complete, however, a large portion of the CSS styles in those frameworks may never actually be used in the theme.

Removing unused CSS is an essential step in front-end optimization. Without tools, it is almost impossible to complete this task manually. It takes too much time and it is easy to miss things. At the moment, WordPress still does not have a very convenient built-in tool or plugin for removing unused CSS, which is why many people skip this step entirely when doing WordPress performance optimization.

This article explains how to use PurgeCSS to remove unused CSS styles from WordPress themes in order to improve front-end performance. The method introduced here uses Gulp together with PurgeCSS, so before continuing it helps if you already have some understanding of the Gulp front-end build tool.

Use PurgeCSS to Remove Unused CSS

If Node.js is already installed on your computer and you have already created a project with the npm init command, use the following command to install PurgeCSS as a project dependency.

npm i -D gulp-purgecss

After installation, we need to create a Gulp task configuration file named gulpfile.js, and then add the following content to it.

const gulp = require('gulp')
const purgecss = require('gulp-purgecss')

gulp.task('purgecss', () => {
  return gulp
    .src('src/**/*.css')
    .pipe(
      purgecss({
        content: ['src/**/*.html']
      })
    )
    .pipe(gulp.dest('build/'))
})

After creating that file, we need to create a new src folder in the same directory as gulpfile.js, and then place our front-end site files inside it. After that, run the following command.

gulp purgecss

Once the command finishes, we will see a new build folder in the same directory. The contents of that folder are the stylesheet files processed by PurgeCSS, with unused CSS removed.

If we compare the CSS files before and after processing, we will find that the processed files are much smaller. For example, after running PurgeCSS, the CSS file size on WPZhiku was reduced from 220 KB to 75 KB, cutting about two-thirds of the original size. If you are using heavyweight themes such as Avada, the reduction ratio may be even greater.

Create a Whitelist for CSS Classes Generated by JavaScript

One thing to keep in mind is that some classes are generated by JavaScript. Those CSS classes may not appear in the downloaded static pages, so we need to add them to the PurgeCSS whitelist to prevent them from being removed. The configuration method is shown below. whitelist is used for specific CSS classes, while whitelistPatterns is used for classes matched by regular expressions. You can add what you need.

const purgecss = new Purgecss({
    content: [], // content
    whitelist: ['random', 'yep', 'button']
    whitelistPatterns: [/red$/],
})

Use It Together with the Tailwind CSS Framework

By default, PurgeCSS cannot handle the special class names used by Tailwind CSS. We can add a custom extractors configuration to handle them. This is mainly for classes in Tailwind that contain the : character, such as .xl:overscroll-auto.

extractors       : [
    {
        extractor : content => content.match(/[A-z0-9-:/]+/g) || [],
        extensions: ['css', 'html'],
    },
],

PurgeCSS cannot directly process dynamic websites generated by PHP files. Before using PurgeCSS, we need to download the entire site as static HTML first and then pass those files to PurgeCSS for processing. To download the HTML pages, we can use HTTrack or SiteSucker.

If you are already using tools such as Gulp, Webpack, or PostCSS to compile your WordPress stylesheets, you can also integrate PurgeCSS into those tools so that unused CSS is removed automatically each time you update the theme. I will not go into the details here, but if you need them, you can refer to the official PurgeCSS documentation.