Add `loading="lazy"` in images (#30199)

diff --git a/site/content/docs/4.3/about/brand.md b/site/content/docs/4.3/about/brand.md
index 91dda9ba4e2471bbf87307d7278a2b23e21e3b9c..e087f804bd6b40508ee55b5e7ccb330e713020fe 100644 (file)
--- a/site/content/docs/4.3/about/brand.md
+++ b/site/content/docs/4.3/about/brand.md
@@ -14,10 +14,10 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
 
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
   <div class="bd-brand-item">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
   <div class="bd-brand-item inverse">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
 </div>
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
@@ -35,13 +35,13 @@ Download the Bootstrap mark in one of three styles, each available as an SVG fil
 
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
   <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item" title="Download solid logo">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </a>
   <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item inverse" title="Download outlined logo">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </a>
   <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item inverse" title="Download inverted logo">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </a>
 </div>
 

diff --git a/site/content/docs/4.3/about/team.md b/site/content/docs/4.3/about/team.md
index ce4b00e953d0a96e14fedc377e5deb31c5b6bd44..fd1d6bfa6bd1567651bb17760cec969e9942dd65 100644 (file)
--- a/site/content/docs/4.3/about/team.md
+++ b/site/content/docs/4.3/about/team.md
@@ -11,7 +11,7 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
 <div class="list-group mb-3">
   {{- range (index $.Site.Data "core-team") }}
     <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/{{ .user }}">
-      <img src="https://github.com/{{ .user }}.png" alt="@{{ .user }}" width="32" height="32" class="rounded mr-2">
+      <img src="https://github.com/{{ .user }}.png" alt="@{{ .user }}" width="32" height="32" class="rounded mr-2" loading="lazy">
       <span>
         <strong>{{ .name }}</strong> @{{ .user }}
       </span>

diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md
index 18d0bbce1ca78fcd846b49d5aa684e70945c68f9..940510c9221ba4a48565725b52d77adab77c38af 100644 (file)
--- a/site/content/docs/4.3/components/navbar.md
+++ b/site/content/docs/4.3/components/navbar.md
@@ -105,7 +105,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 <nav class="navbar navbar-light bg-light">
   <div class="container">
     <a class="navbar-brand" href="#">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy">
     </a>
   </div>
 </nav>
@@ -116,7 +116,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 <nav class="navbar navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
       Bootstrap
     </a>
   </div>

diff --git a/site/content/docs/4.3/examples/_index.md b/site/content/docs/4.3/examples/_index.md
index e166a7bc0a5de31d8dd0a32e75da4b60070dd12e..7449d5c1906556cfadbfd49f9085c1165a0a4380 100644 (file)
--- a/site/content/docs/4.3/examples/_index.md
+++ b/site/content/docs/4.3/examples/_index.md
@@ -17,7 +17,10 @@ aliases: "/examples/"
         <a href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/">
           <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
                                                   /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
-                                          src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png" alt="{{ $example.name }} screenshot" width="480" height="300">
+                                          src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
+                                          alt="{{ $example.name }} screenshot"
+                                          width="480" height="300"
+                                          loading="lazy">
           <h5 class="mb-1">{{ $example.name }}</h5>
         </a>
         <p class="text-muted">{{ $example.description }}</p>

diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html
index 14b1f4915790b7aff185c6d99082875680335e51..4137466b49b0753eb818c85e5df87a5516788ae2 100644 (file)
--- a/site/layouts/partials/home/masthead-followup.html
+++ b/site/layouts/partials/home/masthead-followup.html
@@ -46,6 +46,9 @@
   <div class="mx-5 border-bottom">
     <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
                                                 /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
-                                        src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="500" height="200">
+                                        src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
+                                        alt="Bootstrap Themes"
+                                        width="500" height="200"
+                                        loading="lazy">
   </div>
 </div>