Improve Lighthouse LCP and accessibility scores (#23)
Some checks failed
Build / build (push) Has been cancelled

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.
This commit is contained in:
Christian Semmler 2026-02-07 15:43:07 -08:00 committed by GitHub
parent a85e2ab952
commit de9fefb999
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 3 deletions

View File

@ -27,6 +27,7 @@
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<link rel="canonical" href="https://isle.pizza"> <link rel="canonical" href="https://isle.pizza">
<link rel="preload" as="image" href="/images/install.webp" fetchpriority="high">
<style> <style>
body { margin: 0; background-color: #000000; } body { margin: 0; background-color: #000000; }
#app:empty { visibility: hidden; } #app:empty { visibility: hidden; }

View File

@ -126,7 +126,7 @@
<UpdatePopup /> <UpdatePopup />
<ConfigToast /> <ConfigToast />
<div id="main-container"> <main id="main-container">
<div class="page-wrapper" class:active={$currentPage === 'main'}> <div class="page-wrapper" class:active={$currentPage === 'main'}>
<TopContent /> <TopContent />
<Controls /> <Controls />
@ -156,7 +156,7 @@
<p><strong>DEVELOPMENT MODE</strong></p> <p><strong>DEVELOPMENT MODE</strong></p>
{/if} {/if}
</div> </div>
</div> </main>
<CanvasWrapper /> <CanvasWrapper />

View File

@ -68,7 +68,7 @@
<div id="top-content"> <div id="top-content">
<div class="video-container"> <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 <span
id="sound-toggle-emoji" id="sound-toggle-emoji"
title={$soundEnabled ? 'Pause Audio' : 'Play Audio'} title={$soundEnabled ? 'Pause Audio' : 'Play Audio'}