From 72384a335710087dbb24957c5442b578b2cc6f6d Mon Sep 17 00:00:00 2001
From: Igor Minar <igor@angular.io>
Date: Fri, 30 Apr 2021 18:33:00 +0300
Subject: [PATCH] fix(docs-infra): switch over to img[loading=lazy] for front
 page images (#34900)

This should speed up the perceived loading latency as the image loading won't block rendering.

https://addyosmani.com/blog/lazy-loading/

PR Close #34900
---
 aio/content/marketing/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html
index 0ff3588a6e..e907ab7acf 100755
--- a/aio/content/marketing/index.html
+++ b/aio/content/marketing/index.html
@@ -9,7 +9,7 @@
 
     <!-- LOGO -->
     <div class="hero-logo">
-      <img src="assets/images/logos/angular/angular.svg" alt="Angular"/>
+      <img src="assets/images/logos/angular/angular.svg" alt="Angular">
     </div>
 
     <!-- CONTAINER -->
@@ -35,7 +35,7 @@
     <div layout="row" layout-xs="column" class="home-row homepage-container">
       <div class="promo-img-container promo-1">
         <div>
-          <img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="responsive framework">
+          <img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="responsive framework" loading="lazy">
         </div>
       </div>
 
@@ -61,7 +61,7 @@
 
       <div class="promo-img-container promo-2">
         <div>
-          <img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="speed and performance">
+          <img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="speed and performance" loading="lazy">
         </div>
       </div>
     </div>
@@ -70,7 +70,7 @@
     <!-- Group 3 -->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="promo-img-container promo-3">
-        <div><img src="generated/images/marketing/home/joyful-development.svg" alt="IDE example"></div>
+        <div><img src="generated/images/marketing/home/joyful-development.svg" alt="IDE example" loading="lazy"></div>
       </div>
 
       <div class="text-container">
@@ -95,7 +95,7 @@
 
       <div class="promo-img-container promo-4">
         <div>
-          <img src="generated/images/marketing/home/loved-by-millions.svg" alt="angular on the map" width="455" height="228">
+          <img src="generated/images/marketing/home/loved-by-millions.svg" alt="angular on the map" width="455" height="228" loading="lazy">
         </div>
       </div>
     </div>
@@ -104,7 +104,7 @@
     <div layout="row" layout-xs="column" class="home-row">
       <a href="start">
         <div class="card">
-          <img src="generated/images/marketing/home/code-icon.svg" alt="Get Started with Angular" width="70" height="70">
+          <img src="generated/images/marketing/home/code-icon.svg" alt="Get Started with Angular" width="70" height="70" loading="lazy">
           <div class="card-text-container">
             <div class="text-headline">Try it now</div>
             <p>Explore Angular's capabilities with a ready-made sample app. No setup required.</p>