Améliorez les performances de vos applications Angular en optimisant le chargement de vos images

Quelques définitions :

• LCP : Largest Contentful Paint. Il s’agit d’une mesure importante, permettant de déterminer la vitesse de chargement d’une page telle que perçu par l’utilisateur. Plus précisément c’est la différence entre l’instant où le chargement de la page a commencé et l’instant où les éléments tels que les images et les blocks sont chargés
• Standalone Component (directive) : approche simplifiée de construction des applications angular. Avec cette approche les composants ne sont pas obligés d’être déclarés dans le NgModule. Introduite dans la version 14 mais rendue stable dès la version 15
• Image CDN : Cela peut être perçu comme une API qui permet d’accéder et de manipuler les images utilisées sur un site. Généralement il est spécialisé dans la transformation, l’optimisation et la livraison des images.

Pour optimiser les performances des applications angular, plusieurs mécanismes ont été mis en place au fur et à mesure de l’évolution des versions.

Parmi ces mécanismes nous présenterons l’un qui spécialement permet d’optimiser la gestion des images et par conséquent le « Largest Contenful Paint (LCP) ».

Il s’agit de la directive NgOptimizedImage.

La directive NgOptimizedImage   !

Il s’agit d’une directive standalone qui permet d’optimiser le LCP en priorisant l’optimisation du chargement des images sur votre site au travers de:

• La mise à jour de l’attribut fetchpriority  sur la balise <img>
• Le chargement paresseux (différé) des autres images par défaut
• Génère automatiquement l’attribut srcset
• Génère une balise link avec la valeur de l’attribut rel définie sur preload si l’application utilise le SSR

En plus de l’optimisation de l’élément LCP de type image, cette directive favorise un certain nombre de bonnes pratiques de chargement des images telles que :

• L’utilisation d’une url CDN images pour appliquer l’optimisation d’images
• Génère un avertissement si le width et le heigth ne sont pas correctement définis

Utilisation de cette directive

• Vous pouvez l’importer directement dans votre NgModule :

ou directement dans votre composant puisqu’il s’agit d’une directive standalone de la manière suivante :

@Component({  standalone: true  imports: [NgOptimizedImage],})
class OrdersComponent {}

Si vous souhaitez importer un composant standalone dans un autre composant, alors ce dernier doit être standalone. C’est la raison pour laquelle on commence à définir la propriété standalone du composant host à true.

Attention !!! un composant standalone ne doit figurer dans aucun NgModule. Si vous souhaitez réutiliser un composant standalone, alors il faut l'importer plutôt dans le tableau imports de votre module :

@NgModule({  imports: [    CommonModule,    OrdersRoutingModule,    OrdersComponent  ],

• Ensuite mettre en place un loader (optionnel) :

Il vous permet de spécifier la fonction utilisée pour charger les images. Très pratique si vous utilisez un CDN pour le chargement de vos images.

‍

exemple de loader  pour charger des images depuis le dossier assets

providers: [  {    provide: IMAGE_LOADER,    useValue: (config: ImageLoaderConfig) => {      return `http://localhost:4200/assets/${config.src}`;    },  },]

• Ensuite on active la directive proprement dite dans le template
• ‍

Utilisation de ngSrc au lieu de src

<img ngSrc="cat.jpg">

‍

Rien que le nom suffit pour charger l’image une fois le loader correctement défini

•    Marquer certaines images comme étant prioritaire et définir les dimensions.

<img ngSrc="cover2.png" width="200" height="200"  priority>

‍

Ceci permet de définir quelles images doivent être chargées en priorité ainsi que la taille et la largeur de l’image.

Une erreur est générée si les dimensions ne sont pas définies

et un avertissement si le ratio de l’image n’est pas respecté.

Définir les dimensions permet à la directive de charger l’image avec la taille requise au lieu de la charger avec la taille réelle, ce qui dans certains cas peut accroître énormément les performances.

•    Enfin vous pouvez désactivez le chargement différé des images.

  
  	<img ngSrc="java.png" width="200" height="200" loading="eager">
  

Par défaut la valeur de l’attribut loading est lazy.

Dans cet article nous avons exploré l’utilisation de la directive NgOptimizedImage pour optimiser le chargement de nos pages web Angular. Et améliorer le LCP.

L’optimisation de la vitesse de chargement perçue reste un véritable enjeu dans la mesure où 57% des internautes abandonnent un site qui prend plus de 3s pour se charger et 97% d’entre eux n’y reviendront plus.

A très bientôt pour un autre article sur les performances Angular.