Core Web Vitals: How to make your angular app feel like a dream by Nicolas Frizzarin

Core Web Vitals are three key metrics measuring web performance:

• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Interaction to Next Paint (INP) - replacing First Input Delay (FID)

Key optimization techniques for Angular apps:

• Use single file components to enforce smaller component sizes
• Implement defer and preloading in Angular 17+
• Use ng-component outlet for lazy loading
• Leverage @loading and @placeholder for better loading states
• Properly size images and iframes to prevent layout shifts

Common performance issues to address:

• Blocking main thread with heavy JavaScript
• Network waterfall fetch requests
• Large initial bundle sizes
• Unoptimized resource loading
• Excessive DOM size

Performance measurement approaches:

• Real User Monitoring (RUM) for production data
• Lab tools like Lighthouse for development testing
• WebVitals.js library for metrics collection

Best practices for performance:

• Parallelize code execution where possible
• Catch errors properly to prevent performance degradation
• Reserve space for dynamic content to prevent layout shifts
• Preload critical resources (images, stylesheets)
• Break down large interactions into smaller tasks

Zone.js considerations:

• Run performance-intensive code outside Angular zones
• Use ngZone.run selectively for view updates
• Consider experimental zoneless mode in newer Angular versions