Come velocizzare un sito Angular: lazy loading e oltre

Se hai mai aperto DevTools su un'app Angular e visto un bundle da 2MB che blocca il primo render per 4 secondi, sai di cosa parlo. In 6 anni di progetti enterprise ho imparato che la performance non e un optional: e la differenza tra un cliente che converte e uno che chiude la tab.

Lazy loading dei moduli: il primo passo

Il 90% delle app Angular che ricevo in manutenzione carica tutto in un unico chunk. Il router offre lazy loading di default, ma non viene sfruttato.

La soluzione e semplice:

const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(m => m.DashboardComponent)
  }
];

Con Angular 17+ i standalone components rendono questo pattern ancora piu diretto. Il risultato tipico e un bundle iniziale ridotto del 40-60%.

OnPush + Signals: basta change detection inutile

La strategia di change detection di default controlla ogni componente ad ogni evento browser. Con OnPush, Angular aggiorna solo i componenti che ricevono input nuovi o emettono eventi.

Con Angular 17+ e i Signals il pattern diventa ancora piu preciso: solo i componenti che leggono un signal vengono aggiornati quando quel signal cambia.

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductListComponent {
  readonly products = signal<Product[]>([]);
}

Immagini: il colpevole piu sottovalutato

Un'immagine da 2MB non ottimizzata distrugge il LCP (Largest Contentful Paint) molto piu di qualsiasi bundle JS. Le regole di base:

• Formato WebP o AVIF con fallback PNG
• Attributo `loading="lazy"` su tutte le immagini below the fold
• Dimensioni esplicite per evitare layout shift (CLS)
• CDN per la distribuzione

Preloading strategico delle route

Mentre l'utente usa la home, puoi precaricare in background le route che visita di piu. Angular offre `PreloadAllModules` o strategie custom basate su hover o viewport.

RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules
})

Risultati reali

Su un progetto per una PMI milanese: bundle iniziale da 1.8MB a 340KB, LCP da 4.2s a 1.1s, Lighthouse score da 51 a 94. Le conversioni sono aumentate del 23% nel mese successivo.

La performance non e solo numeri su un report: e soldi.