feat: lazy loading switch option for the Enhanced Image Teaser compon…

…ent (#1591)

Co-authored-by: Stefan Hauke <s.hauke@intershop.de>

.vscode/intershop.txt

@@ -23,6 +23,7 @@ concardis
 concat
 condensedbold
 condensedregular
+contentful
 costcenter
 costcenters
 creditcard

docs/README.md

@@ -59,6 +59,7 @@ kb_sync_latest_only
 - [Guide - Cookie Consent](./guides/cookie-consent.md)
 - [Concept - URL Rewriting](./concepts/url-rewriting.md)
 - [Guide - Mocking REST API Calls](./guides/mocking-rest-calls.md)
+- [Guide - Core Web Vitals](./guides/core-web-vitals.md)
 
 ### Maintenance
 

docs/guides/core-web-vitals.md

@@ -0,0 +1,25 @@
+<!--
+kb_guide
+kb_pwa
+kb_everyone
+kb_sync_latest_only
+-->
+
+# Core Web Vitals
+
+With the growing importance of good Core Web Vitals (CWV) metrics, the Intershop PWA includes several optimizations and functionalities that are intended to improve these metrics.
+The following chapter lists aspects of the Intershop PWA that are related to the CWV and should be considered while developing an Intershop PWA based storefront.
+In addition, you will find relevant configuration options to keep in mind when maintaining the content of the PWA in the underlying Intershop Commerce Management.
+
+## CMS
+
+### Enhanced Image Teaser
+
+The rendering of the Enhanced Image Teaser component is optimized in a way that assumes that this teaser content is located on a prominent place on a page, e.g., the home page.
+In this spot, the component is not supposed to be loaded lazily which would worsen the CWV for that page, specifically the Largest Contentful Paint (LCP) metric.
+To avoid that, Enhanced Image Teaser images are loaded by default with `loading="eager"` instead of the default `loading="lazy"` used for most other images in the PWA.
+If `loading="lazy"` is explicitly intended for certain Enhanced Image Teaser images, the class `loading-lazy` needs to be added to the Enhanced Image Teaser instances `CSS Class` configuration parameter in the ICM back office.
+
+## Further References
+
+- [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals)

docs/guides/migrations.md

@@ -35,6 +35,9 @@ To keep the current behavior in an existing project, either adapt the `0` defaul
 
 The [Brotli NGINX module](https://github.com/google/ngx_brotli) is used instead of gzip for compression on the NGINX server now, see [NGINX Optimizations](./optimizations.md#nginx-optimizations).
 
+The rendering of the [`CMSImageEnhancedComponent`](../../src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts) has been changed and is no longer loading the image with `loading="lazy"` by default.
+See the [Enhanced Image Teaser section in "Guide - Core Web Vitals"](./core-web-vitals.md#enhanced-image-teaser) for further information.
+
 ## From 4.2 to 5.0
 
 Starting with the Intershop PWA 5.0 we develop and test against an Intershop Commerce Management 11 server.
@@ -274,7 +277,7 @@ A `ProductVariationSelectSwatchComponent` for colorCode and swatchImage variatio
 
 The user authentication process has changed.
 User authentication tokens are requested from the ICM server using the `/token` REST endpoint now.
-Regarding this, the logout action triggers a service which revokes the currently available access token on the ICM backend.
+Regarding this, the logout action triggers a service which revokes the currently available access token on the ICM back office.
 If the logout was successful, all personalized information is removed from the ngrx store.
 Please use `logoutUser({ revokeToken: false })` from the account facade or dispatch `logoutUserSuccess` instead of the `logoutUser` action to use the old behavior.
 

src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html

@@ -30,7 +30,7 @@
         media="(max-width: 1199px)"
       />
       <img
-        loading="lazy"
+        [attr.loading]="loading"
         [src]="pagelet.stringParam('Image')"
         [attr.alt]="pagelet.stringParam('AlternateText') || ('image.alt_text.default' | translate)"
         class="enhanced-image"

src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts

@@ -14,4 +14,12 @@ export class CMSImageEnhancedComponent implements CMSComponent {
 
   isRouterLink = ContentViewHelper.isRouterLink;
   routerLink = ContentViewHelper.getRouterLink;
+
+  /**
+   * Getter method to decide whether the image is loading 'lazy' or 'eager'
+   * based on the presence of the CSS class 'loading-lazy' in the pagelet configuration.
+   */
+  get loading(): 'lazy' | 'eager' {
+    return this.pagelet.stringParam('CSSClass')?.includes('loading-lazy') ? 'lazy' : 'eager';
+  }
 }