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
– arjun m nair arjun, Commented Aug 1, 2020 at 5:59
Have u tried reducing the image sizes & removing unwanted assets. I hope you are using AOT — Rahul Cv
– Rahul Cv, Commented Aug 1, 2020 at 6: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
– arjun m nair arjun, Commented Aug 1, 2020 at 6:06
What lazy load strategy you are using now? You can't use Eager lazy loading in this case — Rahul Cv
– Rahul Cv, Commented Aug 1, 2020 at 6:11

andsilver · Accepted Answer · 2020-08-01 07:06:54Z

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 1, 2020 at 7:06

andsilver

6,0323 gold badges22 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

arjun m nair arjun Over a year ago

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.

andsilver Over a year ago

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

arjun m nair arjun Over a year ago

am using filezilla app to make the site live so while files i have to upload .gz file or ,js file

andsilver Over a year ago

you just upload only .gz files

andsilver Over a year ago

it's because you didnt configure your server. what do you use for deployment?

|

Collectives™ on Stack Overflow

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

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related