7 - Optimizing Core Web Vitals in Angular

// hero.component.ts
import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [NgOptimizedImage],
  template: `
    <section class="hero">
      <!-- LCP image: priority loads immediately -->
      <img
        ngSrc="assets/images/hero-banner.webp"
        width="1200"
        height="630"
        priority
        alt="Portfolio hero banner"
      />

      <!-- Below-the-fold images: automatic lazy loading -->
      <img
        ngSrc="assets/images/project-thumb.webp"
        width="400"
        height="300"
        alt="Project preview"
      />
    </section>
  `
})
export class HeroComponent {}
    

<head>
  <!-- Preconnect to critical resource domains -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preconnect" href="https://cdn.example.com" />

  <!-- Preload the LCP image -->
  <link
    rel="preload"
    as="image"
    href="/assets/images/hero-banner.webp"
    type="image/webp"
    fetchpriority="high"
  />

  <!-- Preload the critical font -->
  <link
    rel="preload"
    as="font"
    href="/assets/fonts/inter-v12-latin-regular.woff2"
    type="font/woff2"
    crossorigin
  />
</head>
    

// product-list.component.ts - BEFORE (Zone.js, global change detection)
@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of products">
      <span>{{ product.name }}</span>
      <button (click)="addToCart(product)">Add</button>
    </div>
  `
})
export class ProductListComponent {
  products: Product[] = [];

  addToCart(product: Product): void {
    // Every click triggers change detection across the ENTIRE app
    this.cartService.add(product);
  }
}

// product-list.component.ts - AFTER (Signals, targeted updates)
@Component({
  selector: 'app-product-list',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (product of products(); track product.id) {
      <div>
        <span>{{ product.name }}</span>
        <button (click)="addToCart(product)">Add</button>
      </div>
    }
  `
})
export class ProductListComponent {
  products = input.required<Product[]>();
  private cartService = inject(CartService);

  addToCart(product: Product): void {
    // Only this component gets updated
    this.cartService.add(product);
  }
}
    

// Optimized approach: break heavy work into chunks
export class DataProcessorComponent {
  async onFilterChange(filter: string): Promise<void> {
    // 1. Update UI immediately (visual feedback)
    this.isLoading.set(true);

    // 2. Yield control to the browser for paint
    await this.yieldToMain();

    // 3. Process heavy work in chunks
    const results = await this.processInChunks(this.rawData(), filter);

    // 4. Update results
    this.filteredData.set(results);
    this.isLoading.set(false);
  }

  private yieldToMain(): Promise<void> {
    return new Promise(resolve => {
      // scheduler.yield() where available, otherwise setTimeout
      if ('scheduler' in window && 'yield' in (window as any).scheduler) {
        (window as any).scheduler.yield().then(resolve);
      } else {
        setTimeout(resolve, 0);
      }
    });
  }

  private async processInChunks(
    data: Item[],
    filter: string,
    chunkSize = 500
  ): Promise<Item[]> {
    const results: Item[] = [];
    for (let i = 0; i < data.length; i += chunkSize) {
      const chunk = data.slice(i, i + chunkSize);
      results.push(...chunk.filter(item => item.name.includes(filter)));
      // Yield main thread between chunks
      if (i + chunkSize < data.length) {
        await this.yieldToMain();
      }
    }
    return results;
  }
}
    

<!-- BAD: no dimensions, causes CLS -->
<img src="photo.jpg" alt="Photo" />

<!-- GOOD: explicit dimensions, zero CLS -->
<img src="photo.jpg" alt="Photo" width="800" height="600" />

<!-- BETTER: NgOptimizedImage with fill for responsive images -->
<div class="image-container" style="position: relative; aspect-ratio: 16/9;">
  <img ngSrc="photo.webp" fill alt="Responsive photo" />
</div>

<!-- Videos and iframes: same rule -->
<iframe
  src="https://www.youtube.com/embed/xxx"
  width="560"
  height="315"
  loading="lazy"
  title="Video tutorial"
></iframe>
    

// article-skeleton.component.ts
@Component({
  selector: 'app-article-skeleton',
  standalone: true,
  template: `
    <div class="skeleton-wrapper">
      <div class="skeleton-image" style="aspect-ratio: 16/9;"></div>
      <div class="skeleton-title" style="height: 32px; width: 80%;"></div>
      <div class="skeleton-text" style="height: 16px; width: 100%;"></div>
      <div class="skeleton-text" style="height: 16px; width: 95%;"></div>
      <div class="skeleton-text" style="height: 16px; width: 60%;"></div>
    </div>
  `,
  styles: [`
    .skeleton-wrapper {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .skeleton-image, .skeleton-title, .skeleton-text {
      background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 4px;
    }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
  `]
})
export class ArticleSkeletonComponent {}

// Usage in parent component
@Component({
  template: `
    @if (article(); as art) {
      <app-article [data]="art" />
    } @else {
      <app-article-skeleton />
    }
  `
})
export class ArticlePageComponent {
  article = signal<Article | null>(null);
}
    

<!-- Above-the-fold content: loaded normally -->
<app-hero />
<app-featured-projects />

<!-- Below-the-fold: loaded when visible -->
@defer (on viewport) {
  <app-blog-preview />
} @placeholder {
  <app-blog-skeleton />
}

@defer (on viewport) {
  <app-testimonials />
} @placeholder {
  <div style="min-height: 400px;"></div>
}

<!-- Heavy components: loaded on interaction -->
@defer (on interaction) {
  <app-contact-form />
} @placeholder {
  <button class="cta-button">Contact Me</button>
}

<!-- Non-critical components: loaded when browser is idle -->
@defer (on idle) {
  <app-newsletter-signup />
}
    

// app.routes.ts - Automatic code splitting per route
export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./pages/home/home-page').then(m => m.HomePageComponent),
  },
  {
    path: 'blog',
    loadComponent: () =>
      import('./pages/blog/blog-page').then(m => m.BlogPageComponent),
  },
  {
    path: 'blog/:slug',
    loadComponent: () =>
      import('./pages/article/article-page').then(m => m.ArticlePageComponent),
  },
  {
    path: 'dev-tools',
    loadChildren: () =>
      import('./pages/dev-tools/dev-tools.routes').then(m => m.DEV_TOOLS_ROUTES),
  },
];
    

# Install source-map-explorer
npm install --save-dev source-map-explorer

# Production build with source maps
ng build --source-map

# Analyze the main bundle
npx source-map-explorer dist/portfolio/browser/main-*.js

# Alternative: use webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/portfolio/browser/stats.json
    

{
  "projects": {
    "portfolio": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "250kB",
                  "maximumError": "500kB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true
            }
          }
        }
      }
    }
  }
}
    

// web-vitals.service.ts
import { Injectable, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class WebVitalsService {
  private platformId = inject(PLATFORM_ID);

  async measureVitals(): Promise<void> {
    if (!isPlatformBrowser(this.platformId)) return;

    const { onLCP, onINP, onCLS, onFCP, onTTFB } = await import('web-vitals');

    onLCP((metric) => {
      this.reportMetric('LCP', metric.value, metric.rating);
    });

    onINP((metric) => {
      this.reportMetric('INP', metric.value, metric.rating);
    });

    onCLS((metric) => {
      this.reportMetric('CLS', metric.value, metric.rating);
    });

    onFCP((metric) => {
      this.reportMetric('FCP', metric.value, metric.rating);
    });

    onTTFB((metric) => {
      this.reportMetric('TTFB', metric.value, metric.rating);
    });
  }

  private reportMetric(
    name: string,
    value: number,
    rating: 'good' | 'needs-improvement' | 'poor'
  ): void {
    // Send to Google Analytics 4
    if (typeof gtag !== 'undefined') {
      gtag('event', name, {
        value: Math.round(name === 'CLS' ? value * 1000 : value),
        event_category: 'Web Vitals',
        event_label: rating,
        non_interaction: true,
      });
    }

    // Log for debug in development
    console.log(`[${rating.toUpperCase()}] ${name}: ${value.toFixed(2)}`);
  }
}
    

// app.config.ts - Configuring an image loader
import { provideImageKitLoader } from '@angular/common';
// Or use a custom loader
import { IMAGE_LOADER, ImageLoaderConfig } from '@angular/common';

export const appConfig: ApplicationConfig = {
  providers: [
    // Option 1: Built-in loader (Cloudinary, ImageKit, Imgix)
    provideImageKitLoader('https://ik.imagekit.io/myaccount'),

    // Option 2: Custom loader
    {
      provide: IMAGE_LOADER,
      useValue: (config: ImageLoaderConfig) => {
        const width = config.width ? `?w=${config.width}` : '';
        const quality = '&q=80';
        const format = '&fm=webp';
        return `https://cdn.example.com/${config.src}${width}${quality}${format}`;
      }
    }
  ]
};

// Usage in template
@Component({
  template: `
    <!-- Automatically generates srcset with multiple sizes -->
    <img
      ngSrc="hero-banner.jpg"
      width="1200"
      height="630"
      priority
      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 80vw, 1200px"
      alt="Hero banner"
    />
  `
})
export class HeroComponent {}
    

/* styles.css - Optimized font declarations */

/* Font with Latin subset (reduces size by 60-70%) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;  /* Show text immediately with fallback */
  src: url('/assets/fonts/inter-v12-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
  /* size-adjust reduces CLS caused by font swap */
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-v12-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-v13-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* Font stack with metrically compatible fallbacks */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

code, pre {
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code',
    'SF Mono', Consolas, monospace;
}
    

// performance-monitor.service.ts
@Injectable({ providedIn: 'root' })
export class PerformanceMonitorService {
  private platformId = inject(PLATFORM_ID);

  constructor() {
    afterNextRender(() => {
      this.observeLCP();
      this.observeCLS();
      this.observeLongTasks();
    });
  }

  private observeLCP(): void {
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const lastEntry = entries[entries.length - 1] as any;
      const lcpValue = lastEntry.startTime;
      const lcpElement = lastEntry.element?.tagName || 'unknown';

      this.sendToAnalytics('LCP', {
        value: Math.round(lcpValue),
        element: lcpElement,
        url: lastEntry.url || '',
        rating: lcpValue <= 2500 ? 'good' : lcpValue <= 4000 ? 'needs-improvement' : 'poor'
      });
    });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  }

  private observeCLS(): void {
    let clsScore = 0;
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries() as any[]) {
        if (!entry.hadRecentInput) {
          clsScore += entry.value;
        }
      }
    });
    observer.observe({ type: 'layout-shift', buffered: true });

    // Send CLS when user leaves the page
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.sendToAnalytics('CLS', {
          value: Math.round(clsScore * 1000),
          rating: clsScore <= 0.1 ? 'good' : clsScore <= 0.25 ? 'needs-improvement' : 'poor'
        });
      }
    });
  }

  private observeLongTasks(): void {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.duration > 50) {
          console.warn(
            `Long Task detected: ${entry.duration.toFixed(0)}ms`,
            entry
          );
        }
      }
    });
    observer.observe({ type: 'longtask', buffered: true });
  }

  private sendToAnalytics(name: string, data: Record<string, any>): void {
    // Send to GA4
    if (typeof gtag !== 'undefined') {
      gtag('event', name, {
        ...data,
        event_category: 'Web Vitals',
        non_interaction: true,
      });
    }

    // Send to custom endpoint (beacon for reliability)
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/vitals', JSON.stringify({
        metric: name,
        ...data,
        timestamp: Date.now(),
        url: location.href,
        userAgent: navigator.userAgent,
      }));
    }
  }
}
    

// Initialization in root component
@Component({
  selector: 'app-root',
  standalone: true,
  template: `<router-outlet />`
})
export class AppComponent {
  private webVitals = inject(WebVitalsService);
  private platformId = inject(PLATFORM_ID);

  constructor() {
    afterNextRender(() => {
      // Start Core Web Vitals measurement
      this.webVitals.measureVitals();

      // Monitor SPA navigation timing
      this.trackNavigationTiming();
    });
  }

  private trackNavigationTiming(): void {
    const navigation = performance.getEntriesByType('navigation')[0] as any;
    if (navigation) {
      gtag('event', 'page_timing', {
        dns_time: Math.round(navigation.domainLookupEnd - navigation.domainLookupStart),
        tcp_time: Math.round(navigation.connectEnd - navigation.connectStart),
        ttfb: Math.round(navigation.responseStart - navigation.requestStart),
        dom_load: Math.round(navigation.domContentLoadedEventEnd - navigation.startTime),
        full_load: Math.round(navigation.loadEventEnd - navigation.startTime),
      });
    }
  }
}