fix: add lazy loading attribute to images in templates for improved p…

…erformance
bunkerity · Feb 13, 2025 · 3e7ac54 · 3e7ac54
1 parent ffdefa3
commit 3e7ac54
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 10 deletions.
diff --git a/src/ui/app/static/js/pages/bans.js b/src/ui/app/static/js/pages/bans.js
@@ -273,11 +273,11 @@ $(document).ready(function () {
   // Assuming baseFlagsUrl, dataCountries, and countriesDataNames are defined
   const countriesSearchPanesOptions = [
     {
-      label: `<img src="${baseFlagsUrl}/zz.svg" class="border border-1 p-0 me-1" height="17" />&nbsp;－&nbsp;N/A`,
+      label: `<img src="${baseFlagsUrl}/zz.svg" class="border border-1 p-0 me-1" height="17" loading="lazy" />&nbsp;－&nbsp;N/A`,
       value: (rowData) => rowData[4].includes("N/A"),
     },
     ...Object.entries(filteredCountriesDataNames).map(([code, name]) => ({
-      label: `<img src="${baseFlagsUrl}/${code.toLowerCase()}.svg" class="border border-1 p-0 me-1" height="17" />&nbsp;－&nbsp;${name}`,
+      label: `<img src="${baseFlagsUrl}/${code.toLowerCase()}.svg" class="border border-1 p-0 me-1" height="17" loading="lazy" />&nbsp;－&nbsp;${name}`,
       value: (rowData) =>
         rowData[4].includes(`data-bs-original-title="${code}"`),
     })),

diff --git a/src/ui/app/static/js/pages/reports.js b/src/ui/app/static/js/pages/reports.js
@@ -425,7 +425,8 @@ $(document).ready(function () {
                   countryCode === "local" ? "zz" : countryCode
                 }.svg"
                      class="border border-1 p-0 me-1"
-                     height="17" />
+                     height="17"
+                     loading="lazy" />
                 &nbsp;－&nbsp;${countryCode === "local" ? "N/A" : data}
               </span>`;
           },

diff --git a/src/ui/app/static/js/utils.js b/src/ui/app/static/js/utils.js
@@ -143,6 +143,7 @@ class News {
           class: "card-img card-img-left",
           src: img,
           alt: "News image",
+          loading: "lazy",
         }),
       );
       imgCol.append(imgLink);
@@ -213,6 +214,7 @@ class News {
           class: "card-img-top",
           src: img,
           alt: "News image",
+          loading: "lazy",
         }),
       );
 

diff --git a/src/ui/app/templates/bans.html b/src/ui/app/templates/bans.html
@@ -69,7 +69,8 @@
                                  data-bs-original-title="{% if ban.get('country', 'local') in ("local", "unknown") %}N/A{% else %}{{ ban.get('country', 'local') }}{% endif %}">
                                 <img src="{{ base_flags_url }}/{% if ban.get('country', 'local') in ("local", "unknown") %}zz{% else %}{{ ban.get('country', 'local') |lower }}{% endif %}.svg"
                                      class="border border-1 p-0 me-1"
-                                     height="17" />
+                                     height="17"
+                                     loading="lazy" />
                                 &nbsp;－&nbsp;
                                 {% if ban.get('country', 'local') in ("local", "unknown") %}
                                     N/A

diff --git a/src/ui/app/templates/models/plugins_settings.html b/src/ui/app/templates/models/plugins_settings.html
@@ -142,7 +142,8 @@ <h5 class="card-title d-flex align-items-center don-jose{{ plugin_types[plugin_d
                             {{ plugin_data["name"] }}&nbsp;－&nbsp;v{{ plugin_data["version"] }}&nbsp;－&nbsp;{{ plugin_types[plugin_data["type"]].get('icon', '<img src="' + pro_diamond_url + '"
      alt="Pro plugin"
      width="18px"
-     height="15.5px">') |safe }}
+     height="15.5px"
+     loading="lazy">') |safe }}
                         </h5>
                         <p class="card-subtitle text-muted text-truncate mt-1 courier-prime">{{ plugin_data["description"] }}</p>
                     </div>

diff --git a/src/ui/app/templates/models/plugins_settings_easy.html b/src/ui/app/templates/models/plugins_settings_easy.html
@@ -94,7 +94,8 @@ <h5 class="card-title d-flex align-items-center don-jose{{ plugin_types[template
                         {{ template|capitalize }}&nbsp;－&nbsp;{{ plugin_types[template_plugin["type"]].get('icon', '<img src="' + pro_diamond_url + '"
      alt="Pro plugin"
      width="18px"
-     height="15.5px">') |safe }}
+     height="15.5px"
+     loading="lazy">') |safe }}
                     </h5>
                     <p class="card-subtitle text-muted text-truncate mt-1 courier-prime">{{ template_data["name"] }}</p>
                 </div>

diff --git a/src/ui/app/templates/setup.html b/src/ui/app/templates/setup.html
@@ -1106,9 +1106,8 @@ <h5 class="mb-3 text-primary">Join the Newsletter</h5>
                                           method="POST">
                                         <div class="form-check mb-3">
                                             <input id="newsletter-email" type="hidden" name="EMAIL" required />
-                                            <input
-                                            id="setup-subscribe-newsletter"
-                                            type="checkbox"
+                                            <input id="setup-subscribe-newsletter"
+                                                   type="checkbox"
                                                    class="form-check-input"
                                                    name="newsletter-check"
                                                    required />

diff --git a/src/ui/app/templates/sidebar-notifications.html b/src/ui/app/templates/sidebar-notifications.html
@@ -37,7 +37,8 @@
                      class="x-logo"
                      alt="X logo"
                      width="20px"
-                     height="20px">
+                     height="20px"
+                     loading="lazy" />
             </a>
         </div>
         <button type="button"