chore(template): seo optimization

Signed-off-by: Frederik Bußmann <frederik@bussmann.io>

Author: freb97

bun.lock

@@ -31,6 +31,7 @@ const { data: logo } = await useStorefrontData('logo', `#graphql
             class="h-5 w-auto hue-rotate-300"
             width="50"
             height="22"
+            loading="eager"
         />
 
         Nuxt Shopify

template/app/components/Logo.vue

@@ -43,6 +43,7 @@ const { data: collections } = await useStorefrontData(`collections-${locale.valu
                 :src="collection.image.url"
                 :alt="collection.image.altText || collection.title"
                 class="rounded-md object-cover aspect-square"
+                sizes="xs:100vw sm:50vw lg:33vw xl:33vw"
                 :width="600"
                 :height="600"
             />

template/app/components/collection/Grid.vue

@@ -124,10 +124,11 @@ watch(() => collection.value?.products.pageInfo, async () => await nextTick().th
 
             <div class="grid w-full grid-cols-1 gap-16 md:grid-cols-2 xl:grid-cols-3">
                 <ProductCard
-                    v-for="product in products"
+                    v-for="(product, index) in products"
                     :key="product.id"
                     :product="product"
                     class="pb-14 border-b border-b-default"
+                    :loading="index === 0 ? 'eager' : 'lazy'"
                     carousel
                 />
             </div>

template/app/components/collection/Products.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
     sortKey?: string
     reverse?: boolean
     filters?: ProductFilter[]
+    loading?: 'eager' | 'lazy'
 }>()
 
 const { language, country } = useLocalization()
@@ -75,13 +76,16 @@ const { data: products } = await useStorefrontData(key, `#graphql
 
 <template>
     <UCarousel
-        v-slot="{ item: product }"
+        v-slot="{ item: product, index }"
         :items="products"
         class="w-full mb-6"
         :ui="{ item: 'md:basis-1/2 lg:basis-1/3' }"
         arrows
         loop
     >
-        <ProductCard :product="product" />
+        <ProductCard
+            :product="product"
+            :loading="index === 0 ? props.loading : 'lazy'"
+        />
     </UCarousel>
 </template>

template/app/components/collection/Slider.vue

@@ -4,6 +4,7 @@ import type { ProductFieldsFragment } from '#shopify/storefront'
 const props = defineProps<{
     product: ProductFieldsFragment
     carousel?: boolean
+    loading?: 'eager' | 'lazy'
 }>()
 
 const localePath = useLocalePath()
@@ -27,7 +28,7 @@ const variant = ref(variants.value[0])
         <div class="group relative rounded-md overflow-hidden mb-4">
             <UCarousel
                 v-if="carousel && images.length > 1"
-                v-slot="{ item }"
+                v-slot="{ item, index }"
                 :items="images"
                 :ui="{
                     prev: 'left-3! transition-opacity duration-150 lg:opacity-0 lg:group-hover:opacity-100',
@@ -37,15 +38,21 @@ const variant = ref(variants.value[0])
                 loop
             >
                 <NuxtLink :to="url">
-                    <ProductImage :image="item" />
+                    <ProductImage
+                        :image="item"
+                        :loading="index === 0 ? props.loading : 'lazy'"
+                    />
                 </NuxtLink>
             </UCarousel>
 
             <NuxtLink
                 v-else
                 :to="url"
             >
-                <ProductImage :image="images?.[0] ?? undefined" />
+                <ProductImage
+                    :image="images?.[0] ?? undefined"
+                    :loading="props.loading"
+                />
 
                 <ProductImage
                     v-if="images?.[1]"

template/app/components/product/Card.vue

@@ -32,7 +32,7 @@ watch(() => props.selectedVariant, () => carousel.value?.emblaApi?.scrollTo(0))
         <UCarousel
             v-if="sliderImages.length > 1"
             ref="carousel"
-            v-slot="{ item }"
+            v-slot="{ item, index }"
             :items="sliderImages"
             :ui="{
                 prev: 'left-3!',
@@ -42,13 +42,17 @@ watch(() => props.selectedVariant, () => carousel.value?.emblaApi?.scrollTo(0))
             arrows
             loop
         >
-            <ProductImage :image="item" />
+            <ProductImage
+                :image="item"
+                :loading="index === 0 ? 'eager' : 'lazy'"
+            />
         </UCarousel>
 
         <ProductImage
             v-else
             :image="sliderImages[0]"
             class="mb-6 lg:mb-8"
+            loading="eager"
         />
 
         <div

template/app/components/product/Gallery.vue

@@ -4,6 +4,7 @@ import type { Image } from '#shopify/storefront'
 const props = defineProps<{
     image?: Partial<Image>
     title?: string
+    loading?: 'eager' | 'lazy'
 }>()
 
 const emits = defineEmits<{
@@ -36,6 +37,7 @@ const handleImageLoad = () => requestAnimationFrame(() => {
             :height="props.image?.height ?? undefined"
             sizes="xs:100vw md:50vw lg:40vw xl:25vw"
             class="aspect-square max-w-full max-h-full animate-pop-up select-none object-contain"
+            :loading="props.loading ?? 'lazy'"
             placeholder
             @load="handleImageLoad"
         />

template/app/components/product/Image.vue

@@ -25,6 +25,7 @@ useSeoMeta({
             <CollectionSlider
                 handle="featured"
                 :first="12"
+                loading="eager"
             />
         </div>
 

template/app/pages/index.vue

@@ -2,6 +2,7 @@
 export default defineNuxtConfig({
     modules: [
         '../src/module',
+        '@nuxtjs/critters',
         '@nuxtjs/i18n',
         '@nuxt/image',
         '@nuxt/ui',