From 1f35a6d7096b54539eee180be52f8c3a66c407c6 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Tue, 22 Sep 2026 10:02:53 -0300
Subject: [PATCH] feat(store-header): add fetchpriority and loading attributes
 to images for performance optimization

---
 src/app/app.spec.ts                           | 11 +++++-
 src/app/app.ts                                |  1 +
 .../immersive-store-header.component.html     | 24 ++++++++++---
 .../immersive-store-header.component.scss     | 16 +++++++--
 .../standard-store-header.component.html      |  9 ++++-
 .../store-layout.component.spec.ts            | 35 ++++++++++++++-----
 .../continuous-image-carousel.component.html  |  2 ++
 7 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts
index ce72eea..1b15138 100644
--- a/src/app/app.spec.ts
+++ b/src/app/app.spec.ts
@@ -90,6 +90,11 @@ describe('App', () => {
     expect(
       document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]')?.getAttribute('href'),
     ).toBe(tenant.favicon);
+    expect(
+      document.head
+        .querySelector<HTMLLinkElement>('link[rel~="icon"]')
+        ?.getAttribute('fetchpriority'),
+    ).toBe('high');
   });
 
   it('renders the tenant not found screen when the tenant is missing', async () => {
@@ -114,6 +119,10 @@ describe('App', () => {
     expect(
       document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]')?.getAttribute('href'),
     ).toBe("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
+    expect(
+      document.head
+        .querySelector<HTMLLinkElement>('link[rel~="icon"]')
+        ?.getAttribute('fetchpriority'),
+    ).toBe('high');
   });
-
 });
diff --git a/src/app/app.ts b/src/app/app.ts
index 268c29d..fcb49a6 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -78,6 +78,7 @@ export class App {
       }
 
       favicon.setAttribute('href', faviconHref);
+      favicon.setAttribute('fetchpriority', 'high');
     });
   }
 
diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
index f76de46..3904be6 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
@@ -1,8 +1,16 @@
 <header class="immersive-header" [class.immersive-header--compact]="!showHero()">
-  <div
-    class="immersive-header__backdrop"
-    [style.background-image]="backgroundImageUrl() ? 'url(' + backgroundImageUrl() + ')' : null"
-  ></div>
+  <div class="immersive-header__backdrop">
+    @if (showHero() && backgroundImageUrl(); as backgroundImage) {
+      <img
+        class="immersive-header__backdrop-image"
+        [src]="backgroundImage"
+        alt=""
+        loading="eager"
+        fetchpriority="high"
+        decoding="async"
+      />
+    }
+  </div>
 
   <div class="immersive-header__content">
     <nav
@@ -11,7 +19,13 @@
     >
       <a routerLink="/" class="immersive-header__brand" aria-label="Ir al inicio">
         @if (logoUrl()) {
-          <img [src]="logoUrl()" alt="Logo del comercio" />
+          <img
+            [src]="logoUrl()"
+            alt="Logo del comercio"
+            loading="eager"
+            fetchpriority="high"
+            decoding="async"
+          />
         }
       </a>
 
diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
index d3665c2..d053234 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
@@ -25,9 +25,19 @@
   grid-area: 1 / 1;
   position: relative;
   z-index: 0;
+  overflow: hidden;
   background-color: #101010;
-  background-position: center 42%;
-  background-size: cover;
+}
+
+.immersive-header__backdrop-image {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 42%;
 }
 
 .immersive-header__backdrop::before,
@@ -35,6 +45,8 @@
   content: '';
   position: absolute;
   inset: 0;
+  z-index: 1;
+  pointer-events: none;
 }
 
 .immersive-header__backdrop::before {
diff --git a/src/app/core/layout/store-layout/store-header/standard-store-header.component.html b/src/app/core/layout/store-layout/store-header/standard-store-header.component.html
index b8a3115..defc5b2 100644
--- a/src/app/core/layout/store-layout/store-header/standard-store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/standard-store-header.component.html
@@ -13,7 +13,14 @@
             aria-label="Logo del comercio"
           >
             @if (logoUrl()) {
-              <img class="store-layout__brand-logo" [src]="logoUrl()" alt="Logo del comercio" />
+              <img
+                class="store-layout__brand-logo"
+                [src]="logoUrl()"
+                alt="Logo del comercio"
+                loading="eager"
+                fetchpriority="high"
+                decoding="async"
+              />
             } @else {
               <div class="store-layout__brand-logo-shell" aria-hidden="true">
                 <span class="store-layout__brand-logo-skeleton"></span>
diff --git a/src/app/core/layout/store-layout/store-layout.component.spec.ts b/src/app/core/layout/store-layout/store-layout.component.spec.ts
index 615a597..3598bdb 100644
--- a/src/app/core/layout/store-layout/store-layout.component.spec.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts
@@ -281,10 +281,27 @@ describe('StoreLayoutComponent', () => {
     expect(element.querySelector('.immersive-header__description')?.textContent).toContain(
       'Reservá tu entrada',
     );
-    expect(element.querySelectorAll('.continuous-carousel__set')).toHaveLength(2);
-    expect(element.querySelector('.continuous-carousel__image')?.getAttribute('src')).toBe(
-      '/first.jpg',
+    const backdropImage = element.querySelector<HTMLImageElement>(
+      '.immersive-header__backdrop-image',
     );
+    expect(backdropImage?.getAttribute('src')).toBe(tenant.header_bg_image);
+    expect(backdropImage?.getAttribute('loading')).toBe('eager');
+    expect(backdropImage?.getAttribute('fetchpriority')).toBe('high');
+    expect(backdropImage?.getAttribute('decoding')).toBe('async');
+    const headerLogo = element.querySelector<HTMLImageElement>('.immersive-header__brand img');
+    expect(headerLogo?.getAttribute('loading')).toBe('eager');
+    expect(headerLogo?.getAttribute('fetchpriority')).toBe('high');
+    expect(headerLogo?.getAttribute('decoding')).toBe('async');
+    expect(element.querySelectorAll('.continuous-carousel__set')).toHaveLength(2);
+    const carouselImages = element.querySelectorAll<HTMLImageElement>(
+      '.continuous-carousel__image',
+    );
+    expect(carouselImages[0]?.getAttribute('src')).toBe('/first.jpg');
+    expect(carouselImages[0]?.getAttribute('loading')).toBe('eager');
+    expect(carouselImages[0]?.getAttribute('fetchpriority')).toBe('low');
+    expect(carouselImages[1]?.getAttribute('fetchpriority')).toBe('low');
+    expect(carouselImages[5]?.getAttribute('loading')).toBe('lazy');
+    expect(carouselImages[5]?.getAttribute('fetchpriority')).toBe('low');
     expect(element.querySelector('app-cart-icon')).not.toBeNull();
   });
 
@@ -487,11 +504,13 @@ describe('StoreLayoutComponent', () => {
 
     expect(compiled.querySelector('[data-testid="store-header-brand-slot"]')).not.toBeNull();
     expect(compiled.querySelector('[data-testid="store-footer-brand-slot"]')).not.toBeNull();
-    expect(
-      compiled.querySelector(
-        `app-store-header img.store-layout__brand-logo[src="${tenant.header_logo}"]`,
-      ),
-    ).not.toBeNull();
+    const headerLogo = compiled.querySelector<HTMLImageElement>(
+      `app-store-header img.store-layout__brand-logo[src="${tenant.header_logo}"]`,
+    );
+    expect(headerLogo).not.toBeNull();
+    expect(headerLogo?.getAttribute('loading')).toBe('eager');
+    expect(headerLogo?.getAttribute('fetchpriority')).toBe('high');
+    expect(headerLogo?.getAttribute('decoding')).toBe('async');
     expect(
       compiled.querySelector(
         `app-store-footer img.store-layout__brand-logo[src="${tenant.footer_logo}"]`,
diff --git a/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.html b/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.html
index cb477b6..9806bdd 100644
--- a/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.html
+++ b/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.html
@@ -9,6 +9,8 @@
               [src]="image"
               alt=""
               [loading]="set === 0 && $index < 5 ? 'eager' : 'lazy'"
+              fetchpriority="low"
+              decoding="async"
             />
           }
         </div>