Lazy load images below the fold

Author: jackdomleo7

index.html

@@ -137,7 +137,7 @@ <h3>
           </a>
         </h3>
         <h4>CDN</h4>
-        <img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/checka11y-css?label=jsDelivr%20hits&logo=jsdelivr&style=social">
+        <img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/checka11y-css?label=jsDelivr%20hits&logo=jsdelivr&style=social" loading="lazy">
         <p>In the below CDN links:</p>
         <ul>
           <li>Replace <code class="code">:version</code> with a version <a href="https://www.npmjs.com/package/checka11y-css?activeTab=versions" rel="nofollow" target="_blank" class="link">listed here</a> (latest version is always recommended). If you always want to get the latest stylesheet, remove <code class="code">@:version</code> completely (Not recommended).</li>
@@ -151,7 +151,7 @@ <h4>CDN</h4>
         </div>
         <h4>Package manager (npm or yarn)</h4>
         <a href="https://www.npmjs.com/package/checka11y-css" rel="nofollow" target="_blank" class="link">
-          <img alt="npm downloads" src="https://img.shields.io/npm/dt/checka11y-css?logo=npm&style=social">
+          <img alt="npm downloads" src="https://img.shields.io/npm/dt/checka11y-css?logo=npm&style=social" loading="lazy">
           <span class="sr-only">npm downloads</span>
         </a>
         <div class="example example--stack">
@@ -265,7 +265,7 @@ <h3>
     </main>
     <footer class="footer">
       <div class="center">
-        <img src="/img/footer-icon.png" alt="Checka11y.css icon" />
+        <img src="/img/footer-icon.png" alt="Checka11y.css icon" loading="lazy" />
         <span id="copyright">&copy; Checka11y.css</span>
       </div>
       <p>Made with <span aria-label="love">❤</span> by <a href="https://jackdomleo.dev" rel="nofollow noopener" class="link">Jack Domleo</a>.</p>