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 :)
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 was taking a look in this nice Angular best practices repository and I can't find a proper way to apply this pattern of modularization.
The author suggest importing all the other modules in the main app module, that seems to be a great idea for me, but in my perception it also means loading all the js files of the system when loading the page for the first time "into" the main module.
I'm looking this wrong? I'm I right? If I'm right, is there a workaround to avoid loaind all the js files? Should I be worried with the loading time of the js files?
Angular application is SPA, the page is loaded only once, all relevant JS files should be loaded at the time when the app is bootstrapped.
Angular doesn't officially support lazy loading to load additional module files on demand, doing this by patching the framework may cause more troubles than it may solve.
Bundling all modules with bundling systems (Webpack, Browserify, etc) into a single JS improves loading time and results in better performance than loading JS files selectively.
**I am developing a site ,in which front-end is made with Angularjs **
Site name is http://limokit.com/limolog but the problem is that , it take minimum 30 seconds to open the site page on browser. How to reduce this loading time?
we used ngRoute to change the states , but do not getting the result which we wanted to achieve . We also converted all html and js as minified one but it is also not effecting the loading issue for first time.
At first glance it looks like you're loading individual js and css file separately. This can slow down the loading of the page greatly especially on slower connections. The common optimization to do here is to group all js files and css files together and serve one single js and one single css file on production. I don't know what you're using to serve the JS/CSS files but I use compressor for Django.
Also, to further debug this problem, it helps if you look at the network requests that your page is doing on page load in the Chrome inspector. You can glean a lot of information by seeing where your bottlenecks are on page load.
In your site you're having 63 requests and around 3MB size (uncached).
As mentioned in the other answer package everything in bundles. E.g. vendor.bundle.js, bundle.js and bundle.css and also minify these bundles.
I would use webpack or gulp for bundling.
For debugging you can look in the browser console networking tab at the lower right in Firefox you can see a link to load time statistics and also get a info about caching.
The following screenshot shows statistics to your site (left with cache, right uncached).
.
Ditch all frameworks and libraries such as Angular and Jquery and use JSvanilla. Plain javascript is much faster to run(around 160x according to many resources i read..i also know that from my own experience).
Frameworks makes your site crawl.
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.
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