Optimizing for critical rendering path when using bootstrap

Question

Would it be possible to optimize for the critical rendering path (similar to what Google and Facebook are doing) if I am using Bootsrap 3?

Facebook just inlined the styles that are related to the header and sidebars. Google inlined all the styles because they do not have much styles for the homepage.

The issue here is that let's say I want to inline styles related to my header, it would consist of over 10 classses used from bootstrap (container-fluid, row, col-lg-10, col-lg-offset-2, etc..). And inlining bootstrap is a bad idea because it is over 100kbs

I want to load above the fold content, really quick.

Is there a smart way of doing it? Do you have any recommendations?

Answer 1

This technique is independent of your framework, Bootstrap in this case. You have to come up with a way to figure out your critical CSS which you can extract and inline into your HTML file. There are many ways to do so:

• Custom critical CSS file (created manually)
• Type annotations in your CSS file, which could be extracted on compile/build time: https://css-tricks.com/annotating-critical-css/
• Automated using headless browser like Puppeteer

This topic is way too big to answer in a short thread so feel free to read up on the topics listed above: https://web.dev/extract-critical-css/

Tools:

• Critical
• criticalCSS
• Penthouse