From d967b0403414dd26d01ff5c1a16882a06462d1ad Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Sun, 23 Jun 2024 19:49:25 +0800
Subject: [PATCH] Lazy load buttons

---
 src/pages/links.njk | 94 ++++++++++++++++++++++-----------------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/pages/links.njk b/src/pages/links.njk
index 25d0d5d7..b2726dcc 100644
--- a/src/pages/links.njk
+++ b/src/pages/links.njk
@@ -17,87 +17,87 @@ eleventyNavigation:
     <ul class="web-btn-wrapper">
         <li>
             <a href="https://karuma.me/" title="10kph">
-                <img src="/assets/buttons/sites/10kph.png" alt="10kph">
+                <img src="/assets/buttons/sites/10kph.png" alt="10kph" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://www.autisticasfxxk.com/" title="Autistic As Fxxk">
-                <img src="/assets/buttons/sites/autisticasfxxk.gif" alt="Autistic As Fxxk">
+                <img src="/assets/buttons/sites/autisticasfxxk.gif" alt="Autistic As Fxxk" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://divergentrays.com/" title="Divergent Rays">
-                <img src="/assets/buttons/sites/divergentrays.png" alt="Divergent Rays">
+                <img src="/assets/buttons/sites/divergentrays.png" alt="Divergent Rays" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://cyberneticdryad.neocities.org/" title="Dryad Glen">
-                <img src="/assets/buttons/sites/dryadglen.png" alt="Dryad Glen">
+                <img src="/assets/buttons/sites/dryadglen.png" alt="Dryad Glen" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://frills.dev/" title="Frills">
-                <img src="/assets/buttons/sites/frills.png" alt="Frills">
+                <img src="/assets/buttons/sites/frills.png" alt="Frills" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://groundedwren.com/" title="Grounded Wren">
-                <img src="/assets/buttons/sites/groundedwren.png" alt="Grounded Wren">
+                <img src="/assets/buttons/sites/groundedwren.png" alt="Grounded Wren" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://jasm1nii.xyz/" title="jasmine's journal">
-                <img src="/assets/buttons/sites/jasminesjournal.png" alt="jasmine's journal">
+                <img src="/assets/buttons/sites/jasminesjournal.png" alt="jasmine's journal" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://jefbecker.com/" title="JEFBECKER">
-                <img src="/assets/buttons/sites/jefbecker.png" alt="JEFBECKER">
+                <img src="/assets/buttons/sites/jefbecker.png" alt="JEFBECKER" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://kalechips.net/" title="Kalechips">
-                <img src="/assets/buttons/sites/kalechips.png" alt="Kalechips">
+                <img src="/assets/buttons/sites/kalechips.png" alt="Kalechips" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://lostletters.neocities.org/" title="Lost Letters">
-                <img src="/assets/buttons/sites/lostletters.gif" alt="Lost Letters">
+                <img src="/assets/buttons/sites/lostletters.gif" alt="Lost Letters" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://owlsroost.xyz/" title="Owl's Roost">
-                <img src="/assets/buttons/sites/owlsroost.gif" alt="Owl's Roost">
+                <img src="/assets/buttons/sites/owlsroost.gif" alt="Owl's Roost" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://pinkvampyr.leprd.space/" title="Pinkvampyr">
-                <img src="/assets/buttons/sites/pinkvampyr.gif" alt="Pinkvampyr">
+                <img src="/assets/buttons/sites/pinkvampyr.gif" alt="Pinkvampyr" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://sanguineroyal.com/" title="Sanguine Royal">
-                <img src="/assets/buttons/sites/sanguineroyal.gif" alt="Sanguine Royal">
+                <img src="/assets/buttons/sites/sanguineroyal.gif" alt="Sanguine Royal" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://starbreaker.org/" title="🤘 starbreaker.org 🤘">
-                <img src="/assets/buttons/sites/starbreaker.avif" alt="🤘 starbreaker.org 🤘">
+                <img src="/assets/buttons/sites/starbreaker.avif" alt="🤘 starbreaker.org 🤘" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://symliadoo.com/" title="sym's living room 🍨">
-                <img src="/assets/buttons/sites/symliadoo.png" alt="sym's living room 🍨">
+                <img src="/assets/buttons/sites/symliadoo.png" alt="sym's living room 🍨" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://whiona.me/" title="Whiona">
-                <img src="/assets/buttons/sites/whiona.png" alt="Whiona">
+                <img src="/assets/buttons/sites/whiona.png" alt="Whiona" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://xandra.cc/" title="Museum of Alexandra">
-                <img src="/assets/buttons/sites/xandra.png" alt="Museum of Alexandra">
+                <img src="/assets/buttons/sites/xandra.png" alt="Museum of Alexandra" width="88" height="31" loading="lazy">
             </a>
         </li>
     </ul>
@@ -138,13 +138,13 @@ eleventyNavigation:
         <li>
             <div style="border: none; display: inline-flex">
                 <a href="https://isaacfish.neocities.org/webring/25.html">
-                    <img src="/assets/buttons/webrings/queercoded-left.png" alt="left arrow">
+                    <img src="/assets/buttons/webrings/queercoded-left.png" alt="left arrow" loading="lazy">
                 </a>&nbsp;
                 <a href="https://isaacfish.neocities.org/webring/">
-                    <img src="/assets/buttons/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring">
+                    <img src="/assets/buttons/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring" loading="lazy">
                 </a>&nbsp;
                 <a href="https://isaacfish.neocities.org/webring/27.html">
-                    <img src="/assets/buttons/webrings/queercoded-right.png" alt="right arrow">
+                    <img src="/assets/buttons/webrings/queercoded-right.png" alt="right arrow" loading="lazy">
                 </a>
             </div>
         </li>
@@ -157,32 +157,32 @@ eleventyNavigation:
     <ul class="web-btn-wrapper">
         <li>
             <a href="https://pinkvampyr.leprd.space/accessiblenet/" title="Accessibility Net Directory">
-                <img src="/assets/buttons/directories/accessiblenet.png" alt="Accessible Net Directory">
+                <img src="/assets/buttons/directories/accessiblenet.png" alt="Accessible Net Directory" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://indieseek.xyz/" title="Indieseek.xyz Indie Web Directory">
-                <img src="/assets/buttons/directories/indieseek.png" alt="Indieseek.xyz Indie Web Directory">
+                <img src="/assets/buttons/directories/indieseek.png" alt="Indieseek.xyz Indie Web Directory" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://linklane.net/" title="Link Lane">
-                <img src="/assets/buttons/directories/linklane.png" alt="Link Lane">
+                <img src="/assets/buttons/directories/linklane.png" alt="Link Lane" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://list-me.com/" title="List-Me.com">
-                <img src="/assets/buttons/directories/list-me.png" alt="List-Me.com">
+                <img src="/assets/buttons/directories/list-me.png" alt="List-Me.com" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://kalechips.net/responsive/" title="Responsive Web Directory">
-                <img src="/assets/buttons/directories/responsiveweb.png" alt="Responsive Web Directory">
+                <img src="/assets/buttons/directories/responsiveweb.png" alt="Responsive Web Directory" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://smoothsailing.asclaria.org/" title="Smooth Sailing Listings">
-                <img src="/assets/buttons/directories/smoothsailing.png" alt="Smooth Sailing Listings">
+                <img src="/assets/buttons/directories/smoothsailing.png" alt="Smooth Sailing Listings" width="88" height="31" loading="lazy">
             </a>
         </li>
     </ul>
@@ -191,12 +191,12 @@ eleventyNavigation:
     <ul class="web-btn-wrapper">
         <li>
             <a href="https://32bit.cafe/" title="32-Bit Cafe">
-                <img src="/assets/buttons/communities/32-bit-cafe.png" alt="32-Bit Cafe">
+                <img src="/assets/buttons/communities/32-bit-cafe.png" alt="32-Bit Cafe" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://zine.kalechips.net/index" title="Salad Magazine">
-                <img src="/assets/buttons/communities/saladmagazine.png" alt="Salad Magazine">
+                <img src="/assets/buttons/communities/saladmagazine.png" alt="Salad Magazine" width="88" height="31" loading="lazy">
             </a>
         </li>
     </ul>
@@ -205,37 +205,37 @@ eleventyNavigation:
     <ul class="web-btn-wrapper">
         <li>
             <a href="https://glitterskies.org/kotor/" title="Erased Identity - Star Wars: Knights of the Old Republic fanlisting">
-                <img src="/assets/buttons/fanlistings/kotor-100x50.png" alt="Star Wars: Knights of the Old Republic fanlisting">
+                <img src="/assets/buttons/fanlistings/kotor-100x50.png" alt="Star Wars: Knights of the Old Republic fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://glitterskies.org/kotor2/" title="Mysteries of Malachor - Star Wars: Knights of the Old Republic 2: The Sith Lords fanlisting">
-                <img src="/assets/buttons/fanlistings/kotor2-100x50.jpg" alt="Star Wars: Knights of the Old Republic 2 fanlisting">
+                <img src="/assets/buttons/fanlistings/kotor2-100x50.jpg" alt="Star Wars: Knights of the Old Republic 2 fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://bellatrix.slytherins.com/thrawn/" title="The Thrawn (Star Wars) Fanlisting">
-                <img src="/assets/buttons/fanlistings/thrawn-100x50.png" alt="Thrawn (Star Wars) fanlisting">
+                <img src="/assets/buttons/fanlistings/thrawn-100x50.png" alt="Thrawn (Star Wars) fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://inspirationally.net/jedi/" title="Keepers of the Peace // the Star Wars: [+] Jedi fanlisting">
-                <img src="/assets/buttons/fanlistings/jedi-100x50.png" alt="Jedi (Star Wars) fanlisting">
+                <img src="/assets/buttons/fanlistings/jedi-100x50.png" alt="Jedi (Star Wars) fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://www.kiri-no-hana.net/mia/" title="Take the path of TRUST: the Mia Fey / Chihiro Ayasato (Ace Attorney) fanlisting ❤">
-                <img src="/assets/buttons/fanlistings/miafey-100x50.png" alt="Mia Fey (Ace Attorney) fanlisting">
+                <img src="/assets/buttons/fanlistings/miafey-100x50.png" alt="Mia Fey (Ace Attorney) fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://pkmn.redcrown.net/hoenn/" title="coexistence: Pokémon Ruby, Sapphire, Omega Ruby and Alpha Sapphire fanlisting">
-                <img src="/assets/buttons/fanlistings/pokemonhoenn-100x50.png" alt="Pokémon Ruby, Sapphire, Omega Ruby and Alpha Sapphire fanlisting">
+                <img src="/assets/buttons/fanlistings/pokemonhoenn-100x50.png" alt="Pokémon Ruby, Sapphire, Omega Ruby and Alpha Sapphire fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://theatregirl.net/vampire/" title="Bloodlust | the vampire fanlisting">
-                <img src="/assets/buttons/fanlistings/vampire-100x50.png" alt="Vampire fanlisting">
+                <img src="/assets/buttons/fanlistings/vampire-100x50.png" alt="Vampire fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
@@ -245,62 +245,62 @@ eleventyNavigation:
         </li>
         <li>
             <a href="https://in-blue-rain.org/reading/" title="Dreaming With Eyes Open // the Reading fanlisting">
-                <img src="/assets/buttons/fanlistings/reading-100x50.png" alt="Reading fanlisting">
+                <img src="/assets/buttons/fanlistings/reading-100x50.png" alt="Reading fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://silent.am/drawing/" title="creative process || drawing & painting fanlisting">
-                <img src="/assets/buttons/fanlistings/drawing-100x50.png" alt="Drawing fanlisting">
+                <img src="/assets/buttons/fanlistings/drawing-100x50.png" alt="Drawing fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://fan.wings.nu/crochet/" title="HOOKED! the fanlisting for crochet">
-                <img src="/assets/buttons/fanlistings/crochet-100x50.png" alt="Crochet fanlisting">
+                <img src="/assets/buttons/fanlistings/crochet-100x50.png" alt="Crochet fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://www.ladyrose.buruma.net/stuffedanimals/general/" title="My Best Friend!: The Approved Stuffed Animals Fanlist">
-                <img src="/assets/buttons/fanlistings/stuffedanimals-100x50.png" alt="Stuffed animals fanlisting">
+                <img src="/assets/buttons/fanlistings/stuffedanimals-100x50.png" alt="Stuffed animals fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://slytherins.com/fan/black/" title="#000000: Black colour fanlisting">
-                <img src="/assets/buttons/fanlistings/black-100x50.gif" alt="Black colour fanlisting">
+                <img src="/assets/buttons/fanlistings/black-100x50.gif" alt="Black colour fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://bloodkisses.com/purple/" title="Purple Passion + the Fanlisting for the color Purple!">
-                <img src="/assets/buttons/fanlistings/purple-100x50.jpg" alt="Purple colour fanlisting">
+                <img src="/assets/buttons/fanlistings/purple-100x50.jpg" alt="Purple colour fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://totallygirl.net/chocolate/" title="Divine / Chocolate Fanlisting">
-                <img src="/assets/buttons/fanlistings/chocolate-100x50.png" alt="Chocolate fanlisting">
+                <img src="/assets/buttons/fanlistings/chocolate-100x50.png" alt="Chocolate fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://cookies.i-heart-you.net/" title="Baked Treats || Cookies/Biscuits fanlisting">
-                <img src="/assets/buttons/fanlistings/cookies-100x50.gif" alt="Cookies/biscuits fanlisting">
+                <img src="/assets/buttons/fanlistings/cookies-100x50.gif" alt="Cookies/biscuits fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://thefanlists.com/demora/chinese/" title="Good Fortune - The Chinese Food fanlisting">
-                <img src="/assets/buttons/fanlistings/chinesefood-100x50.png" alt="Chinese food fanlisting">
+                <img src="/assets/buttons/fanlistings/chinesefood-100x50.png" alt="Chinese food fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://thewildrose.org/rice/" title="Oryza - Rice Fanlisting">
-                <img src="/assets/buttons/fanlistings/rice-100x50.jpg" alt="Rice fanlisting">
+                <img src="/assets/buttons/fanlistings/rice-100x50.jpg" alt="Rice fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://coffeegirl.altervista.org/coffee/" title="Cup of Joe - the fanlisting for Coffee">
-                <img src="/assets/buttons/fanlistings/coffee-100x50.png" alt="Coffee fanlisting">
+                <img src="/assets/buttons/fanlistings/coffee-100x50.png" alt="Coffee fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
         <li>
             <a href="https://moudoku.com/greentea/" title="refreshment ;  green tea fanlisting">
-                <img src="/assets/buttons/fanlistings/greentea-100x50.png" alt="Green tea fanlisting">
+                <img src="/assets/buttons/fanlistings/greentea-100x50.png" alt="Green tea fanlisting" width="88" height="31" loading="lazy">
             </a>
         </li>
     </ul>