The space photo is the biggest thing on the screen. The browser now knows that before it starts fetching, and phones get a phone-sized file instead of a desktop one.
The space hero is the Largest Contentful Paint element. Added fetchpriority="high" to the priority <img> in blurhash-image.vue, and a server-rendered <link rel="preload" as="image"> from the media grid via useHead, with separate mobile and desktop hrefs behind media queries.
Wired the existing buildSrcSet and sizes to (max-width: 640px) 640w, (max-width: 1024px) 1024w, 1920w. The mobile LCP image is now optimised at 640px wide.
Files
- packages/ui/general/components/media/media-grid/media-grid.vue
- packages/ui/general/components/blurhash-image/blurhash-image.vue