Bootstrap 5 Performance

I am curious about some of the speed aspects in 4.2 in relation to Bootstrap 5. Having read various articles like the one below, my understanding was that combing CSS and JS is actually counterproductive when using servers running http/2 or later and was essentially a “best practice” idea to work around limitations of older servers.

Going back a few years ago with Rapidweaver I found that sites ran visibly slower in real world testing and it tended to break things when I enabled this option, so I ignored reports from Google PageSpeed etc telling me to unify these files.

I gather that Bootstrap 5 changes the static site builder from Jekyll to Hugo, which is significantly faster, however I was just reading another article suggesting that Hugo contains a built in function to unify these files automatically and we should enable it.

Obviously there is no substitute for live testing but I am curious how this is likely to pan out in real world usage without being distracted by online speed tests that may not be up to date.

5 Likes

I’ll be brutally honest with you, visually and feature wise there is not a great deal of difference between Bootstrap 4 and 5. The major difference is the fact BS5 drops Jquery, which is a logical path going forward. The rest wouldn’t really make much difference to a #NoCode user as it’s mainly class name changes and better CSS structuring in the code.

I actually found re-writing the current Blocs Jquery over to vanilla a lot less frustrating in 2021, I think JS support in modern browsers is getting better year on year with more features supported and less hotfixes and polyfills required. Currently, Blocs.js has 2 polyfills for internet explorer to patch a few JS functions that are not supported in those older browsers.

I tested the Blocs home page with the site migrated to BS5 and running combined CSS and JS and it made a fair improvement to the score, mainly for mobile. Ultimately, regardless as to whether you use it or not, it’s (combine CSS & JS) just a nice option to have, if you need it or you have that client who is checking the page insights before signing off on a job.

As for Jekyll and Hugo, thats not really of any importance to Blocs users as those are (developer focused) static page building platforms.

My personal advice, right now is, play around with BS5, start small with a side project or a new smaller site, then ramp up to the bigger stuff once its had a few months out of beta. This is not due to any concerns other than the fact that it will get a lot of real world usage once it ships officially.

My plan is to make Bootstrap 5 the default for new Blocs projects once it hits 5.1, thats probably the green flag for BS5 that some Blocs users will wait for.

6 Likes