I know how to do it manually, of course, but my question for which I’m looking for help is:
Would it be possible to eliminate all unused CSS lines from the project, by evaluating Chrome DevTools?
In the image below you can see the lines not used in the project with a red stripe next to them.
The big advantage of this is to streamline the CSS and make the site load faster, improving the ranking in the pagespeed evaluation.
The website I’m building is already well evaluated, but any improvement and acquisition of knowledge is always welcome.
Thank you in advance to anyone who can help.
What is your website domain? How does it score on Performance in Lighthouse or on Pagespeed Insights?
Personally, I think removing unused Bootstrap CSS is a waste of time. You’re talking about what… maybe saving 40-50 kb? On a 4G connection this would be almost imperceptible. On a 5G connection, it would be totally imperceptible. Same with any decent broadband land-based ISP. You’ll never notice it on a 50 mbps or faster connection.
Google claims page speed is big ranking factor, but I don’t believe it. I’ve seen sites with awful (under 25) performance scores rank #1, while competitor’s sites can have performance scores in the 90’s and still not rank well.
Meanwhile, you know what some of the biggest offenders are in terms of page speed load… Google’s OWN PRODUCTS! Google Analytics, Google tag manager, Google reCAPTCHA… all bloated hogs compared to the Bootstrap framework.
We’re entering an era where pagespeed isn’t going to matter except in the most remote, undeveloped regions on earth. The average global mobile download speed now is almost 50 mbps. Fixed broadband is around 70 mbps. In modern countries, fixed internet speeds are typically over 200 mbps. With such speeds, reducing your css file by 50% will be unnoticeable. Unless you KNOW your website’s target audience is stuck on 3G or DSL or some similarly slow service, I’d consider this a non-issue.
CSS frameworks like Tailwind have build tools that let you serve only the required CSS rules per page on your site, this does require learning these tools and having hosting that supports them. There may be something similar for Bootstrap CSS. However, I am in some agreement with @printninja, I would also add that the length of time to configure such optimisations may outweigh the page load time savings. Stripping out the unused CSS rules may also cause issue later since CSS is cascading you may remove a rule that imparts rules to another element, or later when you add more to your site you shall have to add back the removed rules.
I have a tool as part of my hosting’s custom CDN that inlines important CSS rules, and while not perfect it does speed up my sites.
Given these scores, it’s a safe bet you would not notice any difference removing unused CSS from your Bootstrap framework, and it certainly won’t affect your page rank.