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.
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
Related
I've been reading about lazily loading code in react.
With lazy loading, only the needed code will be loaded and doing so,
your initial loading will be faster (because you will load much less
code) and your overall speed will be much faster being on demand.
This is what I've understood.
In a single page application, the entire page is loaded onto the browser initially. We use module bundlers like webpack to bundle the application into a single page. Everything's great.
Now, if the application size is large, the load time would increase. To improve performance, we can divide the bundle into separate chunks that will be loaded only when needed.
My question is, if we have to divide our page into chunks, is it still a single page application because the browser will have to request the server for these chunks whenever they are needed? I feel like there's a gap in my knowledge and I don't know what's missing.
The traditional web applications used to work with postbacks to the server to fetch HTML to render a new page. Then AJAX came into the picture and applications were able to render data asynchronously thereby making sure that the user doesn't need to wait the time when the browser would refresh on postback to render the new page.
Modern Javascript libraries like angular, react etc. bring single-page application (SPA) model which runs inside a single page without requiring the browser to reload as the user navigates the site (ie. with only a single container page for entire application,like index.html). Even with code splitting and lazy loading of chunks, the application developer can ensure that user gets a pleasant experience like displaying a progress bar or loading spinner instead ( using React Suspense ). This is much better than the frustrating experience of waiting for a page reloading everytime. Webpack ensures the chunkhash changes only for chunks which have changes in source code from previous build. This helps to take advantage of browser caching so that the request for chunks don't need to go to server everytime. Hope this was helpful !
I am new to angular js, I have started refactoring code in my project which was developed by some developers previously working in my organization. There are some problems in the code that is making my web page slow.
There is a dashboard page with all the feature links over there. On click of each and every link the html is getting replaced with the specific feature. Now to make this happen the developers have included all the controller/service js file in the dashboard page itself, which is obviously making the page to load slow.
Please help me out or at-least give me a direction in which i should start thinking.
Sounds like you are trying to optimize something that you are no investigated.
You can use oc-lazyLoad package in order to achieve your requirements, but bare in mind that, it only improve the first bootstrap nothing else.
From your description, it looks like you have a different performance problem, you should investigate it using devtools performance tab.
The actual loading time of a web page and the user impression of that loading time can be quite different. For example, here are three different experiences a user can have while a page loads:
Waiting for a blank page to completely render at once
Parts of the page immediately render (e.g. top navigation) but components load
individually
The entire page is made of components that load individually
These different UI experiences become more common as JavaScript frameworks become more common, such as React or Angular.
The user's UI experience can also change if individual components use loading markers to indicate something is happening, such as Loading... or a spinning wheel.
What are some guidelines for improving the user impression of a fast loading page? If there are not any, how do you approach this problem?
There is always going to be an initial hit whilst the javascript gets parsed and executed. However, if you are after very fast initial loads you could try a few techniques such as:
Delivering a "critical" payload first which will quickly load the "essentials" of your webpage to make it feel much more responsive. Webpack has a code splitting feature that you could use for this effect.
Making use of Server Side Rendering (i.e. universal style applications) which will execute the javascript server side and embed the output in the HTML payload. This probably renders the best results for what you are after as you don't getting the "flashing" parts as much you would otherwise. It's a pretty cool technique but is probably presents more technical challenges so you will have to decide on your own tradeoffs.
If you are after an example of SSR you could look at a boilerplate I recently put together for React: https://github.com/ctrlplusb/react-universally
In that boilerplate I actually also make use of Webpack's code splitting feature based on the Routes defined within the application. Checkout webpack's docs on this: https://webpack.github.io/docs/code-splitting.html
If webpack is completely new to you I highly recommend the survive js series: https://survivejs.com/
I am writting an app from scratch in Angular with node.js and I was wondering if I am doing things correctly.
I want to split the content of my index into smaller html modules with their respective controllers, this way, everything will look more structured and easy to find when the project gets bigger.
For example :
index.html <--- main file
/views/menu.html <--- menu module
/views/content.html
/js/menu.js <---controller for the html module
/js/content.js
...
I can manage those files by just adding ng-include :
e.g
< ng-include src=" 'views/menu.html' ">
My concern is that this is like a GET request per file and I was wondering if this would affect the load speed of my application. Because I am working in local, this loads in 2ms which is very quick but I was wondering how this would behave online.
My questions are :
Is this the best way to create a modular app with different html files and js controllers ?
Is there a better way to achieve what I want to do ?
I am still learning Angular, sorry if this is too basic.
Thanks
Its better to use index.html as basic load file which will load all css and js on the load of the app,
for ex:- you can make diffrent app for login and after login section. After login.
load all the js and css files through the app after login..it will improve the loading time and also be a modular
as suggested by #Dhruv Raj Singh It is good to use a different ng-app for pre-login and post-login.
It is always good to structure the code that you want.
Now ng-include
will Emitted event $includeContentRequested every time the ngInclude content is requested.
Now it up to the requirement use cases how to use and when to use.
If
the module is a sperate and special one which requires lots of resources specific to it only and will be used by few users and only few times then it is better to include them for that module only
else common resources should be included at ng-app level.
You can name and organised the resources whatever way you want but include them at post-login app creation.
My app is just 15 pages and does not contain a lot of code on the client side. The website is hosted with modulus from Amsterdam and I call it from Germany. It has an awful long loading time and I was the only one calling the website. The server stats:
154 requests transfered 9.14mb avg response 4.31ms
Most of the loading time seems to be vendor.css and vendor.js. As well as the css and js of the application.
What I already do:
load css first
try to load not needed js later like socket.io, google analytics but it is an Angular App so I need some JS in the head
uglify & minify my JS & CSS
concat CSS, JS to reduce requests
use sprites for small images which are used twice+
load diff. image sizes based on the screensize
use angular template cache for HTML (this adds a bit to initial loading time)
and probably some things I forgot to mention
Question 1
Why is there a gap in the waterfall, sure these are external scripts but it could already load the images in that time.
Question 2
Will loading the external JS from CDNs reduce a lot of the loading time?
I thought about s.th. like this: https://www.npmjs.com/package/gulp-cdnizer but I like it to have a similar prog. in dev and prod. Also my gulp processes are very complex, I really try to avoid restructuring too much there.
Question 3
How are things like gzip combineable with angular template cache?
Question 4
What else can I do to reduce the initial loading time,the loading time in the app is good.
because your site will not load until the dom will be load because this is a single page application, without angular the page have no idea what image to load...
YES! YES! YES!
my dom load was arround 11 secs... my js aggregated file was 850K.
with CDN my dom load was 2sec and the file was 250K (because good gzip)
YES YES YES! will help a lot!
use javascript aggregation to marge and minimize all your js to a single file (or 2 files).
if you have a lot of files, separate to 2 files, required and extra. what you need to load and what can be loaded later...
good luck :)