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. 
2 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