Integrating PurifyCSS / PurgeCSS to clean unused CSS in bootstrap

Ideas
1

Hey there, Bootstrap Studio is awesome, but just wondering if there's a chance of integrating any of the popular "CSS Cleaners" out there like purifyCSS, purgeCSS, etc. to clean any unused CSS from bootstrap's CSS. Perhaps this feature can be introduced at the "Export Settings" page, to reduce boostrap css filesize, hence increasing page load speed.

I've tried the CTRL+P > CSS Cleanup, but it only cleans up the new custom css at styles.css.

Thanks!

2

The CSS Cleanup feature in Bootstrap Studio will cleanup any CSS files you create, but it will not remove any CSS from the standard Bootstrap CSS. This is by design. If you truly want to slim down Bootstrap by removing unused classes you can use those third party utilities, but I'd advise caution, as they're not always 100% reliable.

Also, for what it's worth, I gave this a lot of thought about a year ago. I've done quite a bit of research on optimizing page load speed using Google's Page Speed Insights tool. A typical minified bootstrap file is about 30kb. If you stripped out all the classes you don't use, you might save 4-5kb, which would equate to maybe 4-5 tenths of a second in loading speed on a 3G network. On a 4G network it would be almost imperceptible.

There are FAR better ways to optimize the loading time of most websites than trimming a few kb from their CSS files, especially if the CSS files are already minified.

Poor image optimization is generally the biggest killer in terms of page load speed.

3

Thanks for sharing.

On the other hand, just wondering on how did you get the css down to 30kb? The bootstrap.min.css generated from the export function is 157kb.

4

I'm going by how Google sees the download in Page Speed Insights.

enter image description here

5

Thank you for sharing this idea!

Modifying Bootstrap to remove unused styles would have one major negative consequence - it will differ from the official bootstrap.min.css and this will make using a CDN impossible. As mentioned above, the savings are not very large because web servers apply gzip compression, which shrinks the CSS considerably.

Using a CDN can speed your site much more than the kb that purging unused CSS would save, so it would generally have the opposite effect of a speed up. Still, if you wish you can import a cut down version of Bootstrap and use it as a custom theme.

6

Thanks everyone for the replies, appreciate it :D