From 3c9d19d185fb4974ec31b9b0247fe73f5d8ccb37 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Thu, 26 Mar 2026 02:38:08 +0000
Subject: [PATCH] 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>
---
 nginx/nginx.conf.template               | 7 +++++++
 vue/index.html                          | 3 +++
 vue/src/components/util/Chat.vue        | 3 ++-
 vue/src/components/util/MusicPlayer.vue | 2 +-
 vue/src/components/util/Radio.vue       | 4 ++--
 vue/src/components/util/Slideshow.vue   | 2 +-
 vue/src/components/util/Timer.vue       | 2 ++
 vue/src/components/util/Wip.vue         | 2 +-
 vue/src/views/home/Home.vue             | 3 +++
 vue/src/views/home/Listening.vue        | 2 +-
 vue/src/views/home/Stamps.vue           | 4 ++--
 vue/src/views/home/Steam.vue            | 2 ++
 12 files changed, 27 insertions(+), 9 deletions(-)
diff --git a/nginx/nginx.conf.template b/nginx/nginx.conf.template
index 3524a0a..e62e05b 100644
--- a/nginx/nginx.conf.template
+++ b/nginx/nginx.conf.template
@@ -118,6 +118,13 @@ http {
 
         location = /img/stamps/mine.gif {
             add_header Access-Control-Allow-Origin *;
+            expires 7d;
+            add_header Cache-Control "public";
+        }
+
+        location /sound/ {
+            expires 7d;
+            add_header Cache-Control "public";
         }
 
         location $BACKEND_ENDPOINT {
diff --git a/vue/index.html b/vue/index.html
index c7760ba..0475a2e 100644
--- a/vue/index.html
+++ b/vue/index.html
@@ -3,7 +3,10 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Adam French's personal website" />
         <title>AF</title>
+        <link rel="preconnect" href="https://i.scdn.co" crossorigin />
+        <link rel="preconnect" href="https://cdn.akamai.steamstatic.com" crossorigin />
         <link rel="icon" type="/img/x-icon" href="/img/favicon.ico" />
         <link rel="preload" href="/fonts/big_noodle_titling.woff2" as="font" type="font/woff2" crossorigin />
         <link rel="preload" href="/fonts/CreatoDisplay-Bold.woff2" as="font" type="font/woff2" crossorigin />
diff --git a/vue/src/components/util/Chat.vue b/vue/src/components/util/Chat.vue
index 4289257..eb2c847 100644
--- a/vue/src/components/util/Chat.vue
+++ b/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"
diff --git a/vue/src/components/util/MusicPlayer.vue b/vue/src/components/util/MusicPlayer.vue
index aa5c0cd..b9aa245 100644
--- a/vue/src/components/util/MusicPlayer.vue
+++ b/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">
diff --git a/vue/src/components/util/Radio.vue b/vue/src/components/util/Radio.vue
index 38e9ebf..d441523 100644
--- a/vue/src/components/util/Radio.vue
+++ b/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>
diff --git a/vue/src/components/util/Slideshow.vue b/vue/src/components/util/Slideshow.vue
index f9b00db..5594d80 100644
--- a/vue/src/components/util/Slideshow.vue
+++ b/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>
diff --git a/vue/src/components/util/Timer.vue b/vue/src/components/util/Timer.vue
index fe2b48c..fb371a3 100644
--- a/vue/src/components/util/Timer.vue
+++ b/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>
diff --git a/vue/src/components/util/Wip.vue b/vue/src/components/util/Wip.vue
index 5ea06d4..d66e3ef 100644
--- a/vue/src/components/util/Wip.vue
+++ b/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>
diff --git a/vue/src/views/home/Home.vue b/vue/src/views/home/Home.vue
index ea73b21..4107543 100644
--- a/vue/src/views/home/Home.vue
+++ b/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"
                     />
diff --git a/vue/src/views/home/Listening.vue b/vue/src/views/home/Listening.vue
index b9216fa..dfa0959 100644
--- a/vue/src/views/home/Listening.vue
+++ b/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>
diff --git a/vue/src/views/home/Stamps.vue b/vue/src/views/home/Stamps.vue
index 11201c0..51ceceb 100644
--- a/vue/src/views/home/Stamps.vue
+++ b/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>
diff --git a/vue/src/views/home/Steam.vue b/vue/src/views/home/Steam.vue
index 6ceb12d..2f4b6eb 100644
--- a/vue/src/views/home/Steam.vue
+++ b/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">
