chore: hero and home optimization

Author: ronggur

src/components/Hero.astro

@@ -28,7 +28,6 @@ const {
         class="hero--main-content fade-in--small"
         data-reveal="fade-in--small--visible"
         data-reveal-immediate="true"
-        data-reveal-delay="100"
       >
         {/* Hero Main Content */}
         {(title || description) && (

src/components/Nav.astro

@@ -23,7 +23,6 @@ const {
 <nav
   class="nav--main fade-in--pure"
   data-reveal="fade-in--pure--visible"
-  data-reveal-delay="100"
   data-reveal-immediate="true"
 >
   {/* Logo */}

src/components/home/FirstSection.astro

@@ -34,6 +34,7 @@ if (content.data.images) {
     <Image
       src={sceneTree}
       layout="constrained"
+      loading="lazy"
       alt="Scene tree illustration"
       class="ml-10 size-auto w-full max-w-3xl -scale-x-100 self-end"
     />
@@ -43,7 +44,7 @@ if (content.data.images) {
       <Image
         src={asideNote}
         layout="constrained"
-        alt="Scene tree illustration"
+        alt="Aside note illustration"
         class="absolute -bottom-17 left-5 z-15 size-auto w-full max-w-67.25 md:-bottom-12 md:left-5 lg:-bottom-18 lg:-left-5 xl:-bottom-16 xl:-left-10"
       />
       <!-- Scene Tree Image -->
@@ -60,7 +61,7 @@ if (content.data.images) {
             <h2 class="datum-text-8xl">{content.data.title}</h2>
           </div>
           <!-- Right: Body Text -->
-          <div class="max-w-115 flex-grow self-center">
+          <div class="max-w-115 grow self-center">
             <span class="datum-text-lg">
               <p>{content.body}</p>
             </span>
@@ -92,6 +93,7 @@ if (content.data.images) {
                         <Image
                           src={logo.src}
                           alt={logo.alt}
+                          loading="lazy"
                           class={`logo-cycle absolute mx-10 max-h-15 max-w-18 object-contain md:max-w-25 lg:max-w-30 ${logoIndex === 0 ? 'opacity-100' : 'opacity-0'}`}
                           data-logo-index={logo.index}
                           data-column-logo-index={logoIndex}

src/components/home/Hero.astro

@@ -19,7 +19,6 @@ const { title = '', description = '', class: className } = Astro.props as HeroPr
       class="fade-in--small max-width relative z-40 flex flex-col items-center justify-center gap-7 pt-16 pb-29 text-center md:pt-16 md:pb-44 lg:pt-18 lg:pb-32 xl:gap-9 xl:pt-20 xl:pb-44"
       data-reveal="fade-in--small--visible"
       data-reveal-immediate="true"
-      data-reveal-delay="200"
     >
       <h1
         class="datum-text-10xl m-auto max-w-140 text-white"

src/layouts/Layout.astro

@@ -5,6 +5,7 @@ import { formatISODate } from '@utils/dateUtils';
 import type { LayoutProps } from '@/src/types/common';
 import Favicons from '@components/Favicons.astro';
 import defaultOgImage from '@content/images/og/default.png';
+import homeIllustration from '@v1/assets/images/home-illustration.webp';
 
 const {
   title,
@@ -59,6 +60,19 @@ const twitterImage =
       crossorigin
     />
 
+    {
+      /* Preload LCP image for homepage - improves Largest Contentful Paint */
+      Astro.url.pathname === '/' && (
+        <link
+          rel="preload"
+          as="image"
+          href={homeIllustration.src}
+          type="image/webp"
+          fetchpriority="high"
+        />
+      )
+    }
+
     <meta property="og:logo" content={new URL('/images/logo-datum.png', Astro.site).href} />
     <SEO
       title={titleValue}