diff --git a/public/hero-video-poster.jpg b/public/hero-video-poster.jpg
new file mode 100644
index 0000000..0fe2fa9
Binary files /dev/null and b/public/hero-video-poster.jpg differ
diff --git a/src/components/authors.astro b/src/components/authors.astro
index 5c820cf..ab0cc0e 100644
--- a/src/components/authors.astro
+++ b/src/components/authors.astro
@@ -6,7 +6,7 @@ const authorInfo = Object.values(authors).reverse();
 ---
 
 <div class="avatars">
-    {authorInfo.map((author, index) => <a name={`author-profile-${authorKeys[index]}`} href={author.url} title={author.name}><span style={`position-anchor: --${authorKeys[index]}`}>{author.name}</span><img alt={`Profile image for ${author.name}`} class="avatar" height="96" width="96" src={author.image} style={`anchor-name: --${authorKeys[index]}`}></a>)}
+    {authorInfo.map((author, index) => <a name={`author-profile-${authorKeys[index]}`} href={author.url} title={author.name}><span style={`position-anchor: --${authorKeys[index]}`}>{author.name}</span><img alt={`Profile image for ${author.name}`} class="avatar" height="96" width="96" loading="lazy" src={author.image} style={`anchor-name: --${authorKeys[index]}`}></a>)}
 </div>
 
 <style>
diff --git a/src/components/footer.astro b/src/components/footer.astro
index 8b7519b..5130496 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -12,6 +12,7 @@ import Authors from "./authors.astro";
     width="514"
     src="biomes/cyberspace-header.png"
     alt="a cityscape of retro computers"
+    loading="lazy"
   />
 </footer>
 
diff --git a/src/components/hero.astro b/src/components/hero.astro
index baab31d..5468f99 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -38,7 +38,8 @@ const totalFeatures = biomes.reduce((total, biome) => {
         <span class="plus"></span>
       </div>
       <div class="video">
-        <Youtube id="bcpUS7qXuoA" />
+        {/* if changing the Video, then update the preload of the image in index.astro */}
+        <Youtube id="bcpUS7qXuoA" poster="/hero-video-poster.jpg" />
       </div>
     </div>
     <div>
diff --git a/src/components/youtube.astro b/src/components/youtube.astro
index c9ebed7..25080de 100644
--- a/src/components/youtube.astro
+++ b/src/components/youtube.astro
@@ -5,14 +5,16 @@ interface Props {
   id: string;
   width?: number;
   height?: number;
+  poster?: string;
 }
 
 const {
   id,
   width = 560,
   height = 315,
+  poster,
 } = Astro.props;
-const posterURL = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
+const posterURL = poster || `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
 const embedURL = `https://www.youtube.com/embed/${id}`;
 const watchURL = `https://youtube.com/watch?v=${id}`;
 ---
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1b2a44d..5346627 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -116,10 +116,12 @@ const timelines = biomes.reduce(
     <meta name="viewport" content="width=device-width" />
 
     <title>CSS Wrapped 2024</title>
+    
+    <link rel="preload" href="./fight.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="./hero-video-poster.jpg" as="image" fetchpriority="high">
     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
     <meta name="description" content="Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024.">
 
-    <link rel="preload" href="./fight.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <script type="module" src="./baseline-status.min.js"></script>
 
     <meta property="og:title" content="CSS Wrapped 2024">