Bootstrap 4 vs. Bootstrap 5 for Technical SEO

After my previous blog post about Bootstrap 5 and its effect on technical SEO, I was asked the question of if it was an improvement over using Bootstrap 4. Just a few days after that, as we were working on improving performance for one of our clients, the question came up again about how much improvement we could see by just changing from Bootstrap 4 to Bootstrap 5.

What was changed in Bootstrap 5?

The big change in Bootstrap 5 was that the requirement for jQuery was dropped and the dependencies were changed to use regular javascript. Anytime that you can drop a javascript library as a dependency is guaranteed to help improve performance since it is one less library that needs to be loaded before the page can be rendered.

Our Baseline

Our baseline for this test is going to be a page that was set up for the previous tests using Bootstrap 5. This page has a few features such as navigation, accordions, and grid layout. Some of these features have javascript dependencies so they require the javascript library to be included. Both the Bootstrap CSS and JS files were served locally rather than using a CDN. The CSS and JS are not minified.

As a recap from the last test, after this test, we scored a 92 for Lighthouse. For this baseline, we see a score of 92 with a First Contentful Paint of 1.3s and a Largest Contentful Paint of 3.3s. In our opportunities, we can see that the render-blocking resources, which are the Bootstrap CSS and JS files, add an estimated .37s.

Test 1: Bootstrap 4

Now that we have our baseline Bootstrap 5 score and times, we can look at Bootstrap 4 and see how it compares. For this test, I am using the Bootstrap CSS and JS files served locally and not via CDN. I also had to include the JQuery and Popper JS files due to dependencies. For these files, I went ahead and used the minimized version server locally.

From this test, we can see a slight change. The FCP is now 1.4s and the LCP is 3.5s. So we increased FCP by .1s and LCP by .2s. You can see that our recommendation to eliminate render-blocking resources has increased from .37s to .57s. So our increase in the Largest Contentful Pain is due to the extra .2s caused by blocking resources which are tied to our use of jQuery. If I expanded the recommendation to eliminate render-blocking resources, you would see an increase of .2s from the jQuery and popper dependencies.

 This difference isn’t horrible, but it does begin to show how each additional CSS and JS file that gets added to your page increases the time for the page to load and the performance to decrease. There are ways to help that and some tips to use, but the general rule of thumb is to reduce your CSS and JS usage to only what is necessary.

Test 2: Include jQuery with Bootstrap 5

I wanted to do another test to see if Bootstrap 5 included any other improvements other than just removing jQuery when it comes to performance. The method I used to test this theory was to load jQuery on the page even though Bootstrap 5 doesn’t require it. Many websites still make use of jQuery, so just moving to Bootstrap 5 isn’t enough reason to ditch jQuery.

This test surprised me and has me asking more questions that I’ll need to dive into. After adding jQuery the score decreased to 89. The FCP was 1.4s which is the same as Bootstrap 4 and jQuery which makes sense. However, the LCP is now 3.7s which is worse than Bootstrap 5 without jQuery by .4s and worse than Bootstrap 4 with jQuery by .2s. I have a feeling that this is due to duplication of effort by jQuery and the rewritten Bootstrap JS code, but that is something that I’ll need to dive into later.

Conclusion

The difference between Bootstrap 4 and Bootstrap 5 is what I expected. Removing the requirement for jQuery improved the performance of the page and reduced the page load times. This is expected since it is one less file that is needed to load and process before the page can be rendered. If you don’t need jQuery then Bootstrap 5 is the direction to take since you can remove the dependency to jQuery.

The surprise here was that using jQuery and Bootstrap 5 reduced performance causing a lower score and increased core web vitals times. The recommendation here would be if you still have a dependency on jQuery then you are better off sticking with Bootstrap 4 rather than upgrading to Bootstrap 5.