CODEWITHSUNDEEP
lazy-loading
Techagesite
Techagesite

Reputation: 475

How to tell if lazy loading is working?

Im using a js called blazy and the image loads as i scroll down the page to it. The image shows up in pingdom speed test, should it show up in the speed test tree if lazy loading is working for the image?

Upvotes: 10

Views: 22354

Answers (2)

Mubashir Jamali
Mubashir Jamali

Reputation: 196

Very easy solution:

in Google Chrome open chrome dev tools.

1. Select the Network tab

step one screenshot/image

2. Click on No throttling

step two screenshot/image

3. And then choose how much you want to make the network slower to let Lazy Loading show up (until the data is received)

You can check this way if your app/site lazy loading is working or not.

Upvotes: 6

Mo Sa
Mo Sa

Reputation: 161

From my experience, I've seen using the correct Lazy Router Setup will result in Angular serving back a minified js file bundle, which has the same name of your lazy router @NgModule ts custom file..

That's what Lazy loading is all about anyway.. bundling resources upon request..

I've added a simple Lazy Loading ts file and called it lazy-loading-router, and looking in the Network tab in Chrome Dev Tools.. I can see a minified js file called lazy-loading-router.js

enter image description here

STEP 1: Create a custom declarations NgModule file : lazy-loading-router.ts

import { NgModule } from '@angular/core';
import { Comp2Component } from './components/comp2/comp2/comp2.component';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [
        Comp2Component
    ],
    imports: [
        Comp2Component,
        RouterModule,
        ReactiveFormsModule,
    ]
  })
  export class lazyMod {}

STEP 2: Create lazyloader.ts Router

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

const com2Lazy: Routes = [
    { 
        path: 'comp2', 
        loadChildren: () => import('./lazy-loading-router').then(e => e.lazyMod) 
    },
];

@NgModule({
  imports: [
    RouterModule.forRoot(com2Lazy, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class lazyLoader {}

STEP 3 Add lazyLoader to your App.module.ts

Upvotes: 0

Related Questions