lighthouse improvements

4 files changed, 23 insertions, 5 deletions

diff --git a/src/components/Image.svelte b/src/components/Image.svelte
index d03c20c3..159a817f 100644
--- a/src/components/Image.svelte
+++ b/src/components/Image.svelte
@@ -1,5 +1,20 @@
 <script lang="ts">
-  let { image, style } = $props();
+  let { image, style, loading = undefined, width = undefined, height = undefined, fetchpriority = undefined }: {
+    image: string;
+    style?: string;
+    loading?: "lazy" | "eager";
+    width?: number;
+    height?: number;
+    fetchpriority?: "high" | "low" | "auto";
+  } = $props();
 </script>
 
-<img src="/images/{image}.webp" alt={image} class={style} />
+<img
+  src="/images/{image}.webp"
+  alt={image}
+  class={style}
+  {loading}
+  {width}
+  {height}
+  {fetchpriority}
+/>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 6e027e8d..2be86c98 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -37,7 +37,7 @@
     </div>
   </div>
 
-  <Image image="hero-image" style="w-full md:w-2/3 max-w-5xl mx-auto mt-20" />
+  <Image image="hero-image" style="w-full h-auto md:w-2/3 max-w-5xl mx-auto mt-20 aspect-[768/743]" width={768} height={743} fetchpriority="high" />
 </div>
 
 <style>
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte
index d43e9956..e10a144b 100644
--- a/src/components/LandingInfoCard.svelte
+++ b/src/components/LandingInfoCard.svelte
@@ -2,12 +2,15 @@
   import Image from "./Image.svelte";
 
   import type { Snippet } from "svelte";
-  let { image, title, description = undefined, order = undefined, children = undefined }: { image: string; title: string; description?: string; order?: string; children?: Snippet } = $props();
+  let { image, title, description = undefined, order = undefined, loading = undefined, width = undefined, height = undefined, children = undefined }: { image: string; title: string; description?: string; order?: string; loading?: "lazy" | "eager"; width?: number; height?: number; children?: Snippet } = $props();
 </script>
 
 <div class="flex flex-col-reverse lg:flex-row justify-center lg:gap-20 items-center">
   <Image
     {image}
+    {loading}
+    {width}
+    {height}
     style="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mt-10 lg:mt-0 shrink-0 {order ===
     'reverse' && 'lg:order-last'}"
   />
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index 6511eccd..135c8d79 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -13,7 +13,7 @@
   };
 </script>
 
-<select name="language" bind:value={l} onchange={handleChange}>
+<select name="language" aria-label="Language" bind:value={l} onchange={handleChange}>
   {#each $locales as locale}
     <option value={locale}>{$t(`lang.${locale}`)}</option>
   {/each}