Current State (Aug 5, 2025)

So in the last part we did the font optimizations, You can check the Part - 2

So the performance had been good after that, which resulted in scoring 100 for performance in Lighthouse for Desktop view.

In this part, we are going to optimize our styles.

Lighthouse Audit

So as I ran the homepage audit again, I found the following critical warning that, there were few render blocking requests, 2 css files which were causing this issue (since its almost 67KB) and to download this file it takes sometime as you can see in the image below:

So we can see that the critical warning is for the css file, so we can see that the css file is taking a lot of time to load. The size being 60KB, which was taking 80ms to load.

Webpagetest Report

Next, I ran the webpagetest analysis for the site and found out this:

And in the network tab seeing the style file, So we can see that the css file is almost 262KB, taking around 58ms to load.

Fixing the issue

So the first thing i did is to optimize the css file, by compressing it and removing unwanted css rules.

Added the tailwind purge config to tree shake the unused styles from the final css file.

In postcss.config.mjs file we can see that we are using the tailwindcss plugin to optimize the css file.

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
  },
};

export default config;

And in the tailwind.config.ts file added the purge rules to optimize the css file.

const config = {
 content: [
     './src/**/*.{ts,tsx}',
  ],
  purge: {
    enabled: true,
    mode: 'all',
    preserveHtmlElements: false,
    options: {
      keyframes: true,
    },
    content: [
    './src/**/*.{ts,tsx}',
    ],
  },
  ...
}

Also, I moved the prisma code syntax highlighting css to load only on blog posts pages, so that it doesn't slow down the loading time of the website.

Since its not being used in other places, I removed it from the main css file and added a new import to load only on blog posts pages.

articles.css

@import "prism-themes/themes/prism-material-dark.css";

Result after optimization

After doing this changes the lighthouse scores showed an improvement of 10% in the performance. Our new stylesheet is now 121KB in size, which was earlier 262KB

As you can see the Render Blocking Requests error is gone now and Reduce unused css error is now optimized now.

That's all folks, in the next article we will see more optimizations.