"Critical CSS" is generally anything needed to render any Elements that appear "above the fold". It allows the browser to start rendering those Elements after the initial request instead of making additional (blocking) request(s) for your CSS. You mentioned you are using SASS, and then include a separate Bootstrap stylesheet. You could take your code a step further even and use the Bootstrap SASS project and only import the necessary components you need at the beginning of your SCSS file. Doing so will 1) reduce the number of requests for external resources and 2) reduce the overall size of CSS by only importing what you need instead of just including every single Bootstrap component. For example, I use Font Awesome so I don't import glyphicons in my build, and I don't use popovers or tooltips so those aren't imported either. I'm actually only using 20 of the 39 components that are included with the Bootstrap SASS project so it cuts down on my overall file size significantly. If you are able to successfully cherry pick the "Critical CSS" into the head, you could then use the loadCSS library build by the Filament Group and asynchronously load to bundled CSS which would prevent it from being a blocking resource altogether. Alternatively, you could use a spinner/pre-loader as mentioned above and then still use the loadCSS library to achieve a similar effect.
On Thursday, September 3, 2015 at 10:47:00 AM UTC-4, Donald Silveira wrote: > > Hello Craig. > > I'm with a similar problem. > In my application I'm using SASS/Gulp for concat and minify my CSS. > > Example how I structured: > > <link rel="stylesheet" href="assets/css/bootstrap.min.css > <http://www.foustleague.com.br/assets/css/owl.carousel.min.css>"> <link > rel="stylesheet" href="assets/css/styles.min.css > <http://www.foustleague.com.br/assets/css/styles.min.css>"> // my SASS > files compressed > > On this case, what you consider "Critical CSS"? > > > > Em sexta-feira, 17 de abril de 2015 23:24:18 UTC-3, Craig McMurray > escreveu: >> >> Putting "critical CSS" in the <head> is definitely great for quickly >> rendering above the fold content in the initial HTTP request. Just be >> careful about "flipping the switch", if done incorrectly it will result in >> the great FOUC which is rather unsavory >> >> On Friday, April 3, 2015 at 5:14:46 AM UTC-4, Sander Elias wrote: >>> >>> Reydi, >>> >>> Just look for a small css-spinner >>> <https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css-spinner> >>> >>> and put that inside a style tag in the head. I have done just that a couple >>> of times. >>> Then use a tool to dynamically load your css, and 'flip the switch' >>> after it's done. >>> >>> Regards >>> Sander >>> >> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
