Improve PageSpeed accessibility, SEO, and performance scores

Add alt attributes, width/height for CLS, aria-labels, meta description,
preconnect hints, LCP fetchpriority, and sound/stamp cache headers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vue/src/components/util/Chat.vue

@@ -152,6 +152,7 @@ onUnmounted(() => {
             <img
               v-if="isImageUrl(message.fileUrl)"
               :src="message.fileUrl"
+              alt="Uploaded image"
               loading="lazy"
               class="w-full max-w-full max-h-48 rounded block"
             />
@@ -170,7 +171,7 @@ onUnmounted(() => {
       </div>
     </div>
     <div>
-      <input v-model="messageInput" @keyup.enter="sendMessage" />
+      <input v-model="messageInput" @keyup.enter="sendMessage" aria-label="Chat message" />
       <input
         ref="fileInput"
         type="file"

vue/src/components/util/MusicPlayer.vue

@@ -7,7 +7,7 @@ import Button from "@/components/input/Button.vue";
     <audio/>
     <div class="musicPlayerGrid">
         <div class="album_cover">
-            <img src="/img/Untitled.png"></img>
+            <img src="/img/Untitled.png" alt=""></img>
         </div>
         <div class="controls">
             <div class="sliders">

vue/src/components/util/Radio.vue

@@ -1,12 +1,12 @@
 <template>
     <div v-if="streamLive" class="overflow-hidden">
         <Header>Radio</Header>
-        <img src="/img/tmpen31z3pe.PNG" />
+        <img src="/img/tmpen31z3pe.PNG" alt="Radio" width="176" height="177" />
         <audio controls :src="streamUrl" ref="audio"></audio>
     </div>
     <div v-else>
         <Header>Radio</Header>
-        <img src="/img/tmpen31z3pe.PNG" />
+        <img src="/img/tmpen31z3pe.PNG" alt="Radio" width="176" height="177" />
         <div class="m-1 text-center">
             <p>Radio is offline. Message for info!</p>
             <Button class="w-full" @click="checkStream()">Check Stream</Button>

vue/src/components/util/Slideshow.vue

@@ -41,7 +41,7 @@ onUnmounted(() => {
                 <Header v-if="currentComment">
                     {{ currentComment }}
                 </Header>
-                <img :src="currentUrl" alt="Image Viewer" loading="lazy" />
+                <img :src="currentUrl" alt="Image Viewer" fetchpriority="high" />
             </div>
         </Transition>
     </div>

vue/src/components/util/Timer.vue

@@ -75,6 +75,7 @@ function playFinishedSound() {
                     type="range"
                     min="0"
                     max="59"
+                    aria-label="Minutes"
                 />
                 <p>{{ minutesInput }}m</p>
             </div>
@@ -85,6 +86,7 @@ function playFinishedSound() {
                     type="range"
                     min="0"
                     max="59"
+                    aria-label="Seconds"
                 />
                 <p>{{ secondsInput }}s</p>
             </div>

vue/src/components/util/Wip.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="a4page-portrait bdr-1 flex flex-col relative overflow-scroll">
         <RouterLink to="/" class="bdr-2">
-            <img src="/img/memes/epic.jpeg" loading="lazy" />
+            <img src="/img/memes/epic.jpeg" alt="" loading="lazy" />
         </RouterLink>
         <h1>Click her, she will take you home</h1>
         <span style="height: 100px"></span>

vue/src/views/home/Home.vue

@@ -68,6 +68,9 @@ import Steam from "./Steam.vue";
                 <div class="sidebar-image">
                     <img
                         src="/img/memes/fire-woman.gif"
+                        alt=""
+                        width="178"
+                        height="178"
                         class="border-tertiary border"
                         loading="lazy"
                     />

vue/src/views/home/Listening.vue

@@ -37,7 +37,7 @@ onUnmounted(() => {
             class="flex flex-col items-center"
         >
             <Header>Listening To</Header>
-            <img :src="song.track.album.images[0].url" />
+            <img :src="song.track.album.images[0].url" :alt="song.track.album.name + ' album art'" width="217" height="217" />
             <p class="text-center">
                 <strong>Song:</strong> {{ song.track.name }}
             </p>

vue/src/views/home/Stamps.vue

@@ -76,7 +76,7 @@ onUnmounted(() => {
     <Touchscreen ref="touchscreen">
         <div class="flex flex-wrap tst">
             <Link bare href="https://www.adam-french.co.uk">
-                <img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
+                <img src="https://www.adam-french.co.uk/img/stamps/mine.gif" alt="adam-french.co.uk" />
             </Link>
             <Link bare href="https://jacobbarron.xyz">
                 <img
@@ -84,7 +84,7 @@ onUnmounted(() => {
                     alt="jacobbarron.xyz"
                 />
             </Link>
-            <img v-for="src in srcs" :src="src" loading="lazy" />
+            <img v-for="src in srcs" :src="src" :alt="src.split('/').pop().split('.')[0]" loading="lazy" />
         </div>
     </Touchscreen>
 </template>

vue/src/views/home/Steam.vue

@@ -64,6 +64,8 @@ function formatHours(minutes) {
                     <img
                         :src="game.headerImageUrl"
                         :alt="game.name"
+                        width="145"
+                        height="68"
                         class="game-img"
                     />
                     <p class="text-center">