How to speed up loading time on initial load in Angular 7?

Question

I have created Angular Application and split the single module into a bunch of smaller feature modules and lazy load them.And removed unnecessary scripts and styles from index.html and load it at component levels. After final deploy files First time loading time is too slow,

i have tried with --prod now the file size is around 3MB is there any other possible to speed up

Below is the screen shot of my build file size enter image description here

in that file chunk {33} js file size is more how to reduce that ? — arjun m nair arjun, Aug 01 '20 at 05:59
Have u tried reducing the image sizes & removing unwanted assets. I hope you are using AOT — Rahul Cv, Aug 01 '20 at 06:04
@RahulCv yup i have removed unwanted images form assets and file size also less.My main issue is in that file chunk {33} js file size (in that image) is more how to reduce that ? — arjun m nair arjun, Aug 01 '20 at 06:06
What lazy load strategy you are using now? You can't use Eager lazy loading in this case — Rahul Cv, Aug 01 '20 at 06:11

score 1 · Answer 1 · answered Aug 01 '20 at 07:06

1

Speed Optimization does not only depends on lazy-loading.

If you are sure that you optimized your code, removed unnecessary imports, styles, scripts, then you must apply other solutions like:

Make all child routes as lazy loading.
Server Side Rendering with Angular Universal
Serve pre-compressed contents from your server. If you deployed it with Nginx, you can enable Gzip compression.
Update cache policies for static assets. This also should be configured from server side.
Image Lazy loading. If you have several images on the first page, you load only visible image at first and load others on scroll. You can find an Angular module for that.
Load external scripts only when they are needed.

There are more techniques can be applied for speed.

You can test your app with Lighthouse or GTmetrix. The tools will suggest you solutions to apply and you can just follow them.

answered Aug 01 '20 at 07:06

critrange

5,652
2
16
47

i tried gzip and i compressed all file.gz format but don't know which file has to be uploaded to server to make live .when i compress it show two file for each.one normal and another one compressed. – arjun m nair arjun Aug 01 '20 at 07:17
you can just gzip all of the files, so basically you build the app with `ng build --prod` and gzip all `js`, `css` and `html` files inside `dist` – critrange Aug 01 '20 at 07:18
am using filezilla app to make the site live so while files i have to upload .gz file or ,js file – arjun m nair arjun Aug 01 '20 at 07:21
you just upload only .gz files – critrange Aug 01 '20 at 07:22
it's because you didnt configure your server. what do you use for deployment? – critrange Aug 01 '20 at 07:25
what i have to configure in server i did'nt get you am new to this field. – arjun m nair arjun Aug 01 '20 at 07:26
how did you deploy your app? – critrange Aug 01 '20 at 07:28
by using fillezilla – arjun m nair arjun Aug 01 '20 at 07:32
just copy the file to server by filezilla – arjun m nair arjun Aug 01 '20 at 07:32
so you dont configure the server yourself.. i dont know what kind of service you are using for deployment but there should be a way to customize it. – critrange Aug 01 '20 at 07:35
can you just provide me a document or link how to do that ? if possible – arjun m nair arjun Aug 01 '20 at 07:36
i used to deploy an angular app myself on a linux server using Nginx. i think you server do deployment in different way, so you should know what service you are using and how to configure it. – critrange Aug 01 '20 at 07:38

How to speed up loading time on initial load in Angular 7?

1 Answers1