Bad performance of Angular site in gtmetrix

Question

I recently launched my site with Angular and made it universal. But when I check this site on the gtmetrix, it does not good performance. Can anyone guide me what to do? I drastically reduced the size of the photos but have no idea about JavaScript files.

Link Gtmetrix: https://gtmetrix.com/reports/tarhbama.com/4vp1UBUI/

I always use ng build --prod. I use gzipper files.

app.module.ts

import { BrowserModule, BrowserTransferStateModule, makeStateKey, TransferState } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from 'src/environments/environment';
import { ServiceWorkerModule } from '@angular/service-worker';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserAnimationsModule,
    BrowserTransferStateModule,
    CoreModule,
    AppRoutingModule,
    SharedModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './core/services/auth-guard.service';
import { AdminContentComponent } from './shared/layout/admin-content/admin-content.component';
import { UiContentComponent } from './shared/layout/ui-content/ui-content.component';

const routes: Routes = [
  { path: 'admin', canActivate: [AuthGuard], component: AdminContentComponent, loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '', component: UiContentComponent, loadChildren: () => import('./ui/ui.module').then(m => m.UiModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabled',
    scrollPositionRestoration: 'enabled',
    onSameUrlNavigation: 'reload',
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

Here are few ways to reduce the angular bundle size.

1. Whenever you build an angular application, always use ng build --prod. This --prod flag will perform aot and tree shaking which will reduce the bundle size.(for angular v5 or greater). For versions less than that, you will have to use ng build --prod --build-optimizer
2. Check if your files are gzipped or not. (gzipped files are only 25% of the actual file size.). To check if you have gzipped your files, just open the network tab of the developer console. In the “Response Headers”, if you should see “Content-Encoding: gzip”, you are good to go.

Node js

const compression = require('compression')
const express = require('xpress')
const app = express()
app.use(compression())

Java

server.compression.enabled=true
server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
server.compression.min-response-size=1024

3. Analyze your bundle.

If your bundle size does get too big you may want to analyze your bundle because you may have used an inappropriate large-sized third party package or you forgot to remove some package if you are not using it anymore. Webpack has an amazing feature to give us a visual idea of the composition of a webpack bundle.

Steps to get the graph:

1.npm install -g webpack-bundle-analyzer

2. In your Angular app, run ng build --stats-json (don’t use flag --prod). By enabling --stats-json you will get an additional file stats.json

3. Finally, run webpack-bundle-analyzer path/to/your/stats.json and your browser will pop up the page at localhost:8888. Have fun with it.

You may be surprised,

a) that you forgot to remove some packages you are not using anymore and/or

b) that some packages are way larger than expected and could be replaced with another one and/or

c) that you have improperly imported some libraries (For example, 80% of moment.js is just locale data which is probably not needed) so that you have some direction to look for an answer.

4. Lazy loading

Split your module into smaller chunks and load only the ones which are required.

5. Using Angular Universal A.K.A. server-side rendering (not in cli)

6. Web Workers (again, not in cli, but a very requested feature) see: https://github.com/angular/angular-cli/issues/2305

7. Service Workers see: https://github.com/angular/angular-cli/issues/4006

References:

https://medium.com/angular-in-depth/optimize-angular-bundle-size-in-4-steps-4a3b3737bf45

How to decrease prod bundle size?