The simple answer is that anything you add to a website will slow it down. Bootstrap contains large css files which all need to be downloaded to the users’ device, potentially slowing down the initial page views.
HOW CAN I SPEED UP MY BOOTSTRAP WEBSITE?
The first thing to do is to consider using a content delivery network (CDN) instead of hosting your Bootstrap files locally.
When you visit the Bootstrap site you will notice that you can link directly to the CDN they use. What does this mean to you? Well, when someone visits your site and they reach the CSS file link the CSS files may not necessarily need to be downloaded IF they already have a cached copy on their device. The more sites that are using the same CDN version of Bootstrap as you then the more likely that the visitor will have a cached copy already. Therefore, the download may not need to occur and the page should load faster.
The other thing you can consider doing is to personalise the download, especially if you insist on using local hosting for the Bootstrap files.
HOW CAN I REDUCE DOWNLOAD SIZE OF BOOTSTRAP FILES?
Older versions of Bootstrap included the ability to customise the download really easily. As of version 4 this is no longer possible prior to download via the site. There is some work to do in order to customise the CSS you require and this involves some knowledge of npm, Node.js, JSON etc. Although it can be done with some good knowledge, it definitely is not easy for the beginner. Once you have a local download of Bootstrap you can compile you own files using a Sass compiler.
You can use minified versions of the CSS and JS files but I believe they still come in at around 200kb. Now that serious website users are conscious of every kb that needs to be downloaded they are looking at alternatives.
DO I NEED TO INCLUDE THE BOOTSTRAP JAVASCRIPT FILES?
No. However, many of the Bootstrap components require the use of JavaScript in order to function correctly. For example, the collapsing content and the modal popups. You will need to link to or download a local version of the jQuery library as well as popper.js. You will also need to be careful about which version of these you use and some compatibility issues may occur.
WHY BOOTSTRAP IS BAD
I hear this quite a lot from friends and colleagues and see a lot written about it across websites. Bootstrap can be quite polarising. Yes, Bootstrap can be quite bad for some sites, yet perfect for others. If I am in need of quick styling that I know will be mobile compatible then I will use Bootstrap. However, this is never for a busy site.
You will notice that I use some snippets on this site so that the student can focus on the coding rather than the styling. If I am working on a larger project then I do not like to use Bootstrap. I do not believe it is a good idea to rely on a library that has, in the past, fallen behind on its intended deliverables. Bootstrap 4 was months behind schedule.
The other thing to consider is that there were lots of compatibility changes from version 3 to 4. Bootstrap 4 was a major rewrite of the entire project and so there were some massive changes. If you had a Bootstrap 3 website and wanted to use Bootstrap 4 then you would find yourself going through code to make changes. Not ideal. Especially as it is not like you only had to go through the CSS. You had to go through the HTML as the Bootstrap project has specific structures that are required. For an experience coder this is not a hard job but it does take time and we all know that time = money when you are dealing with coders.
There were some positive changes from Bootstrap Version 3 to 4 including the use of Flexbox versus the float based grid system. However, recent changes to the CSS standards such as the inclusion of CSS grid now means that we can create grid based layouts without requiring the overhead of a framework such as Bootstrap.
SHOULD I USE BOOTSTRAP ON MY WEBSITE?
That is probably a question only you can answer. I would certainly consider using it for small projects that are not mission critical, that are not business sites etc. For a hobby website I do not see many issues. What I will point out though is that it is easy to spot a Bootstrap site. So, if you want to stand out from the crowd then Bootstrap is probably not the way to go.
I like to use Bootstrap in some of my courses where CSS is not the main focus. Having the ability to quickly style a form so that the student can focus on the backend coding is really useful.
However, I am always conscious of the fact that it can become the ‘lazy option’. Since Bootstrap can be very quick to utilise and fairly easy to use, with good documentation and code snippets, one can become quite lazy and not always look for alternatives or employ best practices.
WHAT ARE THE BOOTSTRAP ALTERNATIVES?
There are a few alternatives to Bootstrap that you may wish to consider including:
Foundation
Skeleton
Bulma
Cardinal
Pure
Each has their own strengths and weaknesses. One of the strengths of Bootstrap has to be the size of the user base which means that support is readily available. Developers are a ‘dime a dozen’ so you should have no issues getting work done on your site if you go down the Bootstrap route.
Some of the other frameworks are known to be less appealing, even in the looks department! Bootstrap does have themes available so it does have the upper hand in some respects.
One alternative you may consider is you learn CSS and code some nice clean CSS relevant to your site. There are some great courses out there including the ones on Coding.Academy.
Do you use Bootstrap for your websites? Or have you switched to using something else. Let us know in the comments below.
