srcdev-nuxt-components 9.1.25 → 9.1.27

package/.claude/skills/components/services-section.md

@@ -39,7 +39,7 @@ Any [Iconify](https://icon-sets.iconify.design/) icon name is accepted. See `.cl
 
 ### `index` and image loading
 
-The `index` prop controls eager vs lazy image loading. The first two sections (`index` 0 and 1) load eagerly; all others load lazily. Pass the loop index when rendering a list of sections.
+The `index` prop controls both eager/lazy loading and fetch priority. The first two sections (`index` 0 and 1) load eagerly; all others load lazily. Only `index 0` gets `fetchpriority="high"` (LCP candidate). Pass the loop index when rendering a list of sections.
 
 ### `reverse`
 

package/.claude/skills/index.md

@@ -20,6 +20,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 .claude/skills/
 ├── index.md                    — this file
 ├── performance-review.md       — spawn a subagent to inspect recently written code for Vue/Nuxt performance issues before dev handoff
+├── performance-lcp-image-priority.md — fetchpriority=high + eager/lazy loading pattern for LCP images in list-rendered components
 ├── security-review.md          — spawn a subagent to inspect recently written code for security vulnerabilities (XSS, injection, data exposure, etc.) before dev handoff
 ├── storybook-add-story.md      — create a Storybook story for a component
 ├── storybook-add-font.md       — add a new font to Storybook

package/.claude/skills/performance-lcp-image-priority.md

@@ -0,0 +1,74 @@
+# LCP Image — fetchpriority and loading
+
+## Overview
+
+When a component renders images in a loop, the first item is typically the LCP candidate. Without explicit hints, the browser treats all images equally and delays fetching the first one — inflating the "resource load delay" metric in Lighthouse.
+
+Two props work together:
+
+| Prop | `index === 0` | `index === 1` | `index > 1` |
+|------|--------------|--------------|-------------|
+| `fetchpriority` | `"high"` | `"auto"` | `"auto"` |
+| `loading` | `"eager"` | `"eager"` | `"lazy"` |
+
+## When to apply
+
+Apply this pattern to any component that:
+- renders a `<NuxtImg>` or `<img>` in a list driven by an `index` prop, **and**
+- is likely to appear above or near the fold on first load
+
+Do **not** apply `fetchpriority="high"` to more than one image per page — it cancels out the benefit.
+
+## Steps
+
+### 1. Accept an `index` prop
+
+```ts
+interface Props {
+  index?: number
+  // ...other props
+}
+const props = withDefaults(defineProps<Props>(), {
+  index: 0,
+})
+```
+
+### 2. Derive loading and fetchpriority
+
+```ts
+const imageLoading = computed(() =>
+  props.index > 1 ? "lazy" : "eager"
+)
+
+const imageFetchPriority = computed(() =>
+  props.index === 0 ? "high" : "auto"
+)
+```
+
+### 3. Bind both to the image
+
+```vue
+<NuxtImg
+  :src="item.image"
+  :alt="item.title"
+  :loading="imageLoading"
+  :fetchpriority="imageFetchPriority"
+/>
+```
+
+### 4. Pass the loop index from the consumer
+
+```vue
+<MyComponent
+  v-for="(item, i) in items"
+  :key="item.slug"
+  :index="i"
+/>
+```
+
+## Notes
+
+- `fetchpriority="high"` signals to the browser to fetch the resource in the high-priority queue, reducing resource load delay — the main driver of LCP latency.
+- Indices 0 and 1 both load eagerly because the second item is often partially visible on load (e.g. in a two-column grid). Only index 0 gets high priority.
+- If the LCP element is not inside a loop (e.g. a standalone hero image), bind `fetchpriority="high"` directly without the computed.
+- For non-Nuxt `<img>` elements, the attribute is identical: `<img fetchpriority="high" />`.

package/.claude/skills/performance-review.md

@@ -59,6 +59,7 @@ Read each file in full, then check for the following issues. Report only issues
 ─── Images / Assets ─────────────────────────────────────────────
 □ `NuxtImg` without explicit `width` and `height` (causes layout shift + Vercel width fallback)
 □ Images without `loading="lazy"` where above-the-fold loading is not required
+□ First image in a list-rendered component missing `fetchpriority="high"` (LCP candidate — see `performance-lcp-image-priority.md`)
 □ Large inline SVGs that could be icon components
 
 ─── Bundle / Imports ────────────────────────────────────────────

package/app/assets/styles/setup/06.utility-classes/animations/_entry-slide-in.css

@@ -1,10 +1,8 @@
 @keyframes entrySlideInAnimation {
   from {
-    opacity: 0;
     transform: translateY(200px);
   }
   to {
-    opacity: 1;
     transform: translateY(0);
   }
 }

package/app/components/03.organisms/services/services-section/ServicesSection.vue

@@ -2,7 +2,7 @@
   <component :is="tag" class="services-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
     <div class="services-section__grid" :class="{ 'services-section__grid--reverse': reverse }">
       <div class="image-wrapper">
-        <NuxtImg :src="serviceData.image" :alt="serviceData.title" :loading="imageLoading" class="image" />
+        <NuxtImg :src="serviceData.image" :alt="serviceData.title" :loading="imageLoading" :fetchpriority="imageFetchPriority" class="image" />
       </div>
       <div class="info-wrapper" :class="infoWrapperClasses">
         <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
@@ -179,6 +179,9 @@ const infoWrapperClasses = computed(() => {
 // Computed to return loading="lazy" if index is greater than 1, so that the first two sections prioritise image loading, but if there are more than 2 sections, the rest will lazy load their images to improve performance.
 const imageLoading = computed(() => (props.index !== undefined && props.index > 1 ? "lazy" : "eager"));
 
+// Only the first image (LCP candidate) gets fetchpriority="high" to reduce resource load delay.
+const imageFetchPriority = computed(() => (props.index === 0 ? "high" : "auto"));
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.25",
+  "version": "9.1.27",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",