Is there any likely hood in the future that the locked bootstrap css may have the same attributes in terms of the ‘Cleanup’ option of css, so that all unused classes within the Bootstrap css would not be included in the published/export.
1 Like
There are some third-party tools that can do this, but my question is, what’s the advantage? Even if you cut the file size in half, the difference would be virtually imperceptible on a 4G or broadband connection.
The last BSS website I built scored 98 Performance on Lighthouse using a locally hosted version of bootstrap.min.css which showed a transfer size of 47,961 bytes. Lighthouse suggested I could save 200 ms by removing unused CSS, but looking at the waterfall, the file downloaded in just over 100 ms second, so Lighthouse is hallucinating with its 200 ms estimate. If I used a CDN, I’d probably score 100. Again, an imperceptible difference.
You might want to take a look at this thread, where we discussed this subject three years ago. Take particular note of Martin’s answer…
2 Likes
@kirbyhowarth If I were to approach this from a automated standpoint using Bootstrap Studio as your starting point I would utilize the sass compiler Bootstrap Studio provides. Then you would be able to import only the required components to optimize your exported bootstrap.css file.
From the Bootstrap Framework site instructions you only import what is needed:
scss/bootstrap.scss
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
Then I would handle everything else with Python after export as it will perform the purify css, and opening the html file to inline the purified css directly into the html file for you. The following is a snippet example with the module calls removed …
from and @ import the blah blah python librarys...
# Step 1: Minify the CSS
with open("styles.css", "r") as f:
css_content = f.read()
minified_css = rcssmin.cssmin(css_content)
# Step 2: Clean Unused CSS (Assuming purify-css is globally installed)
subprocess.run(["purifycss", "styles.css", "index.html", "--min", "--out", "cleaned.css"])
# Step 3: Read cleaned CSS and HTML files
with open("cleaned.css", "r") as f:
cleaned_css = f.read()
with open("index.html", "r") as f:
html_content = f.read()
# Step 4: Parse HTML and inject cleaned CSS into <head>
soup = BeautifulSoup(html_content, "html.parser")
head = soup.head
style_tag = soup.new_tag("style", type="text/css")
style_tag.string = cleaned_css
head.append(style_tag)
# Step 5: Write Modified HTML
with open("modified.html", "w") as f:
f.write(str(soup))
You would end up with your html file having the exported css cleaned and inlined which will save you countless minutes. You would still have a few rountines to remove <scripts and anything else in the head section like title links etc etc. Those are pretty easy routines with Python Bsoup.
All that to save (maybe) .05 seconds on page load. 
3 Likes
Plus when Bootstrap introduces some internal breaking changes then one has to figure out the countermeasures. I also say it is not worth the effort.
It might be a better idea to load assets locally when CDN fails:
https://www.google.com/search?q=load+assets+locally+when+cdn+fails
How does Google’s evaluation of the page compare if the CSS is purged? This, it seems to me at least, is the important question.
My bet is that it would probably be too small of a difference to even register on Google’s Pagespeed insights, but you’d actually have to do the purge and the run a before and after test to know for certain. But we can experiment…
Unminified, the current version of bootstrap.min.css is 228 kilobytes. Suppose we purged out all the unused CSS and it cut the size down to half (114 kb).
For the purpose of this experiment, we could add an ADDITIONAL random CSS file off 114 kb to the page, and see if it affects the pagespeed score.
So I did just that. I have a website with an unminified version of bootstrap.min.css that scores 99 on Performance on Lighthouse. I made a random CSS file filled with random classes and rules that was 157 kb and added it to my page, and re-ran Lighthouse.
The new score?
99
It seems to me that purging unused classes is a waste of time.
1 Like
Fascinating. Thanks for looking into that 
I think if you can reduce the Bootstrap CSS file, you may as well. However, I don’t suppose it’s likely many users would notice a practical real world difference anyway, even if it was reflected in a PageSpeed score.
I think the most frequent mistake I see a lot of people making when working with Bootstrap probably has to be when they write their own custom CSS for things that could be achieved with Bootstrap classes alone. This is easy to avoid, and means that you don’t bloat your site with loading the Bootstrap CSS file plus your own custom CSS. It’s a much more practical thing to change and look out for.
1 Like