Angular2 slow initial page load caused of load sequence
<p>I have angular2 project created from <a href="https://github.com/mgechev/angular-seed" rel="noreferrer">seed</a> and I've added several angular components on my initial page. Some of them load images - which is relatively slow, but the actual problem is:</p>
<ol>
<li>I have a bundle which is big (~1mb) and I am currently working on it to make it smaller following <a href="http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/" rel="noreferrer">a guide on the subject</a>.</li>
<li>The initial load makes just a few requests, loads the bundle (usually ~ 3 seconds) and waits to the Angular application to bootstrap (~1.4 seconds). After that it starts loading all components and load their resources (fonts, images, etc.). Here is how the request looks like:</li>
</ol>
<p><a href="https://i.stack.imgur.com/k2KPq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/k2KPq.png" alt="enter image description here" /></a></p>
<p>I am afraid even after I reduce the bundle size the application would still be bootstrapping for 1.5 seconds without making any requests and then again wait a ~1 seconds for the resources of the components to load. That I assume will lead to about 3+ seconds of load time. With my app being relatively simple I found this not acceptable.</p>
<p>Q1: Is there a way to load the component resources earlier and just reference them on component load?</p>
<p>Q2: Is there a way to make the application bootstrap faster?</p>
<p>I'm open to other suggestions too :)</p>
<p><strong>Edit:</strong></p>
<p>I am using AoT compilation, provided with the seed and I have taken steps to lower the size of the <code>app.js</code> file. The problem remains with the <strong>gap</strong> between the end of <code>app.js</code> downloaded and the first component's resources calls.
<a href="https://i.stack.imgur.com/rSr7k.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rSr7k.png" alt="enter image description here" /></a></p>
<h3>UPDATE (2016-12-19):</h3>
<p>What I did (for now) is only on the server:</p>
<ul>
<li>Enabled the HTTP2 support which resulted in major speed improvement.</li>
<li>Enabled GZIP which reduced the size of the JS by more than 5 times.</li>
</ul>
<p>Those server configurations were trivial on NGINX and Apache so its worth giving them a try.</p>
<p>Now although the site loads a lot faster those changes don't solve the initial problems (Problem 1 and Problem 2). Hence I am looking on some other approaches that you may also want to follow if you are in my spot:</p>
<ul>
<li><a href="https://preview.npmjs.com/package/angular2-gulp-prerender" rel="noreferrer">Prerendering with Gulp</a></li>
<li><a href="http://blog.angular-university.io/angular-2-universal-meet-the-internet-of-the-future-seo-friendly-single-page-web-apps/#prerenderingatbuildtimeuploadprerenderedappstoamazons3" rel="noreferrer">Prerendering in Amazon</a></li>
<li><a href="http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/" rel="noreferrer">AoT vs JIT compilation</a> - some insights.</li>
</ul>
<h3>UPDATE (2018-06-11):</h3>
<p>Here are some materials that helped me boosting the initial load:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=ZI_MC3YdSo4&amp;feature=youtu.be" rel="noreferrer">Angular Performance Workshop - Manfred Steyer</a></li>
<li><a href="https://blog.cloudboost.io/angular-faster-performance-and-better-user-experience-with-lazy-loading-a4f323b2cf4a" rel="noreferrer">Angular — Faster performance and better user experience with Lazy Loading - by Ashwin Sureshkumar</a></li>
</ul>
<p>In my case the Lazy Loading plays the big role.</p>