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
This commit is contained in:
Igor Minar 2021-04-30 18:33:00 +03:00 committed by Misko Hevery
parent e27ac018ed
commit 72384a3357
1 changed files with 6 additions and 6 deletions

View File

@ -9,7 +9,7 @@
<!-- LOGO --> <!-- LOGO -->
<div class="hero-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> </div>
<!-- CONTAINER --> <!-- CONTAINER -->
@ -35,7 +35,7 @@
<div layout="row" layout-xs="column" class="home-row homepage-container"> <div layout="row" layout-xs="column" class="home-row homepage-container">
<div class="promo-img-container promo-1"> <div class="promo-img-container promo-1">
<div> <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>
</div> </div>
@ -61,7 +61,7 @@
<div class="promo-img-container promo-2"> <div class="promo-img-container promo-2">
<div> <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> </div>
</div> </div>
@ -70,7 +70,7 @@
<!-- Group 3 --> <!-- Group 3 -->
<div layout="row" layout-xs="column" class="home-row"> <div layout="row" layout-xs="column" class="home-row">
<div class="promo-img-container promo-3"> <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>
<div class="text-container"> <div class="text-container">
@ -95,7 +95,7 @@
<div class="promo-img-container promo-4"> <div class="promo-img-container promo-4">
<div> <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> </div>
</div> </div>
@ -104,7 +104,7 @@
<div layout="row" layout-xs="column" class="home-row"> <div layout="row" layout-xs="column" class="home-row">
<a href="start"> <a href="start">
<div class="card"> <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="card-text-container">
<div class="text-headline">Try it now</div> <div class="text-headline">Try it now</div>
<p>Explore Angular's capabilities with a ready-made sample app. No setup required.</p> <p>Explore Angular's capabilities with a ready-made sample app. No setup required.</p>