From de9fefb9998bb51f13dae6e4bbbe52f380a92296 Mon Sep 17 00:00:00 2001
From: Christian Semmler <mail@csemmler.com>
Date: Sat, 7 Feb 2026 15:43:07 -0800
Subject: [PATCH] Improve Lighthouse LCP and accessibility scores (#23)

Preload the LCP image (install.webp) from the HTML and add
fetchpriority="high" so the browser discovers it before JS executes.
Use a <main> landmark for the primary content container to satisfy
the "document has a main landmark" accessibility audit.
---
 index.html                | 1 +
 src/App.svelte            | 4 ++--
 src/lib/TopContent.svelte | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 84581ed..fa28b86 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,7 @@
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/png" href="favicon.png">
     <link rel="canonical" href="https://isle.pizza">
+    <link rel="preload" as="image" href="/images/install.webp" fetchpriority="high">
     <style>
         body { margin: 0; background-color: #000000; }
         #app:empty { visibility: hidden; }
diff --git a/src/App.svelte b/src/App.svelte
index 96af317..5d4aea9 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -126,7 +126,7 @@
 <UpdatePopup />
 <ConfigToast />
 
-<div id="main-container">
+<main id="main-container">
     <div class="page-wrapper" class:active={$currentPage === 'main'}>
         <TopContent />
         <Controls />
@@ -156,7 +156,7 @@
             <p><strong>DEVELOPMENT MODE</strong></p>
         {/if}
     </div>
-</div>
+</main>
 
 <CanvasWrapper />
 
diff --git a/src/lib/TopContent.svelte b/src/lib/TopContent.svelte
index a1ea94d..c12e910 100644
--- a/src/lib/TopContent.svelte
+++ b/src/lib/TopContent.svelte
@@ -68,7 +68,7 @@
 
 <div id="top-content">
     <div class="video-container">
-        <img id="install-video" width="260" height="260" src="images/install.webp" alt="Install Game">
+        <img id="install-video" width="300" height="300" fetchpriority="high" src="images/install.webp" alt="Install Game">
         <span
             id="sound-toggle-emoji"
             title={$soundEnabled ? 'Pause Audio' : 'Play Audio'}