Optimize Angular Application to Increase the speed of website.

Due to the substantial improvements in technology, by adding special features, websites can be developed more effectively to attract customers' attention.

Obviously, users are annoyed when faced with a long wait to load a website. One thing we must clarify is that delays can also lead to the loss of potential customers.

Basically, Angular CLI app have default features which can do all the required optimization for the site like :

Lazy Loading

Ahead-of-Time Compilation (AOT)

Lazy Loading

Lazy loading is a perfect feature that lets you free up the complexity of routers and components. To avoid the confusion of handling Chunk files, lazy loading allows you to split large files into multiple files and load JavaScript components only when a specific router is activated.

You have to define modules in app.router file

See the example below:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'lazyloadmodule', loadChildren: './lazyloadmodule/lazyloadmodule.module#LazyModuleFile' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }  
 

Then you have to create seprate router file for each component like this:

	import { NgModule } from '@angular/core';
	import { Routes, RouterModule } from '@angular/router';


	import { demo1 } from './demo1/demo1.component';

	import { demo2 } from './demo2/demo2.component';

	import { demo3 } from './demo3/demo3.component';

	const routes: Routes = [
	    { path: '', component: Demo1Component },
	    { path: 'Demo1', component: Demo2Component },
	    { path: 'Demo2', component: Demo3Component },
	];

	@NgModule({
	  imports: [
	    RouterModule.forChild(routes)
	  ],
	  declarations: [Demo1Component,Demo2Component,Demo3Component]
	})
	export class LazyModuleFile {}

Ahead-of-Time Compilation (AOT)

Before executing the code, this compiler converts the code you type into excellent JavaScript code to optimize and compress the entire structure of the code.

Once the angle application does this in the integrated optimization feature, it begins to focus on the speed of the page.

You can do more common things for Increase the website speed.

Serve scaled images

A service scaled image is a performance matrix of an image that is used to optimize a website using a scaled image. HTML can display any image size you upload, but this is not the case. When you try to compress a large image at a fixed size, it takes up extra space, which slows down the site. Therefore, make sure that the image you load matches the actual size of the HTML image on your site.

Optimize Images

Image optimization is another source of speed for your website. When uploading an image to a site, try loading the image in KB size instead of loading the image in MB. It's always best to convert large files to small sizes.

If you apply all of the above strategies on an angle site, it will solve the biggest problem with all issues. In addition, a few metrics and strategies can improve the performance of your website and can be applied to all applications.

Thanks