SPA initial load time

Question

The downside to a SPA is of course the initial load time.

For example, I have created AskACarPro.com with Durandal.

It currently has a "loading" screen while it loads. But I am thinking maybe this is a bad idea. It reminds me of an all-flash website - pretty, but no-one wants to watch a loading spinner when they first get to a site.

Another example I found at random is MyBestEgg.com It is a Angular site. Nothing special, but it has a cold load time of almost 6 seconds on my machine.

But it has no splash so the screen jumps around a bit while it is loading. I don't know that this is any better than a splash screen.

Is there a best practice to dealing with the inevitable SPA load time? Obviously the app should be bundled and minified as much as possible, but there is always going to be a delay while the app starts up.

This is perhaps more of a designer type question than a programming question. Yet it is important as the load factor is a reason NOT to use a SPA.

Answer 1

Apart from minify css and html, gzip, etc and since the question has the Angular tag I would suggest you to take a look at Lazy Loading of modules/css that ocLazyLoad offers.

To keep your js as small as possible you can use JSInspect to be as DRY as possible

PurifyCSS will help you to remove unused CSS and can detected rules that are added dynamically e.g. using ng-class

Using a library like Head.JS or LABjs or a script like this can help you to load your js files in a way that eliminates the rendering blocking during page-load

  <script>
    [
      '@@Angular',
      '@@Angular-UI',
      '@@YourAPP',
    ].forEach(function(src) {
      var script = document.createElement('script');
      script.src = src;
      script.async = false;
      document.head.appendChild(script);
    });
  </script>

Something like imagemin will help you minimize the size of your images, the same for SVG