Review
Prioritize hero plate photo for LCP
PlateMap's dish detail hero is the LCP element on most mobile sessions, but the CDN still sees it as a default-priority fetch and ships a full-width desktop asset into a 100vw mobile slot. Mark the above-the-fold plate image with fetchPriority=high, drop lazy loading, and wire a matching srcSet/sizes pair so the browser picks the right candidate early.
ReactTier 1lcpfetchpriorityimagesperf
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
src/dishes/PlateHero.tsx+10-7
| 14 | 14 | type PlateHeroProps = { | |
| 15 | 15 | plateId: string; | |
| 16 | 16 | title: string; | |
| 17 | 17 | imageBase: string; | |
| 18 | 18 | }; | |
| 19 | 19 | ||
| 20 | 20 | export function PlateHero({ plateId, title, imageBase }: PlateHeroProps) { | |
| 21 | 21 | return ( | |
| 22 | 22 | <figure className="plate-hero"> | |
| 23 | - | <img | |
| 24 | - | src={`${imageBase}/w=1200`} | |
| 25 | - | alt={title} | |
| 26 | - | loading="lazy" | |
| 27 | - | width={1200} | |
| 28 | - | height={800} | |
| 29 | - | /> | |
| 23 | + | <img | |
| 24 | + | src={`${imageBase}/w=800`} | |
| 25 | + | srcSet={`${imageBase}/w=400 400w, ${imageBase}/w=800 800w, ${imageBase}/w=1200 1200w`} | |
| 26 | + | sizes="(max-width: 640px) 100vw, (max-width: 1024px) 70vw, 720px" | |
| 27 | + | alt={title} | |
| 28 | + | width={1200} | |
| 29 | + | height={800} | |
| 30 | + | decoding="async" | |
| 31 | + | fetchPriority="high" | |
| 32 | + | /> | |
| 30 | 33 | <figcaption className="plate-hero__caption">{title}</figcaption> | |
| 31 | 34 | </figure> | |
| 32 | 35 | ); | |
| 33 | 36 | } |