Optimization for critical rendering path when using bootstrap

Question

Is it possible to optimize for the critical rendering path (similar to what Google and Facebook do) if I use Bootsrap 3?

Facebook just nested the styles associated with the header and sidebars. Google introduced all the styles because they do not have a lot of styles for the main page.

The problem is that I want to embed the styles associated with my header, it will consist of more than 10 classes used from bootstrap ( container-fluid , row , col-lg-10 , col-lg-offset-2 etc.).). And the built-in bootstrap is a bad idea because it's over 100 kilobytes

I want to load over the contents of the folds, very fast.

Is there any reasonable way to do this? Do you have any recommendations?

Answer 1

I would not do style styles just yet, there are many optimizations that can be done before you ever need to go this route. In addition, there is a massive compromise, the performance of duplicate styles in an HTTP request (can be a double-edged sword), and a service nightmare.

• Load CSS to the head.
• Download JS to the end of the body.
• Set up bootstrap to include only the minimum necessary styles. http://getbootstrap.com/customize/
• Link and combine the files associated with the header in a separate set, think about separating the components of the bootstrap. Linking gives caching and minimization.
• One-page application, be smart about the start page of the download and use modules / web components for ajax in html templates.
• Use a CDN because the host has the maximum number of HTTP connections.

More can be found at https://developer.yahoo.com/performance/rules.html

Answer 2

Short answer: you do not need to add additional inline code to improve performance . It is best to minimize the load time (as suggested above) to use the bootloader to remove any classes that you do not need, as well as minimize gzip (if possible) before sending. In most cases, you will need a lot less than 100kbs bootstrap css.

However, rendering elements in a browser is more expensive than applying classes to them. You can minimize load times to one point.

You did not tell us what kind of work you expect; but if it was a life or death situation, in order to get an ultrafast header loading, yes, you should use the built-in code.