I replaced my custom Bootstrap theme with the Chota CSS framework today on this site. Long-time readers will recall how I love Bootstrap and we have blogged a lot about this mobile-first responsive CSS framework. We have been using Bootstrap for years now, using our QuickStrap WordPress theme.
With the advent of Core Web Vitals as an SEO signal for Google Algorithms, site speed has become an important SEO consideration for webmasters. Page speed testing will reveal that Bootstrap loads large files of around 200kb, compressed to over 25 kB (mostly as it is loaded with all sorts of amazing customizations).
And the large CSS file size becomes render-blocking, as it loads before the rest of the HTML and will slow site speed and give you poor ranking in page speed tests.
Chota CSS Framework: Bootstrap Alternative
So I explored and found many different small CSS frameworks under 5KB which I could use as a Bootstrap alternative, and it seems there are many, but I did not want to really change a lot of CSS classes and add CSS code to fit the new CSS framework.
I zoomed down to a few and particularly liked Chota CSS (<3kb zipped) as it had many classes which were similar to Boostrap (especially like container, row, cols, etc), which meant I could easily plug it in and a lot of HTML code would still not need any further styling and could work out of the box mostly.
Chota CSS has the same 12 box grid. Chota has no preprocessor rules and is just plug-and-play. It has some of the most used utilities and components and has a dark mode switch built-in by adding a small script. I ran this cool experiment today on this site and it did not take more than 15 minutes! You can see for yourself.
Inline Chota CSS: Free Critical CSS
I also inlined CSS code inside the HTML code using Auto-optimize plugin, and now it renders nonblocking CSS!
It just works like Critical CSS, which loads only the essential CSS needed to run the site. This loads CSS fast without any extra effort. In fact, I might also not need a plugin and I can just cut past the minimized CSS file into the HTML directory, saving some server resources.
Moreover, since the size is so small, I can easily review and remove any other totally unused code directly from the file and make the CSS file even smaller!
Since it is a very small code under 3KB, inlining does not push the social meta tags below and helps the open graph tags generated by Rank Math SEO plugin to work well (which was a problem with inlining Bootstrap CSS, as its large size pushed a lot of code down, and the social tags and meta tags were not properly read by search bots and share buttons.
Thus, I could now load a very small CSS file inlined in HTML, and this acted like Critical CSS and I need not pay extra to buy a dynamic Critical CSS generating services which has become a fad now and can easily charge $5 per month.
Superfast websites with NVME Drives
Of course, a shoutout also goes to the A2 hosting new turbo plan where this site is now on NVME drives which process the site delivery much faster, and also the A2 Litespeed server which takes site speed to a new level. This is another step to make the site faster and optimize for SEO.
So do give these small minimalistic CSS frameworks a try and speed up your site easily.