@props(['options']) @php $carouselImages = $options['images'] ?? []; $firstImage = data_get($carouselImages, '0.image'); $firstImageTitle = data_get($carouselImages, '0.title'); @endphp @if ($firstImage) {{-- Preload the LCP image in so the browser starts fetching it before HTML parse reaches the tag. Directly targets the LCP "resource load delay" subpart Lighthouse reports as the biggest contributor on this page. --}} @push('meta') @endpush @endif
@if ($firstImage) {{-- Server-rendered first slide so the browser can discover and fetch the LCP image immediately, before Vue mounts the carousel. `sizes="100vw"` declares the actual rendered width (the img has `w-screen`) so the browser picks the smallest srcset variant that satisfies viewport_px × DPR — mobile 412 × 1.75 ≈ 721 → 768w small variant. The inline `style` supplies width/aspect-ratio so the LCP element can paint before the Tailwind CSS bundle finishes parsing on slow mobile CPU. --}} {{ $firstImageTitle ?? trans('shop::app.home.index.image-carousel') }} @else
@endif
@pushOnce('scripts') @endpushOnce