lighthouse improvements

7 files changed, 38 insertions, 11 deletions

diff --git a/src/app.css b/src/app.css
index 3ee2ca2a..14c5b032 100644
--- a/src/app.css
+++ b/src/app.css
@@ -38,7 +38,8 @@
 
 @font-face {
   font-family: "PublicSans";
-  src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf") format("truetype");
+  src: url("/fonts/Public_Sans/static/PublicSans-Regular.woff2") format("woff2");
+  font-display: swap;
 }
 
 :root {
diff --git a/src/app.html b/src/app.html
index e82ad055..42d00a9e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,16 +3,14 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="The easiest way to get started with bitcoin" />
     <meta name="keywords" content="open source bitcoin lightning web wallet" />
     <meta name="theme-color" content="#fff" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="apple-touch-icon" href="/images/icon-160.png" />
+    <link rel="preload" href="/fonts/Public_Sans/static/PublicSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="manifest" href="/manifest.webmanifest" />
     %sveltekit.head%
     <script>
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}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f8c0d199..966ebdaf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -24,6 +24,10 @@
   ];
 </script>
 
+<svelte:head>
+  <link rel="preload" href="/images/hero-image.webp" as="image" type="image/webp" />
+</svelte:head>
+
 <LandingHeader {howItWorks} {faq} {about} {user} />
 
 <main class="space-y-20 md:space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0 pt-20">
@@ -32,9 +36,12 @@
     image="lightning-qr"
     title={$t("landing.info1.title")}
     description={$t("landing.info1.description")}
+    loading="lazy"
+    width={640}
+    height={653}
   />
 
-  <LandingInfoCard image="phone-checkout" title={$t("landing.info2.title")} order="reverse">
+  <LandingInfoCard image="phone-checkout" title={$t("landing.info2.title")} order="reverse" loading="lazy" width={480} height={621}>
     {$t("landing.info2.description1")}
     <br />
     <br />
@@ -49,6 +56,9 @@
       image="customize"
       title={$t("landing.info3.title")}
       description={$t("landing.info3.description")}
+      loading="lazy"
+      width={640}
+      height={640}
     />
     <div bind:this={howItWorks}></div>
     <div id="about"></div>