Performance optimizations (#78)

* Optimize preview images with `<Image>` component

* Load images eagerly

* Improve cache headers

* Delete unused font file

* Cache fonts & assets for 1 week

* Remove MD IO font preload as the font is never used

* Load below-the-fold Houston lazily

* Lazy load bottom three repo preview images

* Preload background noise tile

* Test removing `crossorigin` attribute from preloaded images

* Fix a11y issue with drop-down “Open in…” menu

public/_headers

@@ -0,0 +1,13 @@
+
+/_astro/*
+  Cache-Control: public
+  Cache-Control: max-age=31536000
+  Cache-Control: immutable
+
+/assets/*
+  cache-control: max-age=604800
+  cache-control: public
+
+/fonts/*
+  cache-control: max-age=604800
+  cache-control: public

src/components/RepoCard.astro

@@ -3,8 +3,10 @@ import { Icon } from 'astro-icon';
 import type { Example } from '../data/examples.js';
 import CopyButton from './CopyButton.astro';
 import RepoCardLink from './RepoCardLink.astro';
+import fallbackImage from '../assets/previews/minimal.webp';
+import { Image } from 'astro:assets';
 
-export type Props = Example;
+export type Props = Example & { aboveTheFold: boolean };
 
 const {
 	title,
@@ -13,9 +15,11 @@ const {
 	codesandboxUrl,
 	gitpodUrl,
 	createAstroTemplate,
-	previewImage = '/previews/minimal.webp',
+	loadPreviewImage = () => fallbackImage,
+	aboveTheFold,
 } = Astro.props;
 
+const image = await loadPreviewImage();
 const headingId = `template-${createAstroTemplate}`;
 ---
 
@@ -25,7 +29,14 @@ const headingId = `template-${createAstroTemplate}`;
 >
 	<div class="noise z-0"></div>
 	<div class="aspect-video bg-astro-gray-700">
-		<img src={previewImage} alt="" class="object-cover object-left-top s-full" />
+		<Image
+			src={image}
+			alt=""
+			loading={aboveTheFold ? 'eager' : 'lazy'}
+			widths={[400, 600, 900]}
+			sizes="(min-width 1280px) 390px,(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
+			class="object-cover object-left-top s-full"
+		/>
 	</div>
 	<div class="flex flex-col gap-4 p-5">
 		<h2 class="heading-4" id={headingId}>{title}</h2>
@@ -41,32 +52,36 @@ const headingId = `template-${createAstroTemplate}`;
 				href={stackblitzUrl}
 				target="_blank"
 				rel="noopener noreferrer"
-				class="flex items-center gap-2 rounded-l-full bg-black/15 px-4 text-sm transition hover:backdrop-brightness-75"
+				class="bg-black/15 flex items-center gap-2 rounded-l-full px-4 text-sm transition hover:backdrop-brightness-75"
 			>
 				<Icon name="stackblitz" size={16} aria-hidden="true" /> Open in StackBlitz
 			</a>
 			<details class="relative z-10" data-card-options>
 				<summary
-					class="flex h-full cursor-pointer list-none items-center rounded-r-full bg-black/15 px-2 transition hover:backdrop-brightness-75"
+					class="bg-black/15 flex h-full cursor-pointer list-none items-center rounded-r-full px-2 transition hover:backdrop-brightness-75"
 				>
 					<span class="sr-only">More options</span>
 					<Icon name="chevron-down" size={20} aria-hidden="true" />
 				</summary>
 				<ul
 					class="absolute right-0 top-full mt-2 flex w-max flex-col rounded bg-white p-2 text-astro-gray-700 shadow-md"
 				>
-					<a
-						href={gitpodUrl}
-						class="flex flex-row items-center gap-2 rounded-sm px-3 py-2 hover:bg-blue-purple-gradient hover:text-white"
-					>
-						<Icon name="gitpod" size={20} aria-hidden="true" /> Open in Gitpod
-					</a>
-					<a
-						href={codesandboxUrl}
-						class="flex flex-row items-center gap-2 rounded-sm px-3 py-1.5 hover:bg-blue-purple-gradient hover:text-white"
-					>
-						<Icon name="codesandbox" size={20} aria-hidden="true" /> Open in CodeSandbox
-					</a>
+					<li>
+						<a
+							href={gitpodUrl}
+							class="flex flex-row items-center gap-2 rounded-sm px-3 py-2 hover:bg-blue-purple-gradient hover:text-white"
+						>
+							<Icon name="gitpod" size={20} aria-hidden="true" /> Open in Gitpod
+						</a>
+					</li>
+					<li>
+						<a
+							href={codesandboxUrl}
+							class="flex flex-row items-center gap-2 rounded-sm px-3 py-1.5 hover:bg-blue-purple-gradient hover:text-white"
+						>
+							<Icon name="codesandbox" size={20} aria-hidden="true" /> Open in CodeSandbox
+						</a>
+					</li>
 				</ul>
 			</details>
 		</div>

src/data/examples.ts

@@ -11,12 +11,15 @@ interface ExampleDataWithRepo extends ExampleData {
 	repo: string;
 }
 
-const previewImageSlugs = new Set(
-	Object.keys(import.meta.glob('../../public/previews/*.webp')).map((key) =>
-		key
-			.split('/')
-			.pop()
-			?.replace(/\.webp$/, ''),
+const previewImages = new Map(
+	Object.entries(import.meta.glob<{ default: ImageMetadata }>('../assets/previews/*.webp')).map(
+		([key, value]) => [
+			key
+				.split('/')
+				.pop()
+				?.replace(/\.webp$/, ''),
+			async () => (await value()).default,
+		],
 	),
 );
 
@@ -53,7 +56,7 @@ export interface Example {
 	codesandboxUrl: string;
 	gitpodUrl: string;
 	createAstroTemplate: string;
-	previewImage: string | undefined;
+	loadPreviewImage: (() => Promise<ImageMetadata>) | undefined;
 }
 
 function getSuffix(name: string, ref: string): string {
@@ -92,7 +95,7 @@ function toExample(exampleData: ExampleDataWithRepo, ref: string): Example {
 		codesandboxUrl: `/${name}${suffix}?on=codesandbox`,
 		gitpodUrl: `/${name}${suffix}?on=gitpod`,
 		createAstroTemplate: toTemplateName(exampleData),
-		previewImage: previewImageSlugs.has(name) ? `/previews/${name}.webp` : undefined,
+		loadPreviewImage: previewImages.get(name),
 		title,
 	};
 }

src/layouts/Base.astro

@@ -55,15 +55,9 @@ const resolvedSeoBanner = new URL(seoBanner.src, Astro.site).toString();
 			type="font/woff2"
 			crossorigin
 		/>
-		<link
-			rel="preload"
-			href="/fonts/MD IO/Web/MDIO0.5-Regular.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin
-		/>
 		<link rel="preload" href={Inter} as="font" type="font/woff2" crossorigin />
-		<link rel="preload" href={houstonOmg.src} as="image" type="image/webp" crossorigin />
+		<link rel="preload" href={houstonOmg.src} as="image" type="image/webp" />
+		<link rel="preload" href="/assets/noise.webp" as="image" type="image/webp" />
 
 		<!-- Fathom - beautiful, simple website analytics -->
 		<script src="https://cdn.usefathom.com/script.js" data-site="EZBHTSIG" defer></script>
@@ -117,16 +111,16 @@ const resolvedSeoBanner = new URL(seoBanner.src, Astro.site).toString();
 
 				<ul class="mb-24 mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
 					{
-						exampleGroup.items.map((example) => (
+						exampleGroup.items.map((example, index) => (
 							<li>
-								<RepoCard {...example} />
+								<RepoCard aboveTheFold={index < 3} {...example} />
 							</li>
 						))
 					}
 				</ul>
 
 				<section class="flex flex-col items-center">
-					<img src={houstonHappy.src} alt="" width="148" height="148" />
+					<img src={houstonHappy.src} alt="" width="148" height="148" loading="lazy" />
 					<h2 class="heading-3 text-center sm:heading-2">Houston, we have resources</h2>
 					<div class="my-16 flex w-full flex-wrap gap-4 children:flex-1 children:basis-72">
 						<div>