3 Tips for Speeding Up Your Bootstrap Website
Website optimization is a cluster of techniques, both server-side and client-side, which aim at speeding up websites’ loading time and rendering in the browser for a better user experience.
Today, visitors are used to the immediacy and reactivity typical of native apps. They expect a web page to load within 1000ms. If it takes much longer than this, they’re likely to leave the site.
Search engines have certainly caught up with this trend, and in many ways they’ve contributed to it. In fact, Google has been using page speed as a ranking factor for websites in desktop searches for a while now. Google has announced that, from July 2018, mobile searches will also be super important to achieve top positions in its result list.
Bootstrap has often been criticized for adding unnecessary bloat to websites, so if you use this popular front-end UI library in your project, make sure you pay extra attention to page weight and page speed.
In this article, I’ll go through three front-end optimization steps you can take to ensure your Bootstrap-based website is fast-rendering and well optimized.
Only Download the Bootstrap Package You need
If you decide to work with the precompiled download package of Bootstrap, you should really have a serious think about which parts of the library you really need.
The download folder contains both the complete CSS library (bootstrap.css and bootstrap.min.css) and JavaScript components library with all its dependencies except for jQuery (bootstrap.bundle.js and bootstrap.bundle.min.js), as well as a number of standalone CSS files containing the code necessary for specific parts of this popular UI kit.
If you just need a nice CSS reset for your project, simply use bootstrap-reboot.min.css. If you only need a flexible and easy-to-use grid system, then go for bootstrap-grid.min.css. There’s no need to download the entire framework. If, on the other hand, you know you’re going to use everything in the library, at least make sure you include the minified version.
Similarly with the JavaScript code. If you know you’re not going to have dropdowns, popovers and tooltips in your project, then use bootstrap.min.js rather than bootstrap.bundle.min.js because you won’t need to include Popper.js.
Opt for the Source rather than the Precompiled Download Package
As much as the latest release of Bootstrap lets you select parts of it to include in your project, the precompiled files might still contain stuff that you might not actually need.
Browsers still have to download and process unused code, which could impact on website performance, especially on slow network connections.
A better idea would be to download the Bootstrap source code, because:
- you’ll be able to include exactly the components you need in your project
- customizing any part of the library becomes cleaner and more efficient, with no need to override styles over and over
- the stylesheet that ends up in production is usually leaner.
Make Use of Proven Client-side Optimization Techniques
Apart from the points made above, optimizing a website built on top of Bootstrap for performance still has to incorporate front-end performance techniques just like any other website.
Below are just some of the critical factors you could pay attention to for effective front-end optimization of your website.
Write Lean CSS and JavaScript
Each character in your code adds up to the final weight of the web page. Writing clean and concise CSS and JavaScript code while keeping it readable is not always easy. However, it should be something to strive for in every project.
Good CSS practices include getting rid of unused selectors, duplicate code, and overly-nested rules. It’s good to keep your code well organized at the beginning of a project. For example, using style guides can really benefit your development process and the quality of your code.
Also, there are great tools out there to help you clean up you code. A linter like CSS Lint and JSLint can check your document for syntax errors, inefficient coding patterns, unused code, etc.
Minify and Concatenate CSS and JavaScript Code
An important optimization step is to limit the number of HTTP requests a website has to make to render its content. Each round trip to the server and back to fetch resources takes time, thereby negatively impacting on the user experience.
Minifying (that is, removing comments and white space from your document) and concatenating CSS and JavaScript files have now become a consolidated practice that aims to keep file size small and decrease the number of HTTP requests.
If you’d like to delve deeper, How to Optimize CSS and JS for Faster Sites by Gary Stevens is a great read.
Watch Out for Your Images File Size
The weightiest part of a web page is often represented by image files, but also audio and video files play their part. Optimizing visual assets is therefore crucial to website performance.
Doing so involves two aspects:
- Making sure you use the right image format for the job at hand.
- Squeezing excess bytes from your assets before uploading them for production. There are great tools out there that can help you. Check out online tools like TinyPNG for raster images (PNG, JPG, etc.) and Jake Archibald’s SSVGOMG for SVG optimization. Also, consider tools you can install locally like your favorite task runner (Grunt, Gulp, etc.).
Conclusion
A fast-rendering website is a core factor in determining great user experience on websites. This becomes even more crucial when it comes to evaluating web user experience on mobile devices.
In this article, I’ve listed a number of techniques that play a role in optimizing a Bootstrap website for performance from the point of view of front-end development.
What are your front-end optimization techniques for a fast-loading Bootstrap website? Let me know in the comments!
If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our Building Your First Website with Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.