How to remove unused CSS in sage 10 bootstrap theme

sage
1

Hello,

I want to remove unused CSS to speed up the loading time. due to unused CSS I am getting LCP issue.

Please help me how to remove unused CSS or generate critical css .

Thanks

2 
require('laravel-mix-criticalcss');
...
mix
  .sass('resources/assets/styles/app.scss', 'styles')
  .sass('resources/assets/styles/editor.scss', 'styles')
  .criticalCss({
     enabled: mix.inProduction(),
     paths: {
       base: 'http://example.test',
       templates: './dist/styles/'
     },
     urls: [
       { url: '/', template: 'home' },
     ],
     options: {
       minify: true,
     },
   })

you can then create more critical css for templates you are using: singular, archive etc.

5

@Dogit

Thanks for your reply and help. I really appreciate it.

I added your bit, but there was a required module at top so I added this module using npm install laravel-mix-criticalcss --save-dev but that gives me the following error

Here’s my webpack.js code just to be sure I’m not doing something wrong
https://drive.google.com/file/d/11NfvwXD-v6yqNBU3rkdlzfYQKYkI2VSd/view

Waiting for your reply.
Thanks again.

6

The easiest way.

7

Hi @diomededavid

Thanks for your reply.

But I am using sage 10 and there is no file structure like this
Please help

8

As far as I know sage 10 only supports tailwind. Is this a new project?
Need more details and screenshots would help.
Do you have a _bootstrap.scss file? You may need to manually import.

In the same post I shared they also show how to use BS5 with Sage 10,

9

We started this in January
Do you have a _bootstrap.scss file? : No

You mean this one : https://tombroucke.be/blog/sage-10-bootstrap/

waiting for your reply.

10

If you started with a sage 10 theme from commit #33005e59 as described in https://tombroucke.be/blog/sage-10-bootstrap/ , laravel-mix-purgecss should be installed and this will remove all unused css from your production css file.

You could only include the needed classes from bootstrap, as described for sage 9 in https://tombroucke.be/blog/improving-sage-9-bootstrap-4-load-time/. In sage 10, bootstrap gets included from resources/assets/styles/config/external.scss. But with purgecss, if you run yarn build:production, purgecss will delete all unused css, so there’s no need to cherry-pick these files.

11

Yup. that is what I said

12

Thanks, @diomededavid @tombro

I tired both way https://prnt.sc/136dy7z and they removed unused CSS but still facing LCP issue. and purifycss is showing 50% unused.

13

Did you try this link in an empty project? It might help narrow down. If you get the empty project to work you can copy the build files over to your project.

I am using sage 9 with this setup:
https://discourse.roots.io/t/sage-9-1-please-test/20067

14

Hi @alkesh,

Have you tried with PurgeCSS?

Add Laravel Mix PurgeCSS to your project:

yarn add laravel-mix-purgecss purgecss-with-wordpress

and in your webpack.mix.js add:

require('laravel-mix-purgecss');
const purgeCssWithWordPress = require('purgecss-with-wordpress');

after

const mix = require('laravel-mix');

Also, you need to add PurgeCSS rules to your project:

mix.sass('resources/assets/styles/app.scss', 'styles')
  .purgeCss({
    whitelist: [
      ...purgeCssWithWordPress.whitelist,
    ],
    whitelistPatterns: [
      ...purgeCssWithWordPress.whitelistPatterns,
    ],
  });

Here is the documentation how to whitelist your classes:

15

Hi

Finally able to generate critical CSS and LCP issues is solved as well.
But now CLS issue is coming and FOUC as well

Please help.

16

This topic was automatically closed after 42 days. New replies are no longer allowed.