From 650dcf35286ff4c044044941d90a82f5d0ef65be Mon Sep 17 00:00:00 2001 From: suschneider <57661483+suschneider@users.noreply.github.com> Date: Wed, 27 Mar 2024 11:59:40 +0100 Subject: [PATCH] feat: lazy loading switch option for the Enhanced Image Teaser component (#1591) Co-authored-by: Stefan Hauke --- .vscode/intershop.txt | 1 + docs/README.md | 1 + docs/guides/core-web-vitals.md | 25 +++++++++++++++++++ docs/guides/migrations.md | 5 +++- .../cms-image-enhanced.component.html | 2 +- .../cms-image-enhanced.component.ts | 8 ++++++ 6 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 docs/guides/core-web-vitals.md diff --git a/.vscode/intershop.txt b/.vscode/intershop.txt index 0d0a74678a..514ce69ab0 100644 --- a/.vscode/intershop.txt +++ b/.vscode/intershop.txt @@ -23,6 +23,7 @@ concardis concat condensedbold condensedregular +contentful costcenter costcenters creditcard diff --git a/docs/README.md b/docs/README.md index 46cabc8b0b..980a012a98 100644 --- a/docs/README.md +++ b/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 diff --git a/docs/guides/core-web-vitals.md b/docs/guides/core-web-vitals.md new file mode 100644 index 0000000000..a8c1036b07 --- /dev/null +++ b/docs/guides/core-web-vitals.md @@ -0,0 +1,25 @@ + + +# 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) diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md index fb9fddec2e..70fa49feb0 100644 --- a/docs/guides/migrations.md +++ b/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. diff --git a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html index 705a75bdaf..013f5b32c3 100644 --- a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html +++ b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html @@ -30,7 +30,7 @@ media="(max-width: 1199px)" />