diff --git a/package-lock.json b/package-lock.json
index 8a2a27097f..36646b92bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,6 @@
         "@ngx-translate/http-loader": "^7.0.0",
         "@rx-angular/state": "1.6.0",
         "@sentry/browser": "^6.19.2",
-        "@trademe/ng-defer-load": "^8.2.1",
         "angular-oauth2-oidc": "13.0.1",
         "angular2-uuid": "^1.1.1",
         "angulartics2": "^12.0.0",
@@ -6370,26 +6369,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@trademe/ng-defer-load": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/@trademe/ng-defer-load/-/ng-defer-load-8.2.1.tgz",
-      "integrity": "sha512-AvbG+dXCOssT/FE+iokpvcr+VFgLVLfVGM1BhFpmXwffaGmw/B2AUke/r5OuIPD1IWwQA2flTnZOKc+jOYXDRg==",
-      "dependencies": {
-        "tslib": "^1.9.0"
-      },
-      "peerDependencies": {
-        "@angular/common": ">=8.0.0",
-        "@angular/core": ">=8.0.0",
-        "@angular/platform-browser": ">=8.0.0",
-        "rxjs": "^6.4.0",
-        "zone.js": ">=0.9.1"
-      }
-    },
-    "node_modules/@trademe/ng-defer-load/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/@ts-morph/common": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.13.0.tgz",
@@ -33187,21 +33166,6 @@
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A=="
     },
-    "@trademe/ng-defer-load": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/@trademe/ng-defer-load/-/ng-defer-load-8.2.1.tgz",
-      "integrity": "sha512-AvbG+dXCOssT/FE+iokpvcr+VFgLVLfVGM1BhFpmXwffaGmw/B2AUke/r5OuIPD1IWwQA2flTnZOKc+jOYXDRg==",
-      "requires": {
-        "tslib": "^1.9.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
     "@ts-morph/common": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.13.0.tgz",
diff --git a/package.json b/package.json
index c01f22b78d..20b97faee2 100644
--- a/package.json
+++ b/package.json
@@ -86,13 +86,12 @@
     "@ngx-translate/http-loader": "^7.0.0",
     "@rx-angular/state": "1.6.0",
     "@sentry/browser": "^6.19.2",
-    "@trademe/ng-defer-load": "^8.2.1",
     "angular-oauth2-oidc": "13.0.1",
     "angular2-uuid": "^1.1.1",
     "angulartics2": "^12.0.0",
     "bootstrap": "^4.6.1",
-    "express": "^4.17.3",
     "date-fns": "^2.28.0",
+    "express": "^4.17.3",
     "express-http-proxy": "^1.6.3",
     "express-robots-txt": "1.0.0",
     "file-replace-loader": "^1.4.0",
diff --git a/src/app/pages/category/category-image/category-image.component.html b/src/app/pages/category/category-image/category-image.component.html
index e2a5eea541..c0499f1cd1 100644
--- a/src/app/pages/category/category-image/category-image.component.html
+++ b/src/app/pages/category/category-image/category-image.component.html
@@ -1,3 +1,3 @@
-<div (deferLoad)="showImage = true" class="defer-load">
-  <img *ngIf="showImage" [src]="categoryImageUrl" itemprop="image" />
+<div>
+  <img loading="lazy" [src]="categoryImageUrl" itemprop="image" />
 </div>
diff --git a/src/app/pages/category/category-image/category-image.component.spec.ts b/src/app/pages/category/category-image/category-image.component.spec.ts
index 57d6c25253..4d53c4506a 100644
--- a/src/app/pages/category/category-image/category-image.component.spec.ts
+++ b/src/app/pages/category/category-image/category-image.component.spec.ts
@@ -9,12 +9,6 @@ describe('Category Image Component', () => {
   let element: HTMLElement;
   let fixture: ComponentFixture<CategoryImageComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [CategoryImageComponent],
-    }).compileComponents();
-  });
-
   beforeEach(() => {
     fixture = TestBed.createComponent(CategoryImageComponent);
     component = fixture.componentInstance;
@@ -31,7 +25,6 @@ describe('Category Image Component', () => {
       ],
     } as Category;
     component.category = category;
-    component.showImage = true;
     component.ngOnChanges();
     fixture.detectChanges();
   });
diff --git a/src/app/pages/category/category-image/category-image.component.ts b/src/app/pages/category/category-image/category-image.component.ts
index 04518c83db..b0adbf86b0 100644
--- a/src/app/pages/category/category-image/category-image.component.ts
+++ b/src/app/pages/category/category-image/category-image.component.ts
@@ -18,11 +18,6 @@ export class CategoryImageComponent implements OnChanges {
 
   categoryImageUrl = '/assets/img/not_available.png';
 
-  /**
-   * deferred loading flag
-   */
-  showImage = false;
-
   ngOnChanges() {
     this.setCategoryImageUrl();
   }
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 0f63b228cf..8d479dda5a 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
@@ -12,12 +12,8 @@
 </ng-container>
 
 <ng-template #imageEnhanced>
-  <div
-    (deferLoad)="showImage = true"
-    class="enhanced-image-container defer-load"
-    [ngClass]="pagelet.stringParam('CSSClass')"
-  >
-    <picture *ngIf="showImage" class="enhanced-image">
+  <div class="enhanced-image-container" [ngClass]="pagelet.stringParam('CSSClass')">
+    <picture class="enhanced-image">
       <source
         *ngIf="pagelet.hasParam('ImageXS')"
         [srcset]="pagelet.stringParam('ImageXS')"
@@ -34,6 +30,7 @@
         media="(max-width: 1199px)"
       />
       <img
+        loading="lazy"
         [src]="pagelet.stringParam('Image')"
         [attr.alt]="pagelet.stringParam('AlternateText')"
         class="enhanced-image"
diff --git a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts
index 15b8c26ca8..864f8bb35c 100644
--- a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts
+++ b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts
@@ -14,9 +14,4 @@ export class CMSImageEnhancedComponent implements CMSComponent {
 
   isRouterLink = ContentViewHelper.isRouterLink;
   routerLink = ContentViewHelper.getRouterLink;
-
-  /**
-   * deferred loading flag
-   */
-  showImage = false;
 }
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.html b/src/app/shared/cms/components/cms-image/cms-image.component.html
index 0c8a749a35..3645b6262b 100644
--- a/src/app/shared/cms/components/cms-image/cms-image.component.html
+++ b/src/app/shared/cms/components/cms-image/cms-image.component.html
@@ -12,7 +12,7 @@
 </ng-container>
 
 <ng-template #image>
-  <div (deferLoad)="showImage = true" class="defer-load" [ngClass]="pagelet.stringParam('CSSClass')">
-    <img *ngIf="showImage" [src]="pagelet.stringParam('Image')" [attr.alt]="pagelet.stringParam('AlternateText')" />
+  <div [ngClass]="pagelet.stringParam('CSSClass')">
+    <img loading="lazy" [src]="pagelet.stringParam('Image')" [attr.alt]="pagelet.stringParam('AlternateText')" />
   </div>
 </ng-template>
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts b/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
index 4874cfeabe..0c66852bdc 100644
--- a/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
+++ b/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
@@ -33,7 +33,6 @@ describe('Cms Image Component', () => {
       },
     };
     component.pagelet = createContentPageletView(pagelet);
-    component.showImage = true;
   });
 
   it('should be created', () => {
@@ -42,8 +41,8 @@ describe('Cms Image Component', () => {
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element).toMatchInlineSnapshot(`
       <a class="teaser-link" href="http://example.com" title="bar"
-        ><div class="defer-load foo" ng-reflect-ng-class="foo">
-          <img src="http://example.com/foo/bar.png" alt="foo" /></div
+        ><div ng-reflect-ng-class="foo" class="foo">
+          <img loading="lazy" src="http://example.com/foo/bar.png" alt="foo" /></div
       ></a>
     `);
   });
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.ts b/src/app/shared/cms/components/cms-image/cms-image.component.ts
index 7bdde3a3ec..4fa30bdd51 100644
--- a/src/app/shared/cms/components/cms-image/cms-image.component.ts
+++ b/src/app/shared/cms/components/cms-image/cms-image.component.ts
@@ -14,9 +14,4 @@ export class CMSImageComponent implements CMSComponent {
 
   isRouterLink = ContentViewHelper.isRouterLink;
   routerLink = ContentViewHelper.getRouterLink;
-
-  /**
-   * deferred loading flag
-   */
-  showImage = false;
 }
diff --git a/src/app/shared/cms/components/cms-video/cms-video.component.html b/src/app/shared/cms/components/cms-video/cms-video.component.html
index 889af60c8a..b21901abf9 100644
--- a/src/app/shared/cms/components/cms-video/cms-video.component.html
+++ b/src/app/shared/cms/components/cms-video/cms-video.component.html
@@ -1,20 +1,18 @@
 <div
   *ngIf="pagelet.hasParam('Video')"
-  (deferLoad)="showVideo = true"
-  class="video-container defer-load"
+  class="video-container"
   [ngClass]="pagelet.stringParam('CSSClass')"
   [ngStyle]="{ 'width.px': videoWidth, 'height.px': videoHeight }"
 >
   <ng-container *ngIf="iframeVideoUrl; else nativeVideo">
-    <div *ngIf="showVideo" class="video-wrapper">
+    <div class="video-wrapper">
       <!-- spell-checker: words allowfullscreen -->
-      <iframe [src]="iframeVideoUrl" frameborder="0" allowfullscreen></iframe>
+      <iframe loading="lazy" [src]="iframeVideoUrl" frameborder="0" allowfullscreen></iframe>
     </div>
   </ng-container>
 
   <ng-template #nativeVideo>
     <video
-      *ngIf="showVideo"
       #videoPlayer
       [src]="nativeVideoUrl"
       class="video"
diff --git a/src/app/shared/cms/components/cms-video/cms-video.component.ts b/src/app/shared/cms/components/cms-video/cms-video.component.ts
index 1627113856..d11e99b7c3 100644
--- a/src/app/shared/cms/components/cms-video/cms-video.component.ts
+++ b/src/app/shared/cms/components/cms-video/cms-video.component.ts
@@ -30,11 +30,6 @@ export class CMSVideoComponent implements CMSComponent, OnInit {
 
   constructor(private sanitizer: DomSanitizer) {}
 
-  /**
-   * deferred loading flag
-   */
-  showVideo = false;
-
   ngOnInit() {
     this.video = this.pagelet.stringParam('Video');
     this.autoplay = this.pagelet.booleanParam('Autoplay');
diff --git a/src/app/shared/components/product/product-image/product-image.component.html b/src/app/shared/components/product/product-image/product-image.component.html
index 3c84fb2a9a..138e0b57e6 100644
--- a/src/app/shared/components/product/product-image/product-image.component.html
+++ b/src/app/shared/components/product/product-image/product-image.component.html
@@ -1,4 +1,4 @@
-<div (deferLoad)="showImage$.next()" class="defer-load">
+<div>
   <a
     *ngIf="link; else image"
     data-testing-id="product-image-link"
@@ -10,6 +10,7 @@
 
 <ng-template #image>
   <img
+    loading="lazy"
     *ngIf="{ image: productImage$ | async } as product"
     class="product-image"
     [src]="product.image?.effectiveUrl || '/assets/img/not_available.png'"
diff --git a/src/app/shared/components/product/product-image/product-image.component.spec.ts b/src/app/shared/components/product/product-image/product-image.component.spec.ts
index 69880a44af..efb2fe37e4 100644
--- a/src/app/shared/components/product/product-image/product-image.component.spec.ts
+++ b/src/app/shared/components/product/product-image/product-image.component.spec.ts
@@ -39,7 +39,6 @@ describe('Product Image Component', () => {
     translate.use('en');
     translate.set('product.image.text.alttext', 'product photo');
 
-    component.showImage$.next();
     component.imageType = 'S';
   });
 
@@ -58,6 +57,7 @@ describe('Product Image Component', () => {
         "alt": "product photo",
         "class": "product-image",
         "itemprop": "image",
+        "loading": "lazy",
         "src": "/assets/img/not_available.png",
       }
     `);
@@ -86,6 +86,7 @@ describe('Product Image Component', () => {
         "data-view": "front",
         "height": "110",
         "itemprop": "image",
+        "loading": "lazy",
         "src": "/assets/product_img/a.jpg",
         "width": "110",
       }
diff --git a/src/app/shared/components/product/product-image/product-image.component.ts b/src/app/shared/components/product/product-image/product-image.component.ts
index 7ec178e681..45a79f5503 100644
--- a/src/app/shared/components/product/product-image/product-image.component.ts
+++ b/src/app/shared/components/product/product-image/product-image.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { QueryParamsHandling } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, ReplaySubject, combineLatest, of } from 'rxjs';
+import { Observable, combineLatest, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
@@ -44,19 +44,11 @@ export class ProductImageComponent implements OnInit {
   productImage$: Observable<Image>;
   defaultAltText$: Observable<string>;
 
-  /**
-   * deferred loading flag
-   */
-  showImage$ = new ReplaySubject<void>(1);
-
   constructor(private translateService: TranslateService, private context: ProductContextFacade) {}
 
   ngOnInit() {
     this.productURL$ = this.context.select('productURL');
-    this.productImage$ = combineLatest([
-      this.context.getProductImage$(this.imageType, this.imageView),
-      this.showImage$,
-    ]).pipe(map(([i]) => i));
+    this.productImage$ = this.context.getProductImage$(this.imageType, this.imageView);
 
     this.defaultAltText$ = combineLatest([
       this.context.select('product').pipe(map(product => product?.name || product?.sku || '')),
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index be06cebe7d..0248dbc768 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -11,7 +11,6 @@ import {
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
-import { DeferLoadModule } from '@trademe/ng-defer-load';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { SwiperModule } from 'swiper/angular';
 
@@ -145,7 +144,6 @@ const importExportModules = [
   CaptchaExportsModule,
   CdkTableModule,
   CommonModule,
-  DeferLoadModule,
   DirectivesModule,
   FeatureToggleModule,
   FormlyAddressFormsModule,
diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
index 663b3323cf..9b25dbf1b9 100644
--- a/src/styles/global/global.scss
+++ b/src/styles/global/global.scss
@@ -239,7 +239,3 @@ img.marketing {
     margin-bottom: 0;
   }
 }
-
-.defer-load {
-  min-height: 1px;
-}