Optimizing web performance is crucial for providing a fast and smooth user experience. One key metric to focus on is the Largest Contentful Paint (LCP), which measures how quickly the main content of a page loads.
Angular’s NgOptimizedImage directive helps improve LCP and overall image loading performance by intelligently handling image priorities and loading behavior.
How NgOptimizedImage Boosts Performance
Prioritizes LCP images:
Automatically sets the fetchpriority attribute to high for above-the-fold images (the main images visible when the page loads). This ensures these images are fetched and rendered faster.
Lazy loads other images:
Images below the fold are loaded lazily by default, reducing initial page load time and saving bandwidth.
Preconnect optimization:
Automatically generates a preconnect link tag in the document’s <head>, establishing early connections to image hosts for faster fetching.
Smart loading attributes:
The loading attribute is set to eager for above-the-fold images (LCP image) to load immediately, while images below the fold are set to lazy, deferring their loading until needed.
Responsive images support:
Automatically generates a srcset attribute for images, enabling browsers to choose the best image size based on the device’s screen resolution and viewport.
Why It Matters
These optimizations collectively improve your app’s perceived speed and user experience by reducing the time taken to render the most important visual content.
How to Measure LCP
You can check your page’s Largest Contentful Paint using Chrome DevTools:
- Open Chrome DevTools (
F12 or Ctrl+Shift+I)
- Go to the Performance tab
- Record a page load and look for the LCP marker in the summary or timings
By integrating NgOptimizedImage in your Angular app, you can enhance image loading strategies with minimal effort — making your application faster and more efficient.
Usage: You can add this in your component-
import { IMAGE_CONFIG, IMAGE_LOADER, ImageLoaderConfig, NgOptimizedImage } from '@angular/common';
imports: [NgOptimizedImage],
<img ngSrc="https://example.com/image.jpg"
[ngSrcset]="['https://example.com/image-sm.jpg 1x', 'https://example.com/image-lg.jpg 2x']"
width="300" height="200"
alt="Example Image">