SPA boot time
The disadvantage of SPA is, of course, the initial load time.
For example, I created AskACarPro.com with Durandal.
It is currently loading a loading screen. But I think this is a bad idea. It reminds me of an all-flash site - pretty, but no one wants to watch the downloader when they first hit the site.
Another example I found randomly is MyBestEgg.com. This is the Angular site. Nothing fancy, but on my machine the cold boot time is almost 6 seconds.
But it doesn't have a splash, so the screen jumps a little while it loads. I don't know what is better than a screensaver.
Is there a better way to deal with the inevitable SPA load times? Obviously the app needs to be bundled and minimized as much as possible, but there will always be a delay when launching the app.
Perhaps this is more of a designer type issue than a programming issue. However, this is important because the stress factor is the reason NOT to use SPA.
source to share
Apart from minify css and html, gzip, etc., and since the question has an Angular tag, I would suggest you take a look at Lazy Module / css loading that ocLazyLoad offers.
To keep the js as small as possible you can use JSInspect as dry as possible
PurifyCSS helps you remove unused CSS and can detect rules that are added dynamically, for example. usingng-class
Using a library like Head.JS or LABjs or a script how this can help you load your js files in a way that prevents rendering blocking on 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, same for SVG
source to share