improvement(landing): optimize hero and customer image loading (#7679)

Author: waleedlatif1

apps/sim/app/(landing)/components/hero/components/hero-platform-stage/hero-artwork.generated.ts

@@ -0,0 +1,8 @@
+/** Generated by scripts/generate-hero-artwork.ts. */
+export const HERO_ARTWORK = {
+  avifSrcSet:
+    '/landing/hero-artwork/painting-1080-edb05d03330a.avif 1080w, /landing/hero-artwork/painting-1200-a6f578eae83e.avif 1200w, /landing/hero-artwork/painting-1920-35eadaf0cdee.avif 1920w, /landing/hero-artwork/painting-2048-8538288166d3.avif 2048w, /landing/hero-artwork/painting-3840-d6e7c3f5943d.avif 3840w',
+  webpSrcSet:
+    '/landing/hero-artwork/painting-1080-2ccdfef92b36.webp 1080w, /landing/hero-artwork/painting-1200-04e474a8546d.webp 1200w, /landing/hero-artwork/painting-1920-c7a1fa74f312.webp 1920w, /landing/hero-artwork/painting-2048-6a414066a1fd.webp 2048w, /landing/hero-artwork/painting-3840-55734e1694fb.webp 3840w',
+  src: '/landing/hero-artwork/painting-3840-55734e1694fb.webp',
+} as const

apps/sim/app/(landing)/components/hero/components/hero-platform-stage/hero-platform-stage.test.tsx

@@ -0,0 +1,31 @@
+/** @vitest-environment node */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { HERO_ARTWORK } from '@/app/(landing)/components/hero/components/hero-platform-stage/hero-artwork.generated'
+import { HeroPlatformStage } from '@/app/(landing)/components/hero/components/hero-platform-stage/hero-platform-stage'
+
+vi.mock('@sim/emcn', () => ({ cn: (...values: string[]) => values.join(' ') }))
+vi.mock('@/app/(landing)/components/hero/components/hero-platform-loop', () => ({
+  HeroPlatformLoopMount: () => null,
+}))
+vi.mock(
+  '@/app/(landing)/components/hero/components/hero-platform-stage/mobile-hero-workflow',
+  () => ({
+    MobileHeroWorkflow: () => null,
+  })
+)
+
+describe('HeroPlatformStage loading', () => {
+  it('preloads only the desktop AVIF selection and keeps the hidden image lazy on mobile', () => {
+    const html = renderToStaticMarkup(<HeroPlatformStage />)
+    const preloads = html.match(/<link\b[^>]*rel="preload"[^>]*>/g) ?? []
+    expect(preloads).toHaveLength(1)
+    expect(preloads[0]).toContain('media="(min-width: 1024px)"')
+    expect(preloads[0]).toContain('type="image/avif"')
+    expect(preloads[0]).toContain(`imageSrcSet="${HERO_ARTWORK.avifSrcSet}"`)
+    expect(html).toContain(`srcSet="${HERO_ARTWORK.avifSrcSet}"`)
+    expect(html).toContain(`srcSet="${HERO_ARTWORK.webpSrcSet}"`)
+    expect(html).toContain('loading="lazy"')
+    expect(html).not.toContain('/_next/image')
+  })
+})

apps/sim/app/(landing)/components/hero/components/hero-platform-stage/hero-platform-stage.tsx

@@ -1,9 +1,13 @@
 import { cn } from '@sim/emcn'
 import Image from 'next/image'
 import { HeroPlatformLoopMount } from '@/app/(landing)/components/hero/components/hero-platform-loop'
+import { HERO_ARTWORK } from '@/app/(landing)/components/hero/components/hero-platform-stage/hero-artwork.generated'
 import { MobileHeroWorkflow } from '@/app/(landing)/components/hero/components/hero-platform-stage/mobile-hero-workflow'
 import { LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
 
+const ARTWORK_SIZES =
+  '(min-width: 1728px) 1648px, (min-width: 1280px) calc(100vw - 80px), calc(100vw - 72px)'
+
 /**
  * A focused workflow below 1024px; larger screens show the interactive platform
  * in a painted frame. The window uses a compact gutter until the wide desktop
@@ -12,6 +16,15 @@ import { LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
 export function HeroPlatformStage() {
   return (
     <>
+      <link
+        rel='preload'
+        as='image'
+        type='image/avif'
+        media='(min-width: 1024px)'
+        imageSrcSet={HERO_ARTWORK.avifSrcSet}
+        imageSizes={ARTWORK_SIZES}
+        fetchPriority='high'
+      />
       <MobileHeroWorkflow />
       <div
         data-preview-stage=''
@@ -21,18 +34,20 @@ export function HeroPlatformStage() {
           LANDING_STAGE_RADIUS
         )}
       >
-        <div aria-hidden='true' className='pointer-events-none absolute inset-0'>
+        <picture className='pointer-events-none absolute inset-0'>
+          <source type='image/avif' srcSet={HERO_ARTWORK.avifSrcSet} sizes={ARTWORK_SIZES} />
+          <source type='image/webp' srcSet={HERO_ARTWORK.webpSrcSet} sizes={ARTWORK_SIZES} />
           <Image
             data-preview-background=''
-            src='/landing/hero-painted-4k.webp'
+            src={HERO_ARTWORK.src}
             alt=''
             fill
+            unoptimized
             fetchPriority='high'
-            quality={90}
-            sizes='(max-width: 1727px) 100vw, 1648px'
+            sizes={ARTWORK_SIZES}
             className='object-cover dark:brightness-[0.28]'
           />
-        </div>
+        </picture>
 
         <div
           role='region'

apps/sim/app/(landing)/customers/components/customer-story-card/customer-story-card.tsx

@@ -7,16 +7,23 @@ import { CustomerStoryMedia } from '@/app/(landing)/customers/components/custome
 interface CustomerStoryCardProps {
   story: CustomerStory
   post: ContentMeta
+  priority?: boolean
+  sizes?: string
 }
 
 /** A quiet editorial link shared by the customer index and next-story section. */
-export function CustomerStoryCard({ story, post }: CustomerStoryCardProps) {
+export function CustomerStoryCard({
+  story,
+  post,
+  priority = false,
+  sizes = '(max-width: 767px) calc(100vw - 56px), 640px',
+}: CustomerStoryCardProps) {
   return (
     <Link
       href={`/customers/${story.slug}`}
       className='group flex min-w-0 flex-col gap-5 rounded-[12px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-4'
     >
-      <CustomerStoryMedia story={story} />
+      <CustomerStoryMedia story={story} priority={priority} sizes={sizes} />
       <div className='flex items-start justify-between gap-6'>
         <div>
           <p className='mb-2 text-[14px] text-[var(--text-muted)]'>{story.company}</p>

apps/sim/app/(landing)/customers/components/customer-story-media/customer-story-media.tsx

@@ -5,13 +5,15 @@ interface CustomerStoryMediaProps {
   story: CustomerStory
   priority?: boolean
   playable?: boolean
+  sizes?: string
 }
 
 /** Customer artwork, with on-demand playback on story detail pages. */
 export function CustomerStoryMedia({
   story,
   priority = false,
   playable = false,
+  sizes = '(max-width: 1023px) calc(100vw - 64px), (max-width: 1728px) 78vw, 1374px',
 }: CustomerStoryMediaProps) {
   return (
     <div
@@ -34,7 +36,7 @@ export function CustomerStoryMedia({
           src={story.heroImage}
           alt={story.heroAlt}
           fill
-          sizes='(max-width: 1023px) calc(100vw - 64px), (max-width: 1728px) 78vw, 1374px'
+          sizes={sizes}
           preload={priority}
           quality={90}
           className='object-cover'

apps/sim/app/(landing)/customers/page.test.tsx

@@ -28,8 +28,10 @@ vi.mock('@/lib/content/seo', () => ({
 }))
 vi.mock('@/app/(landing)/components/json-ld/json-ld', () => ({ JsonLd: () => null }))
 vi.mock('@/app/(landing)/customers/components/customer-story-card/customer-story-card', () => ({
-  CustomerStoryCard: ({ story }: { story: CustomerStory }) => (
-    <a href={`/customers/${story.slug}`}>{story.company}</a>
+  CustomerStoryCard: ({ story, priority }: { story: CustomerStory; priority?: boolean }) => (
+    <a href={`/customers/${story.slug}`} data-priority={priority}>
+      {story.company}
+    </a>
   ),
 }))
 vi.mock('@/app/(landing)/customers/components/customer-story-page/customer-story-page', () => ({
@@ -78,11 +80,21 @@ function setStories(rivianDraft: boolean, expDraft: boolean) {
 beforeEach(() => vi.clearAllMocks())
 
 describe('customer publication boundaries', () => {
+  it('prioritizes only the first rendered card when an earlier story has no content', async () => {
+    setStories(false, false)
+    const exp = post('exp-realty', false)
+    getBySlug.mockImplementation(async (slug: string) => (slug === exp.slug ? exp : null))
+    const html = renderToStaticMarkup(await CustomersPage())
+    expect(html).not.toContain('href="/customers/rivian"')
+    expect(html).toContain('href="/customers/exp-realty" data-priority="true"')
+  })
+
   it('preserves the complete noindex design preview when every story is a draft', async () => {
     setStories(true, true)
     const html = renderToStaticMarkup(await CustomersPage())
     expect(html).toContain('href="/customers/rivian"')
     expect(html).toContain('href="/customers/exp-realty"')
+    expect(html.match(/data-priority="true"/g)).toHaveLength(1)
     expect((await generateMetadata()).robots).toEqual({ index: false, follow: false })
   })
 

apps/sim/app/(landing)/customers/page.tsx

@@ -13,6 +13,10 @@ import { CustomerStoryCard } from '@/app/(landing)/customers/components/customer
 
 export const revalidate = 86400
 
+/** Two columns with a 32px gap inside HOME_INSET; below md the cards fill the gutter. */
+const CARD_IMAGE_SIZES =
+  '(min-width: 1728px) 671px, (min-width: 1280px) calc((100vw - 80px) * 5 / 12 - 16px), (min-width: 1024px) calc((100vw - 72px) * 5 / 12 - 16px), (min-width: 768px) calc(50vw - 48px), calc(100vw - 56px)'
+
 export async function generateMetadata(): Promise<Metadata> {
   const published = await getAllCustomerStoryMeta()
   return {
@@ -52,9 +56,19 @@ export default async function Page() {
           <h2 id='customer-stories-heading' className='sr-only'>
             Featured customer stories
           </h2>
-          {stories.map(({ story, post }) =>
-            post ? <CustomerStoryCard key={story.slug} story={story} post={post} /> : null
-          )}
+          {stories
+            .filter(({ post }) => post)
+            .map(({ story, post }, index) =>
+              post ? (
+                <CustomerStoryCard
+                  key={story.slug}
+                  story={story}
+                  post={post}
+                  priority={index === 0}
+                  sizes={CARD_IMAGE_SIZES}
+                />
+              ) : null
+            )}
         </section>
       </div>
     </main>

apps/sim/next.config.ts

@@ -273,6 +273,11 @@ const nextConfig: NextConfig = {
         source: '/landing/footer-artwork/:path*',
         headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }],
       },
+      {
+        /** Generated hero artwork uses content hashes, so URLs are immutable. */
+        source: '/landing/hero-artwork/:path*',
+        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }],
+      },
       {
         source: '/.well-known/:path*',
         headers: [