Bootstrap and Technical SEO

One of the questions that we get asked by most of our clients when it comes to technical SEO is "Can we use Bootstrap, and does it affect our Lighthouse and page speed"? This is a debate that I have had with Kevin since he prefers to not use a CSS framework, while I choose to use tools that make the job easier. So, putting aside the religious fight on this, what is the answer?

What is Bootstrap?

Before answering the question, let's briefly talk about what Bootstrap is. Bootstrap is a CSS framework that contains several CSS styles that assist with creating some common controls, along with handling responsive layouts. Bootstrap gained traction as responsive and mobile development became more popular. Instead of creating the styles needed to create responsive grids, navigation, tables, etc.… it became easier to just include the Bootstrap CSS file and make use of its styles. This made developing responsive websites much faster but came at a price. That price is the large CSS file that would be included on page load. At first, many people didn’t care about this since it would get loaded once and then cached. But as attention has been given to sub-1-second page speeds, the large file size is now causing problems. However, many developers still find it easier to make use of Bootstrap rather than creating the styles themselves.

Our Baseline

As a baseline test, I created a page that was used throughout the different tests. The baseline page has the same HTML, images, etc. but it does not include the Bootstrap CSS or JS file. This baseline helps to determine what the baseline score and core web vitals times are without taking Bootstrap into account. For the page, I included some standard elements that would be used on a typical site. I included navigation, buttons, a grid, accordion, and an image. The image is a large image that is used to amplify some of the issues that Bootstrap could cause.

With the baseline test, we received a score of 88. The First Contentful Paint (FCP) was .9s and the Largest Contentful Paint (LCP) was 2.9s. The low score is mostly caused by the Cumulative Layout Shift (CLS) which was caused by the large image. When looking at the Opportunities it shows that images should be served in next-gen formats and some width and height properties added to the image.

Test 1: Default Bootstrap

Now that we have our baseline, we will add Bootstrap into the mix. For Bootstrap we are using the non-minified CSS and JS files being hosted on our server. I chose not to use the Bootstrap CDN to serve the files up a bit slower but using the CDN would be one way to improve performance.

After this test, we scored a 92 for Lighthouse. Like I mentioned earlier the score is higher because the CLS was lower due to Bootstrap handling the page layout. But you can see that the FCP increased by .4s along with the LCP increasing by .4s. This is going to be caused by the CSS and JS files being loaded and applied to the page before any painting can be done. In the Opportunities, we now see that we have an item to eliminate render-blocking resources and to reduce unused CSS. Both are directly caused by the Bootstrap CSS file being included. We have a large portion of the CSS file that contains styles we are not using, which is true of most people who use Bootstrap. Also, before any part of the page can be rendered in the browser, it must first load the CSS before it can determine the layout of the page. The blocks the rendering of the page and increase the FCP and LCP times. I’ll talk in another post about how a webpage is rendered and why it needs to wait for the CSS to be loaded.

Test 2: Minified Bootstrap

One solution to fix the Bootstrap issue is to use the minified CSS and JS files. This is something that you should do regardless of what turns up here since it will result in smaller files. I’m still using the same HTML, but now using the minified version of the Bootstrap CSS and JS.

Well, after this test we don't see much difference. The FCP is still 1.3s and the LCP is now 3.2s. The Opportunities listed are still the same as the non-minified version. So why didn’t we see much change? The reason for this is that most servers now will compress the files as they are being delivered to the browser. This compression essentially does the same thing that minifying a file does so there isn’t much time saved between the two. However, it is still a best practice to minify your CSS in case your server doesn’t support compression, or the browser does not.

Test 3: Remove the Unused CSS

So, if minifying the file doesn't help and we still want to use Bootstrap, what should we do? The answer is that you will want to remove the portions of Bootstrap that you are not using to reduce the file size and the number of styles that the browser must process. This is what Bootstrap recommends as well. You can do this by either using a tool such as https://purifycss.online/ or downloading the Bootstrap SASS files and only including the areas that you use on your website. For this test, I used Purify CSS to return only the CSS that I am using on the page. I am then using that file rather than the default Bootstrap CSS file.

With this new CSS, you can see that we saved some time on our FCP and LCP. We reduced our time in half for the FCP between our baseline and using the default Bootstrap CSS. This isn't a tremendous amount of time, but on slower servers and connections, this difference would be more significant. You can also see that in the Opportunities the remove unused CSS recommendation has been removed. The render-blocking resources issue is still present, but that refers to the Bootstrap JS file and not the CSS file. We could also remove the unused portions of the JS file to clean up that recommendation.

Conclusion

 The differences between these tests might appear insignificant, but on a larger, more complex site you begin to see more of a difference between using the default Bootstrap and the optimized Bootstrap CSS. As with any tool, if you use it incorrectly you will cause more damage than good. Bootstrap is the same way. Bootstrap has been optimized and used on thousands of sites. However, with great power comes great responsibility. If you don't make use of Bootstrap and start mixing in your own styles, duplicating what Bootstrap already offers, then you are doubling the size of your CSS and causing longer download times.

From the results here, I think it is safe to say that if your development team wants to use Bootstrap, there isn’t a problem with it. Just make sure to clean up the portions of Bootstrap that you aren't going to use and be diligent with how you use it.