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:
parent
e27ac018ed
commit
72384a3357
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue