Add some loading="lazy" to images

Particularly efficient on feed view and Sophie contest pages
c2corg · Mar 23, 2021 · 2ff7e94 · 2ff7e94
1 parent d66f319
commit 2ff7e94
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 18 deletions.
diff --git a/src/components/association-editor/AssociationImageLink.vue b/src/components/association-editor/AssociationImageLink.vue
@@ -1,7 +1,7 @@
 <template>
   <document-link :document="image" class="has-hover-background" target="_blank">
     <figure class="image is-96x96 association-image-link-child">
-      <img :src="getUrl(image)" :title="image.locales[0].title" />
+      <img :src="getUrl(image)" :title="image.locales[0].title" :alt="image.locales[0].title" loading="lazy" />
     </figure>
     <span class="association-image-link-child">
       {{ image.locales[0].title | max50chars }}

diff --git a/src/components/cards/FeedCard.vue b/src/components/cards/FeedCard.vue
@@ -7,6 +7,7 @@
           class="avatar"
           @error="useDefaultAvatarIcon = true"
           :src="$options.forumAvatarUrl + item.user.forum_username + '/36/1_1.png'"
+          loading="lazy"
         />
         <fa-icon v-else icon="user" class="is-size-3 has-text-grey" />
       </span>

diff --git a/src/components/gallery/Gallery.vue b/src/components/gallery/Gallery.vue
@@ -6,6 +6,7 @@
         :alt="image.locales[0].title"
         :title="image.locales[0].title"
         @click="$imageViewer.show(image)"
+        loading="lazy"
       />
     </swiper-slide>
   </swiper>

diff --git a/src/components/image-viewer/ImageViewer.vue b/src/components/image-viewer/ImageViewer.vue
@@ -140,7 +140,9 @@ export default {
             renderSlide(img) {
               return `<div class="swiper-slide image-viewer-slide" style="{left:${this.offset}px}">
                   <div class="swiper-zoom-container">
-                    <img data-src="${imageUrls.getBig(img)}" class="swiper-lazy" title="${img.locales[0].title}">
+                    <img data-src="${imageUrls.getBig(img)}" class="swiper-lazy" title="${
+                img.locales[0].title
+              }" loading="lazy">
                   </div>
                   <div class="swiper-lazy-preloader swiper-lazy-preloader-white"/>
                 </div>`;

diff --git a/src/components/yeti/SubPanelMethods.vue b/src/components/yeti/SubPanelMethods.vue
@@ -39,17 +39,17 @@
 
       <table class="yetiform-danger">
         <tr>
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level1" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level1" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - low</strong></td>
           <td v-translate>I must not use slopes > 40°</td>
         </tr>
         <tr>
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level2" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level2" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - moderate</strong></td>
           <td v-translate>I must not use slopes > 35°</td>
         </tr>
         <tr class="multiline">
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level3" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level3" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - considerable</strong></td>
           <td>
             <span v-translate>I must not use slopes > 30°</span>
@@ -58,7 +58,7 @@
           </td>
         </tr>
         <tr>
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level4" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level4" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - high to very high</strong></td>
           <td v-translate>I choose to cancel the outing</td>
         </tr>
@@ -96,7 +96,7 @@
 
       <table class="yetiform-danger">
         <tr class="multiline">
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level1" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level1" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - low</strong></td>
           <td>
             <span v-translate>Stay careful while skiing</span>
@@ -105,12 +105,12 @@
           </td>
         </tr>
         <tr>
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level2" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level2" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - moderate</strong></td>
           <td v-translate>I must not use slopes > 40°</td>
         </tr>
         <tr class="multiline">
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level3" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level3" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - considerable</strong></td>
           <td>
             <span v-translate>I must not use slopes > 35°</span>
@@ -119,7 +119,7 @@
           </td>
         </tr>
         <tr class="multiline">
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level4" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level4" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - high</strong></td>
           <td>
             <span v-translate>I must not use slopes > 30°</span>
@@ -128,7 +128,7 @@
           </td>
         </tr>
         <tr>
-          <td><img src="@/assets/img/yeti/levels-danger.svg#level4" /></td>
+          <td><img src="@/assets/img/yeti/levels-danger.svg#level4" loading="lazy" /></td>
           <td><strong v-translate>Danger rating - very high</strong></td>
           <td v-translate>I choose to cancel the outing</td>
         </tr>

diff --git a/src/views/Advertisement.vue b/src/views/Advertisement.vue
@@ -11,7 +11,7 @@
       <picture>
         <source srcset="@/assets/img/serac.webp" type="image/webp" />
         <source srcset="@/assets/img/serac.avif" type="image/avif" />
-        <img src="@/assets/img/serac.png" />
+        <img src="@/assets/img/serac.png" loading="lazy" />
       </picture>
     </router-link>
   </div>

diff --git a/src/views/document/utils/boxes/CommentsBox.vue b/src/views/document/utils/boxes/CommentsBox.vue
@@ -21,6 +21,7 @@
             <img
               :src="getAvatarUrl(post)"
               :style="'width:' + $options.forumAvatarSize + 'px;height:' + $options.forumAvatarSize + 'px'"
+              loading="lazy"
             />
           </div>
           <div class="column">

diff --git a/src/views/documents/utils/ImageCards.vue b/src/views/documents/utils/ImageCards.vue
@@ -7,7 +7,7 @@
       :title="$documentUtils.getDocumentTitle(document)"
       class="card-image"
     >
-      <img :src="getMediumImageUrl(document)" height="250" />
+      <img :src="getMediumImageUrl(document)" height="250" loading="lazy" />
     </document-link>
   </div>
 </template>

diff --git a/src/views/portals/SophiePictureContestView.vue b/src/views/portals/SophiePictureContestView.vue
@@ -23,7 +23,12 @@
           </div>
           <div class="has-text-centered">
             <document-link :document="{ ...winner.image, ...{ type: 'i' } }">
-              <img :src="getImageUrl(winner.image)" class="winner-image" />
+              <img
+                :src="getImageUrl(winner.image)"
+                :alt="$documentUtils.getDocumentTitle(winner.image)"
+                class="winner-image"
+                loading="lazy"
+              />
             </document-link>
           </div>
           <div class="has-text-centered">
@@ -54,7 +59,7 @@
           :title="$documentUtils.getDocumentTitle(image)"
           class="card-image"
         >
-          <img :src="getImageUrl(image)" />
+          <img :src="getImageUrl(image)" loading="lazy" :alt="$documentUtils.getDocumentTitle(image)" />
         </document-link>
       </div>
       <loading-notification v-else :promise="promise" />

diff --git a/src/views/portals/YetiView.vue b/src/views/portals/YetiView.vue
@@ -77,7 +77,7 @@
                   <picture>
                     <source srcset="@/assets/img/yeti/logo-ensg.webp" type="image/webp" />
                     <source srcset="@/assets/img/yeti/logo-ensg.avif" type="image/avif" />
-                    <img src="@/assets/img/yeti/logo-ensg.jpg" alt="Logo ENSG" width="120" />
+                    <img src="@/assets/img/yeti/logo-ensg.jpg" alt="Logo ENSG" width="120" loading="lazy" />
                   </picture>
                 </a>
               </div>
@@ -86,7 +86,12 @@
                   <picture>
                     <source srcset="@/assets/img/yeti/logo-fondation-petzl.webp" type="image/webp" />
                     <source srcset="@/assets/img/yeti/logo-fondation-petzl.avif" type="image/avif" />
-                    <img src="@/assets/img/yeti/logo-fondation-petzl.jpg" alt="Logo Fondation Petzl" width="90" />
+                    <img
+                      src="@/assets/img/yeti/logo-fondation-petzl.jpg"
+                      alt="Logo Fondation Petzl"
+                      width="90"
+                      loading="lazy"
+                    />
                   </picture>
                 </a>
               </div>

diff --git a/src/views/portals/utils/ForumWidget.vue b/src/views/portals/utils/ForumWidget.vue
@@ -11,7 +11,7 @@
         rel="noopener"
         :title="topic.last_poster_username"
       >
-        <img :src="getAvatarUrl(topic.last_poster_user)" :style="'width:' + imgSize + 'px'" />
+        <img :src="getAvatarUrl(topic.last_poster_user)" :style="'width:' + imgSize + 'px'" loading="lazy" />
         <span :class="{ 'is-ellipsed': !wide }">
           {{ topic.title }}
         </span>