Landing page performance optimizations

src/components/BaseHead.astro

@@ -33,7 +33,7 @@ const resolvedImage = {
 
 <!-- High Priority Global Metadata -->
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <title set:html={smartypants(title, 1)} />
 <meta name="generator" content={Astro.generator} />
 <meta name="theme-color" content="#8D46E7" />

src/pages/_components/landing-page/FinalCTA.astro

@@ -1,17 +1,13 @@
 ---
-import { getImage } from 'astro:assets';
+import { Image } from 'astro:assets';
 import CodeBlock from '~/components/CodeBlock.astro';
 import bg from '../../_assets/final-cta.png';
 import Link from '../Link.astro';
-
-const background = await getImage({ src: bg, format: 'webp', width: 1280 });
 ---
 
 <section class="mt-20 sm:mt-36 mx-auto w-full max-w-screen-xl px-4 sm:px-8">
-	<div
-		class="overflow-hidden rounded-2xl border-y-[0.5px] border-astro-dark-100/20 bg-cover bg-center"
-		style={{ 'background-image': `url(${background.src})` }}
-	>
+	<div class="relative overflow-clip rounded-2xl border border-astro-dark-100/20">
+		<Image src={bg} alt="" width="1280" class="absolute inset-0 object-cover size-full -z-10 select-none bg-[#1a3e57]" />
 		<div
 			class="landing-section h-full min-h-[24rem] gap-8 lg:gap-12 p-8 md:p-20 xl:min-h-[44rem] lg:p-40"
 		>

src/pages/_components/landing-page/HeroBackground.astro

@@ -1,14 +1,14 @@
 ---
-import { getImage } from 'astro:assets';
+import { Image } from 'astro:assets';
 import heroBackground from '../landing-page/_assets/HeroBackground.png';
-
-const background = await getImage({ src: heroBackground, quality: 10, width: 256 });
 ---
 
-<img
+<Image
+	src={heroBackground}
+	quality={10}
+	width={256}
+	priority
 	loading="eager"
-	fetchpriority="high"
-	src={background.src}
 	alt=""
 	class="blur-lg absolute -z-50 -translate-x-1/2 inset-x-1/2 -inset-y-full w-[2353px] h-[1969px] object-cover max-w-[unset]"
 />

src/pages/_components/landing-page/integrations-tabs/InterfaceExample.astro

@@ -1,21 +1,18 @@
 ---
-import { getImage } from 'astro:assets';
+import { Image } from 'astro:assets';
 import astroCap from '../../../_components/landing-page/_assets/astro-cap.png';
 
-const astroCapSwag = await getImage({ src: astroCap, format: 'webp', width: 1280 });
-
 const { brandColor, highContrast = false } = Astro.props;
 ---
 
 <div class="pt-10 sm:pt-0 size-full flex items-end justify-center overflow-hidden">
 	<div class="w-2/3 md:max-xl:w-4/5 px-3 pt-3 bg-astro-gray-600 rounded-t-3xl">
 		<div class="p-2 sm:p-4 size-full flex flex-col bg-astro-gray-700 rounded-t-2xl space-y-2">
-			<img
+			<Image
 				class="w-full h-40 md:h-36 lg:h-40 xl:h-56 rounded-xl object-center object-contain"
-				src={astroCapSwag.src}
+				src={astroCap}
 				alt="Official Astro Cap Swag"
-				loading="lazy"
-				decoding="async"
+				width={300}
 			/>
 			<div class="flex items-center justify-between text-sm xl:text-base">
 				<h2 class="text-astro-gray-300 font-medium">Snapback Cap</h2>

src/pages/index.astro

@@ -16,13 +16,27 @@ import Sponsors from './_components/landing-page/Sponsors.astro';
 	image={{ src: '/og/astro.jpg', alt: 'Astro - Build the web you want.' }}
 >
 	<Hero />
-	<Intro />
-	<Islands />
-	<Integrations />
-	<Features />
-	<Ecosystem />
-	<Agencies />
-	<FinalCTA />
-	<Sponsors />
-	<div class="h-20 sm:h-36"></div>
+	<div class="flex flex-col layout-optim">
+		<Intro />
+		<Islands />
+		<Integrations />
+	</div>
+	<div class="flex flex-col layout-optim">
+		<Features />
+	</div>
+	<div class="flex flex-col layout-optim">
+		<Ecosystem />
+		<Agencies />
+		<FinalCTA />
+	</div>
+	<div class="flex flex-col layout-optim">
+		<Sponsors />
+		<div class="h-20 sm:h-36"></div>
+	</div>
+	<style>
+		.layout-optim {
+			content-visibility: auto;
+			contain-intrinsic-size: auto 1000px;
+		}
+	</style>
 </MainLayout>