More webperf optimisations (#50)

* More webperf optimisations * Move preload to head * Spacing * Self host video poster to make it even faster as it won't change * Update src/components/hero.astro Co-authored-by: Bramus <[email protected]> * Update src/pages/index.astro Co-authored-by: Bramus <[email protected]> --------- Co-authored-by: Bramus <[email protected]>
GoogleChromeLabs · Dec 4, 2024 · 1da324d · 1da324d
1 parent 91b08a2
commit 1da324d
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 4 deletions.
diff --git a/public/hero-video-poster.jpg b/public/hero-video-poster.jpg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@