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.

Overtrade

Thanks for MyBestEgg reference, in is an excellent example how tiny website can be bloated with js dependencies. – Drusilladrusus

Try to find or implement server side rendering (isomorphic/universal) for SPA? – Paleontography

I wrote a synchronous loader captioned "Updating to the latest version..." with a progress bar. When everything is in cache it's very fast, when this is not so a six second load seems ok because individual item names flash past mostly with barely enough time to read them. It doesn't have to be fast, it has to seem fast. That's why they call it "UX" not "UI design". You can also entertain the user with things like "reticulating splines". There was an extremely popular question about funny wait messages with hundreds of hilarious answers but the Illuminati decreed it off-topic and had it shot. – Violation

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

Badly

Then should I need to have multiple HTML files for each page? – Colonnade