Skip to content

Bootstrap Performance

Bootstrap can be lightweight or heavy depending on how you include it. This lesson covers strategies to reduce file size, avoid render-blocking resources, and keep pages fast.

Bootstrap Performance Overview

The full Bootstrap CSS bundle includes every component and utility class, most of which any single page won't use. Using a build tool like PurgeCSS, or selectively importing only the Sass partials your project needs, can dramatically shrink the shipped CSS compared to linking the full compiled file from a CDN.

On the JavaScript side, only pages that actually use interactive components—modals, dropdowns, carousels—need the JS bundle at all, and even then it can often be deferred or loaded asynchronously so it doesn't block the initial page render.

Concept Description Common Usage
Selective Sass imports Importing only used partials instead of bootstrap.scss Reducing final CSS bundle size
CSS purging/tree-shaking Removing unused utility classes from the build Further shrinking CSS for production
Deferred/async JavaScript defer or dynamic import of bootstrap.bundle.js Avoiding render-blocking script loading
CDN caching Shared, cached CDN files across many sites Faster repeat loads if the CDN version is already cached
Image optimization alongside Bootstrap Responsive images sized appropriately Reducing overall page weight beyond just CSS/JS

Bootstrap Performance Example

// vite.config.js or similar build config
// Only import the Sass partials this project actually uses
// custom.scss
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/utilities';

<!-- Defer JavaScript so it doesn't block rendering -->
<script src="bootstrap.bundle.min.js" defer></script>

Importing only the reboot, grid, buttons, forms, and utilities partials avoids compiling CSS for components like carousels or offcanvas panels that this particular project never uses, resulting in a smaller stylesheet. Adding the defer attribute to the JavaScript bundle lets the browser continue parsing and rendering the page instead of blocking on the script download and execution.

Top 10 Bootstrap Performance Examples

These are the performance techniques you'll apply most often to keep Bootstrap sites fast.

# Example Syntax
1 Selective Sass imports @import 'bootstrap/scss/grid'; @import 'bootstrap/scss/buttons';
2 Defer JS bundle loading <script src="bootstrap.bundle.min.js" defer></script>
3 Purge unused CSS in build config content: ['./src/**/*.html'] // PurgeCSS/Tailwind-style config
4 Use minified production files bootstrap.min.css / bootstrap.bundle.min.js
5 Self-host with cache headers Cache-Control: max-age=31536000, immutable
6 Lazy-load below-the-fold images <img src="a.jpg" loading="lazy" class="img-fluid" alt="...">
7 Preload critical CSS <link rel="preload" href="critical.css" as="style">
8 Load only needed JS plugins import { Modal } from 'bootstrap';
9 Use system fonts to avoid extra font requests $font-family-base: -apple-system, system-ui, sans-serif;
10 Compress assets with gzip/brotli Content-Encoding: br

Best Practices

  • Import only the Sass partials your project actually uses instead of the full bootstrap.scss file.
  • Run a CSS purging step in production builds to strip unused utility classes.
  • Defer or conditionally load the JavaScript bundle so it doesn't block initial rendering.
  • Use minified dist files (bootstrap.min.css, bootstrap.bundle.min.js) rather than unminified source in production.
  • Serve appropriately sized, compressed images alongside your Bootstrap layout.
  • Set explicit width and height on images to avoid layout shift while they load.
  • Measure real performance with Lighthouse or WebPageTest rather than guessing at bottlenecks.

Common Mistakes

  • Importing the entire Bootstrap framework when a project only uses the grid and a handful of components.
  • Loading the full JavaScript bundle on pages that contain no interactive Bootstrap components at all.
  • Not minifying custom CSS or JavaScript before deploying to production.
  • Ignoring image optimization entirely while focusing only on Bootstrap's own file size.
  • Assuming CDN caching alone solves performance without ever measuring actual load times.
  • Adding render-blocking scripts in the head instead of deferring or moving them near the end of the body.

Key Takeaways

  • Selective Sass imports and CSS purging significantly reduce Bootstrap's shipped CSS size.
  • JavaScript should be deferred or conditionally loaded based on whether a page actually needs it.
  • Minified production files are smaller and faster to parse than unminified source files.
  • Image optimization matters as much as framework optimization for overall page weight.
  • Real measurement tools like Lighthouse should guide performance decisions, not assumptions.

Pro Tip

Run Lighthouse or a similar audit on your production build before and after trimming Bootstrap's CSS and deferring its JavaScript—seeing the concrete before/after numbers makes it much easier to justify further optimization work to a team.

You now understand how to optimize Bootstrap for performance. Continue to Bootstrap Best Practices for a consolidated set of recommendations across the whole framework.