From 52ff12b8cec080dd4ecc9cb9286357745f7e7893 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 20 Oct 2024 20:37:38 +0100
Subject: [PATCH] perf: use image lazy loading

---
 components/AppHero.vue      | 2 +-
 components/NuxtDropdown.vue | 1 +
 components/StarterCard.vue  | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/AppHero.vue b/components/AppHero.vue
index 45d22c2..efa6c9c 100644
--- a/components/AppHero.vue
+++ b/components/AppHero.vue
@@ -14,7 +14,7 @@
       />
     </div>
     <img
-      :src="`hero-starter.svg`"
+      src="/hero-starter.svg"
       width="385"
       height="216"
       class="hidden md:block w-full h-full justify-self-center md:justify-self-end md:col-span-3"
diff --git a/components/NuxtDropdown.vue b/components/NuxtDropdown.vue
index 561a3cb..9cee073 100644
--- a/components/NuxtDropdown.vue
+++ b/components/NuxtDropdown.vue
@@ -52,6 +52,7 @@ const links = [
               :aria-label="link.arialabel"
             >
               <img
+                loading="lazy"
                 class="text-white w-6 h-6 self-center"
                 src="/nuxt.svg"
               >
diff --git a/components/StarterCard.vue b/components/StarterCard.vue
index eb49b49..cd4e644 100644
--- a/components/StarterCard.vue
+++ b/components/StarterCard.vue
@@ -25,6 +25,7 @@ const command = computed(() => {
       <div class="flex flex-col gap-y-4 justify-center items-center w-full">
         <img
           :src="starter.image"
+          loading="lazy"
           width="40"
           height="40"
           :alt="starter.name"