[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Hi All, I've found this discussion because score of our app was decreased few weeks ago. We used solution proposed by Google itself to "Eliminate render-blocking JavaScript and CSS in above-the-fold content" using requestAnimationFrame method. So I've tried solution proposed by Sander with

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Sander, I did look at the blog post and while that is a cool solution for lazy-loading/async CSS, it won't work in my case for performance reasons. My compiled CSS bundle is ~275k and my browserified JS bundle is ~375k (including all dependencies such as angular/angular modules, lo-dash,

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Hi Craig, Well, I don't like to make my bundles that large. I just bundle my own code, and load my dependencies from CDN's. that way the JS is loaded in separate concurrent parts, and it won't take as long to load and process as 1 big bundle. Usually I end up with a pagespeed score of 93+ wich

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Hi again Sander, You think that is better loading the dependencies (Bootstrap, Font-Awesome, Angular, etc) from CDN's and just build and load the SASS/JS files of my app? I talk about that, because I started my APP using a structure with CND's, but in the longger time I was removing CDN's and

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

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: http://www.foustleague.com.br/assets/css/owl.carousel.min.css>"> http://www.foustleague.com.br/assets/css/styles.min.css>"> // my SASS files compressed On

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

"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

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

You can also get a SASS project for Font Awesome too and import it at the beginning of your SCSS with your Bootstrap. Here is what the beginning of my SCSS looks like: /*** IMPORT STYLES ***/ //Twitter Bootstrap @import 'bootstrap'; //Font Awesome Icons @import

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

I never really stopped to think about using only the necessary modules of Bootstrap without loaded all unnecessarily. I'll try it and include other components like Font Awesome SASS in my builder. Because Im loading font-awesome in separate file too. The library loadCSS was all I needed, as

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Very nice, I'll structure my project like this. Thank you again!! Em quinta-feira, 3 de setembro de 2015 18:25:45 UTC-3, Craig McMurray escreveu: > > You can also get a SASS project for Font Awesome too and import it at the > beginning of your SCSS with your Bootstrap. Here is what the

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Wow, this is even better than using the loadCSS! I'll implementing in my app right now. Thank you very much! Em sexta-feira, 4 de setembro de 2015 00:14:22 UTC-3, Sander Elias escreveu: > > Hi Donald, Craig. > > A while ago I wrote a blog post, explaining how to lazy-load CSS >

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Hi Donald, Craig. A while ago I wrote a blog post, explaining how to lazy-load CSS using a few lines of angular. Perhaps this is of some help to you? Regards Sander -- You received this message because

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Reydi, Just look for a small css-spinner https://www.google.nl/webhp?sourceid=chrome-instantion=1espv=2ie=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

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

SUPER awesome! thanks for the super trick! By the way, how do you load the aCssSpineer style super fast too? I have a huge minified css file and it has to wait for that file to be loaded so i could use the aCssSpinner. The rendered text (which i styled too) and the aCssSpinner still took half

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Hi Sander, I could not agree more... best, tomw On Tuesday, February 17, 2015 at 8:18:25 AM UTC+1, Sander Elias wrote: Hi Tomw, Yes, that's the sad truth at the moment. It takes a little effort to optimize a app, and it's not always paying off. However, If I build something public

[AngularJS] Re: Angular.js and Google Pagespeed Insights: render-blocking JavaScript and CSS in above-the-fold content

Hi Tomw, You can use the defer attribute on your script tags. But then again, your app is not showing anything to the user, until angular kicks in (and is largely done). You should show something to the user, even if everything else on your page fails to load. adding this right below the