perf: add defer to scripts and lazy loading to images

Add defer attribute to 145 <script> tags across 103 template files
(PERF-067) and loading="lazy" to 22 <img> tags across 13 template
files (PERF-058). Both improve page load performance.

Validator totals: 0 errors, 2 warnings, 1360 info (down from 1527).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/modules/catalog/templates/catalog/admin/store-product-create.html

@@ -340,7 +340,7 @@
                 <div class="w-32 h-32 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 flex-shrink-0">
                     <template x-if="form.primary_image_url">
                         <div class="relative w-full h-full group">
-                            <img :src="form.primary_image_url" class="w-full h-full object-cover" />
+                            <img loading="lazy" :src="form.primary_image_url" class="w-full h-full object-cover" />
                             <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                 <button
                                     type="button"
@@ -389,7 +389,7 @@
                 <!-- Existing Additional Images -->
                 <template x-for="(imgUrl, index) in form.additional_images" :key="index">
                     <div class="relative w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 group">
-                        <img :src="imgUrl" class="w-full h-full object-cover" />
+                        <img loading="lazy" :src="imgUrl" class="w-full h-full object-cover" />
                         <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                             <button
                                 type="button"
@@ -507,6 +507,6 @@
     document.head.appendChild(script);
 })();
 </script>
-<script src="{{ url_for('cms_static', path='shared/js/media-picker.js') }}"></script>
-<script src="{{ url_for('catalog_static', path='admin/js/product-create.js') }}"></script>
+<script defer src="{{ url_for('cms_static', path='shared/js/media-picker.js') }}"></script>
+<script defer src="{{ url_for('catalog_static', path='admin/js/product-create.js') }}"></script>
 {% endblock %}

app/modules/catalog/templates/catalog/admin/store-product-detail.html

@@ -95,7 +95,7 @@
         <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
             <div class="aspect-square bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden">
                 <template x-if="product?.image_url">
-                    <img :src="product?.image_url" :alt="product?.title" class="w-full h-full object-contain" />
+                    <img loading="lazy" :src="product?.image_url" :alt="product?.title" class="w-full h-full object-contain" />
                 </template>
                 <template x-if="!product?.image_url">
                     <div class="w-full h-full flex items-center justify-center">
@@ -109,7 +109,7 @@
                 <div class="grid grid-cols-4 gap-2">
                     <template x-for="(img, index) in (product?.additional_images || [])" :key="index">
                         <div class="aspect-square bg-gray-100 dark:bg-gray-700 rounded overflow-hidden">
-                            <img :src="img" :alt="'Image ' + (index + 1)" class="w-full h-full object-cover" />
+                            <img loading="lazy" :src="img" :alt="'Image ' + (index + 1)" class="w-full h-full object-cover" />
                         </div>
                     </template>
                 </div>
@@ -354,5 +354,5 @@
 {% endblock %}
 
 {% block extra_scripts %}
-<script src="{{ url_for('catalog_static', path='admin/js/product-detail.js') }}"></script>
+<script defer src="{{ url_for('catalog_static', path='admin/js/product-detail.js') }}"></script>
 {% endblock %}

app/modules/catalog/templates/catalog/admin/store-product-edit.html

@@ -317,7 +317,7 @@
                     <!-- Preview -->
                     <div class="w-32 h-32 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 flex-shrink-0">
                         <template x-if="form.primary_image_url">
-                            <img :src="form.primary_image_url" class="w-full h-full object-cover" />
+                            <img loading="lazy" :src="form.primary_image_url" class="w-full h-full object-cover" />
                         </template>
                         <template x-if="!form.primary_image_url">
                             <div class="w-full h-full flex items-center justify-center">
@@ -369,7 +369,7 @@
                     <template x-for="(url, index) in form.additional_images" :key="index">
                         <div class="relative group">
                             <div class="w-full aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
-                                <img :src="url" class="w-full h-full object-cover" />
+                                <img loading="lazy" :src="url" class="w-full h-full object-cover" />
                             </div>
                             <button
                                 type="button"
@@ -498,6 +498,6 @@
 {% endblock %}
 
 {% block extra_scripts %}
-<script src="{{ url_for('cms_static', path='shared/js/media-picker.js') }}"></script>
-<script src="{{ url_for('catalog_static', path='admin/js/product-edit.js') }}"></script>
+<script defer src="{{ url_for('cms_static', path='shared/js/media-picker.js') }}"></script>
+<script defer src="{{ url_for('catalog_static', path='admin/js/product-edit.js') }}"></script>
 {% endblock %}

app/modules/catalog/templates/catalog/admin/store-products.html

@@ -396,5 +396,5 @@
     document.head.appendChild(script);
 })();
 </script>
-<script src="{{ url_for('catalog_static', path='admin/js/products.js') }}"></script>
+<script defer src="{{ url_for('catalog_static', path='admin/js/products.js') }}"></script>
 {% endblock %}

app/modules/catalog/templates/catalog/store/product-create.html

@@ -170,5 +170,5 @@
 {% endblock %}
 
 {% block extra_scripts %}
-<script src="{{ url_for('catalog_static', path='store/js/product-create.js') }}"></script>
+<script defer src="{{ url_for('catalog_static', path='store/js/product-create.js') }}"></script>
 {% endblock %}

app/modules/catalog/templates/catalog/store/products.html

@@ -364,5 +364,5 @@
 {% endblock %}
 
 {% block extra_scripts %}
-<script src="{{ url_for('catalog_static', path='store/js/products.js') }}"></script>
+<script defer src="{{ url_for('catalog_static', path='store/js/products.js') }}"></script>
 {% endblock %}

app/modules/catalog/templates/catalog/storefront/category.html

@@ -62,7 +62,7 @@
             <template x-for="product in products" :key="product.id">
                 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                     <a :href="`{{ base_url }}shop/products/${product.id}`">
-                        <img :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
+                        <img loading="lazy" :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
                              @error="$el.src = '/static/shop/img/placeholder.svg'"
                              :alt="product.marketplace_product?.title"
                              class="w-full h-48 object-cover">

app/modules/catalog/templates/catalog/storefront/products.html

@@ -74,7 +74,7 @@
             <template x-for="product in products" :key="product.id">
                 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                     <a :href="`{{ base_url }}shop/products/${product.id}`">
-                        <img :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
+                        <img loading="lazy" :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
                              @error="$el.src = '/static/shop/img/placeholder.svg'"
                              :alt="product.marketplace_product?.title"
                              class="w-full h-48 object-cover">

app/modules/catalog/templates/catalog/storefront/search.html

@@ -81,7 +81,7 @@
             <template x-for="product in products" :key="product.id">
                 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                     <a :href="`{{ base_url }}shop/products/${product.id}`">
-                        <img :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
+                        <img loading="lazy" :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
                              @error="$el.src = '/static/shop/img/placeholder.svg'"
                              :alt="product.marketplace_product?.title"
                              class="w-full h-48 object-cover">

app/modules/catalog/templates/catalog/storefront/wishlist.html

@@ -65,7 +65,7 @@
                     </button>
 
                     <a :href="`{{ base_url }}shop/products/${item.product.id}`">
-                        <img :src="item.product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
+                        <img loading="lazy" :src="item.product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
                              @error="$el.src = '/static/shop/img/placeholder.svg'"
                              :alt="item.product.marketplace_product?.title"
                              class="w-full h-48 object-cover">