Angular

Angular Universal

Search Engine Optimizati

Gtmetrix

Angular Performance Series 2: Supercharge Your LCP with NgOptimizedImage

3 min readMay 30, 2025

Welcome to the second article in our Angular Performance Series! In the first article, we tackled SEO optimization and achieving GTmetrix A-grade scores for Angular applications. If you missed it, check it out here.

Now, let’s turn our focus to Core Web Vitals, specifically Largest Contentful Paint (LCP) — a critical factor for both SEO rankings and user experience.

In this article, we’ll explore how Angular’s built-in NgOptimizedImage directive can supercharge your LCP, making your apps feel lightning-fast, even on mobile networks.

This series is your one-stop guide to mastering Angular performance — step by step, metric by metric.

👉 Follow us on LinkedIn and Medium for weekly tech insights and practical tips to supercharge your development journey!

Why LCP Matters for Your Angular App

LCP measures how quickly the largest visible element (often an image or heading) loads in the viewport. A good LCP is under 2.5 seconds — this is Google’s benchmark for a fast website. A slow LCP impacts:

🔻 SEO rankings

🔻 User engagement

🔻 Conversion rates

For Angular sites with rich visuals, images are usually the biggest culprit behind a sluggish LCP. That’s why optimizing how images load is crucial.

Meet NgOptimizedImage: Your LCP Performance Booster

Introduced in Angular 15, NgOptimizedImage is a powerful directive that automates many best practices for image optimization:

— Lazy loading and async decoding

— Validates image dimensions to prevent layout shifts

— Supports modern formats like WebP and AVIF

— Preloads LCP-critical images for faster load times

By integrating NgOptimizedImageYou’ll boost not just LCP, but also overall Core Web Vitals.

How to Use NgOptimizedImage: Step-by-Step Guide

1️⃣ Enable the Directive

Import NgOptimizedImage In your Angular component:


import { NgOptimizedImage } from '@angular/common';
@Component({
  standalone: true,
  imports: [NgOptimizedImage],
  // ...
})

2️⃣ Replace `<img>` with `<img ngSrc>`

Update your image tags like this:


<imgngSrc="assets/images/banner.webp"
  width="1200"
  height="600"
  priority
  alt="Banner Image" />

Notice the priority attribute? That’s the magic for LCP-critical images—load them eagerly!

3️⃣ Use Modern Formats: WebP or AVIF

Always prefer compressed, modern image formats like WebP or AVIF for better performance without sacrificing quality.

4️⃣ Avoid Lazy Loading LCP Images

For images that are key to LCP, don’t lazy load. Instead, set the priority flag.

5️⃣ Serve Responsive Images

Use srcset and sizes for adaptive image loading based on device screen size:


<imgngSrc="assets/images/banner.webp"
  width="1200"
  height="600"
  priority
  alt="Banner Image"
  [sizes]="'(max-width: 600px) 100vw, 600px'"
  [srcset]="[
    'assets/images/banner-600w.webp 600w',
    'assets/images/banner-1200w.webp 1200w'
  ]"
/>

Preconnect for Lightning-Fast CDN Image Loading

Want to shave off extra milliseconds? Preconnect to your image CDN:


<link rel="preconnect" href="<https://your-cdn.com>">

Angular’s NgOptimizedImage auto-generates preconnect hints when it can detect the image origin. If not, add them manually in your index.html <head> section.

Handling Dynamic Images? Use a Custom Image Loader

If your images come from a CMS, API, or CDN, you’ll need a custom image loader. Here’s how to set it up in app.config.ts:


import { ApplicationConfig } from '@angular/core';
import { IMAGE_LOADER, ImageLoaderConfig } from '@angular/common';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: IMAGE_LOADER,
      useValue: (config: ImageLoaderConfig) => {
        return `https://your-cdn.com/images?src=${config.src}&width=${config.width}`;
      },
    }
  ],
};

This ensures Angular knows how to fetch and optimize images dynamically based on the provided width and source.

Final Takeaways

Optimize LCP by loading images smartly with NgOptimizedImage
Use modern formats like WebP and AVIF
Preload critical images (set priority)
Add preconnect hints for CDN-hosted images
Configure a custom image loader for dynamic content

By applying these strategies, you’ll unlock faster LCP times, happier users, and better SEO for your Angular web apps.

Watch this space for upcoming articles on:

SVG file optimization to avoid excessive DOM size.
‘OnPush change detection’ strategy to optimize performance by reducing unnecessary change detection.
Handled leverage browser caching for images & enabled compression for asset files.

Contributors

This article was written by Mahadev Maity (Frontend Lead)

Let’s Build the Future Together!
For your Generative AI solutions and project development needs, get in touch with MSS — we’re here to help bring your ideas to life.