AngularJS 1: Above the Fold rendering

Question

currently I'm optimizing my AngularJS site and I'd love to reach those 100/100 from Google page speed insights. Do you know a good pattern for AngularJS to have good above the fold speeds for multiple page entry points?

E.g. Assuming there are multiple views which do not need lots of JavaScript executed (besides routing) for their above the fold content.

The only idea I had was stuffing the index.html file with the content of these above the fold elements and then do some routing in an inline script tag right in the index.html file, but this doesn't sound maintainable to me.

Another possibility could be a gulp task that assembles an index.html file - if that's a thing, I assume somebody has done this before. Have you heard of something like this?

Any ideas? Has anybody ever done this, or should I just accept my 83/100 and get on with my life?

Best and thanks for your suggestions!

Answer 1

I don't know much about how the Google Page Speed work but definitely you can try lazyload.js. All the js files that are not needed for the index.html can be loaded later and the page load will be complete in minimum number of files being loaded. Did you already try that?