Improve image loading

backontrackus · Dec 30, 2024 · 8c255b7 · 8c255b7
1 parent 92814a6
commit 8c255b7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/components/Socials.astro b/src/components/Socials.astro
@@ -3,12 +3,24 @@ import { Image } from "astro:assets";
 ---
 
 <div
-  class="h-1/12 bg-bot-orange fixed bottom-0 right-0 w-1/12 p-2 sm:h-auto sm:w-auto sm:p-5"
+  class="h-1/12 fixed bottom-0 right-0 w-1/12 bg-bot-orange p-2 sm:h-auto sm:w-auto sm:p-5"
 >
   <a href="https://www.linkedin.com/company/back-on-track-america/">
-    <Image src="/linkedin.svg" alt="LinkedIn Icon" width="40" height="40" />
+    <Image
+      src="/linkedin.svg"
+      alt="LinkedIn Icon"
+      width="40"
+      height="40"
+      loading="eager"
+    />
   </a>
   <a href="https://www.instagram.com/backontrackamerica/">
-    <Image src="/instagram.svg" alt="Instagram Icon" width="40" height="40" />
+    <Image
+      src="/instagram.svg"
+      alt="Instagram Icon"
+      width="40"
+      height="40"
+      loading="eager"
+    />
   </a>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -22,6 +22,7 @@ import BackOnTrackLayout from "../layouts/BackOnTrackLayout.astro";
     class="h-fit w-screen"
     width="5000"
     height="3000"
+    loading="eager"
   />
   <Image
     src="/partners.png"

diff --git a/src/pages/team.astro b/src/pages/team.astro
@@ -37,6 +37,7 @@ const records = await pb.collection("team").getFullList({
             class="w-full object-cover pb-1"
             width="400"
             height="300"
+            loading="eager"
           />
           <p class="text-2xl font-bold text-bot-blue">{record.name}</p>
           <p class="text-lg">{record.title}</p>
@@ -46,6 +47,7 @@ const records = await pb.collection("team").getFullList({
               alt="Location Icon"
               width="24"
               height="24"
+              loading="eager"
             />
             <p class="m-1 text-lg">{record.location}</p>
           </div>
@@ -62,6 +64,7 @@ const records = await pb.collection("team").getFullList({
                       alt="Instagram Icon"
                       width="40"
                       height="40"
+                      loading="eager"
                     />
                   </a>
                 );
@@ -76,6 +79,7 @@ const records = await pb.collection("team").getFullList({
                       alt="LinkedIn Icon"
                       width="40"
                       height="40"
+                      loading="eager"
                     />
                   </a>
                 );