Performance
The CDN link from the Setup: CDN vs npm lesson downloads all of Bootstrap's CSS and JS, whether TrailMap uses a tenth of it or all of it. That's a completely reasonable tradeoff for getting started fast, but a production TrailMap build can do noticeably better once it's willing to add a build step — most of the tools for that were already covered earlier in this track, just not through a performance lens.
Ship Only the CSS You Actually Use
The Utility API lesson showed removing unused utility
groups from the $utilities map before compiling. Combined with the Sass build
from Sass Customization, TrailMap can drop entire
component partials it never uses (say, the carousel or the toast styles) by simply not
importing them, instead of importing everything through one @import "bootstrap":
// trailmap-custom.scss — import only what TrailMap uses
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/card";
@import "bootstrap/scss/buttons";
// skipped: carousel, toasts, spinners — TrailMap never uses them
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";bootstrap.bundle.min.js vs bootstrap.min.js
This tradeoff was introduced back in Setup — it's worth revisiting with performance in mind. Popper.js, the positioning engine behind tooltips, popovers, and dropdowns, adds real weight:
| File | Includes Popper? | Choose it when... |
|---|---|---|
bootstrap.bundle.min.js | Yes (larger) | TrailMap uses tooltips, popovers, or dropdowns anywhere |
bootstrap.min.js | No (smaller) | TrailMap only uses modals, collapses, alerts, carousels, etc. — none of which need Popper |
If TrailMap's only interactive components are a navbar collapse and a couple of modals,
loading the smaller bootstrap.min.js skips Popper entirely for a real, free
reduction in JS weight.
Lazy-Loading Images in the Trail Card Grid
The Advanced Grid lesson's row-cols-md-3 card
grid can easily hold dozens of trail photos. The native
loading="lazy" attribute defers loading images until they're about to scroll
into view — no library, no extra script:
<img src="eagle-ridge.jpg" class="card-img-top"
alt="Eagle Ridge Trail" loading="lazy" width="400" height="250">width/height alongside loading="lazy" reserves the image's space in the layout before it loads, preventing the trail cards below it from jumping around as photos arrive.Minimize Custom CSS That Fights the Framework
Every hand-written override rule loaded after Bootstrap's stylesheet is CSS the browser has to parse, plus specificity for you to keep straight later. The lessons on Sass Customization and the Utility API both exist to replace that override sheet with changes made once, at compile time — the smallest, fastest custom CSS file for TrailMap is one that barely needs to exist, because the Sass build already produced what the design needed.