Skip to content

Commit

Permalink
ui: add Lazy loading for images>1MB
Browse files Browse the repository at this point in the history
inital loading of hompage was loading around 12MB of resources.
By lazy loading images we can reduce the intial loading by 7-8 MB.

Partially Fixes: canonical#14443
  • Loading branch information
codewithnick committed Oct 24, 2024
1 parent 3aa78f2 commit c4aca41
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions templates/base_index.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ <h2 id="test-takeover-subtitle">Understanding real-time systems, their use cases
src="https://assets.ubuntu.com/v1/fb1ea84e-Kernelt%[email protected]"
width="508"
height="364"
loading="lazy"
alt="" />
</div>
</div>
Expand All @@ -72,7 +73,7 @@ <h1 id="takeover-title" class="u-no-margin--bottom">Ubuntu 24.04 LTS Noble Numba
</div>
</div>
<div class="col-6 u-vertically-center u-align--center u-hide--medium u-hide--small">
<img id="takeover-image" src="https://assets.ubuntu.com/v1/d9fc87f3-Numbat.svg" width="300" alt="" />
<img id="takeover-image" src="https://assets.ubuntu.com/v1/d9fc87f3-Numbat.svg" width="300" alt="" loading="lazy" />
</div>
</div>
</section>
Expand Down Expand Up @@ -751,7 +752,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Ultra secure things</h2>
<section class="p-section ">
<div class="u-fixed-width ">
<div class="u-align--center u-vertically-center u-no-padding--bottom p-image-container--cinematic">
<img src="https://assets.ubuntu.com/v1/bb296524-Dell%20pcs.jpg" alt="" />
<img src="https://assets.ubuntu.com/v1/bb296524-Dell%20pcs.jpg" alt="" loading="lazy"/>
</div>
<hr class="p-rule" />
<div class="p-section--shallow">
Expand Down Expand Up @@ -858,6 +859,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Workstations and desktops</h2>
<div class="u-fixed-width">
<div class="p-image-container--cinematic">
<img src="https://assets.ubuntu.com/v1/39667d98-Open%20source%20security.jpg"
loading="lazy"
alt="" />
</div>
<hr class="p-rule" />
Expand Down Expand Up @@ -964,6 +966,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Data centre automation</h2>
<div class="u-fixed-width">
<div class="p-image-container--cinematic">
<img src="https://assets.ubuntu.com/v1/465d1258-Smart%20robots%20of%20all%20shapes%20and%20sizes.jpg"
loading="lazy"
alt="" />
</div>
<hr class="p-rule" />
Expand Down Expand Up @@ -1055,7 +1058,9 @@ <h2 class="p-heading--1 u-no-margin--bottom">Smart robots of all shapes and size
<div class="u-vertically-center u-align--center p-image-container--cinematic"
style="background: rgba(0, 0, 0, 0.15)">
<img src="https://assets.ubuntu.com/v1/6d657910-Multi-cloud%20Applications%C2%A0%C2%A0Beyond%20PAAS.png"
alt="" />
alt=""
loading="lazy"
/>
</div>
<hr class="p-rule" />
<div class="p-section--shallow">
Expand Down

0 comments on commit c4aca41

Please sign in to comment.