Bootstrap Performance Optimization
Introduction to Performance Optimization
Bootstrap provides a comprehensive framework with many components and utilities, but including the entire library can impact performance. This guide covers techniques to optimize Bootstrap for better performance.
Custom Build with Sass
One of the most effective ways to optimize Bootstrap is to include only the components you need.
Step 1: Install Dependencies
npm install bootstrap sass
Step 2: Create a Custom Import File
Create a custom Sass file that only imports the components you need:
// custom-bootstrap.scss
// Required
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// Optional components - comment out what you don't need
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
// Only include the components you need
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/card";
// @import "bootstrap/scss/carousel";
// @import "bootstrap/scss/dropdown";
// Utilities
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";
Step 3: Compile the Custom Build
sass custom-bootstrap.scss custom-bootstrap.css
Using PurgeCSS
PurgeCSS analyzes your HTML and JavaScript files to remove unused CSS classes from your final bundle.
Step 1: Install PurgeCSS
npm install --save-dev purgecss
Step 2: Configure PurgeCSS
For a webpack project, you can use PostCSS with PurgeCSS:
// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html', './src/**/*.js'],
defaultExtractor: content => content.match(/[\w-/:]+(?
safelist: [
/^dropdown/,
/^nav/,
/^modal/,
/^carousel/,
/^collapse/,
/^show$/,
/^fade$/,
/^active$/,
/^d-none$/,
/^d-block$/,
/^d-flex$/,
/^alert/,
/^btn/,
/^col/,
/^row$/,
/^container/,
/^card/,
/^table/,
/^form/,
/^input/,
/^custom/,
/^toast/,
]
})
module.exports = {
plugins: [
require('autoprefixer'),
...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
]
}
JavaScript Optimization
Bootstrap's JavaScript components can also be optimized for better performance.
Individual Component Imports
Import only the JavaScript components you need:
// Instead of importing all of Bootstrap JS
// import 'bootstrap';
// Only import what you need
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/collapse';
Lazy Loading
Load Bootstrap JavaScript components only when needed:
document.querySelector('#openModalBtn').addEventListener('click', () => {
import('bootstrap/js/dist/modal').then(({ Modal }) => {
const myModal = new Modal(document.getElementById('myModal'));
myModal.show();
});
});
Image Optimization
While not specific to Bootstrap, optimizing images is crucial for overall performance.
Responsive Images
Use Bootstrap's responsive image classes and the picture element:
<!-- Responsive image -->
<img src="image.jpg" class="img-fluid" alt="Responsive image">
<!-- Picture element for different screen sizes -->
<picture>
<source srcset="image-large.jpg" media="(min-width: 992px)">
<source srcset="image-medium.jpg" media="(min-width: 576px)">
<img src="image-small.jpg" class="img-fluid" alt="Responsive image">
</picture>
Lazy Loading
Use the loading="lazy" attribute for images:
<img src="image.jpg" class="img-fluid" alt="Lazy loaded image" loading="lazy">
CDN and Caching Strategies
Optimize delivery of Bootstrap assets using CDNs and proper caching.
CDN Usage
Using a CDN can improve load times for users around the world:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Preloading Critical CSS
Preload critical CSS for faster rendering:
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="critical.css">
<link rel="stylesheet" href="bootstrap.min.css" media="print" onload="this.media='all'">
Cache Headers
Set appropriate cache headers for your Bootstrap assets:
// Example for Apache (.htaccess)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
Performance Testing
Regularly test your Bootstrap-based application for performance issues.
Tools for Testing
- Lighthouse: Built into Chrome DevTools for performance auditing
- WebPageTest: Detailed performance analysis from multiple locations
- GTmetrix: Performance reports and recommendations
- Bundle Analyzers: Tools like webpack-bundle-analyzer to visualize your bundle size
Key Metrics to Monitor
- First Contentful Paint (FCP): Time until the first content is rendered
- Largest Contentful Paint (LCP): Time until the largest content element is rendered
- Time to Interactive (TTI): Time until the page becomes fully interactive
- Total Bundle Size: Keep your CSS and JS bundles as small as possible