From 2417d58a1b1b300089df4ff069f7d12d105f77b2 Mon Sep 17 00:00:00 2001
From: Nathan Booker <nathan.booker@bigcommerce.com>
Date: Tue, 30 Nov 2021 10:30:07 -0600
Subject: [PATCH 1/3] Remove lazysizes and use browser-default lazyloading

---
 .../components/common/responsive-img.html     | 49 +++++--------------
 1 file changed, 12 insertions(+), 37 deletions(-)

diff --git a/templates/components/common/responsive-img.html b/templates/components/common/responsive-img.html
index eb6f40289f..79b4656e52 100644
--- a/templates/components/common/responsive-img.html
+++ b/templates/components/common/responsive-img.html
@@ -1,16 +1,7 @@
 {{!--
-This file implements the lazysizes srcset pattern (as seen on
-https://github.com/aFarkas/lazysizes#modern-transparent-srcset-pattern) for maximum performance on modern browsers
-and reasonable compatibility with legacy browsers.
-
 There are a few important arguments to know about when using this component:
 `lazyload`:
-    - If set to 'lazyload+lqip', will load a low-res image which will be replaced by lazysizes - ensuring that SOME
-    content is shown immediately on page load. Without LQIP, a transparent gif will be used instead, which reduces
-    the number of requests needed to load the page, making it even faster.
-    - If set to 'lazyload', the browser will not load the full-size image at first, instead the lazysizes plugin will
-        load it progressively after page load. This improves the load speed of the page, but it should be disabled for
-        high-priority above-the-fold images.
+    - If set to 'lazyload', the browser will make a decision about when to load the image based on whether its proximity to the viewport.
     - If set to 'disabled', will not attempt to lazyload the image and instead tell the browser to load it immediately.
         Use this for high-priority images that are above the fold.
 
@@ -30,32 +21,16 @@
     path in the theme config. If a default image is not provided, you'll get an image tag with no image if the primary
     image is undefined.
 
-`lqip_size`:
-    If you want to specify a particular size for the LQIP image, you can do so with this argument. A default of 80
-    pixels wide will be used otherwise. This argument has no effect if the lazyload mode is not "lazyload+lqip".
-
---}}
-<img {{#if image}}{{!-- Get the default image for legacy browsers that do not support srcset
---}}src="{{getImageSrcset image 1x=(default fallback_size '160w')}}" alt="{{image.alt}}" title="{{image.alt}}" {{!--
-  Allow lazysizes to generate the 'sizes' attribute automatically --}}data-sizes="auto"
-  {{#unless lazyload '==' 'disabled'}}
-    {{#if lazyload '==' 'lazyload+lqip'}}
-    {{!-- If we want a LQIP, include it as the default srcset (will be overwritten by lazysizes) --}}
-    srcset="{{getImageSrcset image 1x=(default lqip_size '80w')}}"
-    {{else}}
-      {{!-- If we don't want a LQIP, use a 1px transparent gif for the stand-in image
-            This requires no additional network request, so it's fast --}}
-    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-    {{/if}}
-{{/unless}}
-{{!-- If lazyloading is disabled, just use "srcset". If it is not disabled, use "data-srcset" so lazysizes will use
-      this after page load --}}
-{{!--
-Generate the srcset string using the default sizes defined in the helper. This will allow the browser to
-pick the best-sized image based on its own understanding of how it will render the page.
 --}}
-{{#unless lazyload '==' 'disabled'}}data-{{/unless}}srcset="{{getImageSrcset image use_default_sizes=true }}"
-{{else if default_image}}src="{{cdn default_image}}" alt="{{lang 'products.card_default_image_alt'}}"{{/if}}
-class="{{#unless lazyload '==' 'disabled'}}lazyload{{/unless}}{{#if class}} {{class}}{{/if}}"
-{{#if lazyload '==' 'lazyload'}}loading="lazy"{{/if}}
+<img {{#if image}}{{!-- Get the default image for legacy browsers that do not support srcset --}}
+       src="{{getImageSrcset image 1x=(default fallback_size '160w')}}" alt="{{image.alt}}" title="{{image.alt}}"
+     {{!--
+       Generate the srcset string using the default sizes defined in the helper. This will allow the browser to
+       pick the best-sized image based on its own understanding of how it will render the page.
+      --}}
+       srcset="{{getImageSrcset image use_default_sizes=true }}"
+     {{else if default_image}}src="{{cdn default_image}}" alt="{{lang 'products.card_default_image_alt'}}"
+     {{/if}}
+     class="{{#if class}}{{class}}{{/if}}"
+{{#unless lazyload '==' 'disabled'}}loading="lazy"{{/unless}}
 {{otherAttributes}} />

From aabbc608df00975b62b7695519c715a603df4976 Mon Sep 17 00:00:00 2001
From: Nathan Booker <nathan.booker@bigcommerce.com>
Date: Tue, 30 Nov 2021 11:24:54 -0600
Subject: [PATCH 2/3] Remove lazysizes JS

---
 package-lock.json          | 5 -----
 package.json               | 1 -
 templates/layout/base.html | 1 -
 webpack.common.js          | 2 --
 4 files changed, 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b5b06e08ef..50d45d854d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11928,11 +11928,6 @@
         "package-json": "^6.3.0"
       }
     },
-    "lazysizes": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.2.2.tgz",
-      "integrity": "sha512-fYgOv1Y35M86/7qyAdPPqoOhuyZrjxEAPxqwToRY2bO/PoBJ4lSqZYuZoavNp6eyuLpIAdHodpsPfj2Lkt86FQ=="
-    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
diff --git a/package.json b/package.json
index 7335981432..fa3097817b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
     "foundation-sites": "^5.5.3",
     "jquery": "^3.5.1",
     "jstree": "^3.3.12",
-    "lazysizes": "5.2.2",
     "lodash": "^4.17.21",
     "nanobar": "^0.4.2",
     "nod-validate": "^2.0.12",
diff --git a/templates/layout/base.html b/templates/layout/base.html
index 9ce3d896f1..aa9edc0416 100644
--- a/templates/layout/base.html
+++ b/templates/layout/base.html
@@ -24,7 +24,6 @@
             window.lazySizesConfig = window.lazySizesConfig || {};
             window.lazySizesConfig.loadMode = 1;
         </script>
-        <script async src="{{cdn 'assets/dist/theme-bundle.head_async.js'}}"></script>
 
         <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
 
diff --git a/webpack.common.js b/webpack.common.js
index 7603dff18b..02da05b117 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -10,7 +10,6 @@ module.exports = {
     context: __dirname,
     entry: {
         main: './assets/js/app.js',
-        head_async: ['lazysizes'],
         polyfills: './assets/js/polyfills.js',
     },
     module: {
@@ -75,7 +74,6 @@ module.exports = {
         alias: {
             jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js'),
             jstree: path.resolve(__dirname, 'node_modules/jstree/dist/jstree.min.js'),
-            lazysizes: path.resolve(__dirname, 'node_modules/lazysizes/lazysizes.min.js'),
             nanobar: path.resolve(__dirname, 'node_modules/nanobar/nanobar.min.js'),
             'slick-carousel': path.resolve(__dirname, 'node_modules/slick-carousel/slick/slick.min.js'),
             'svg-injector': path.resolve(__dirname, 'node_modules/svg-injector/dist/svg-injector.min.js'),

From cfb75d21280effa12eee3795146b82e867ea1f59 Mon Sep 17 00:00:00 2001
From: Nathan Booker <nathan.booker@bigcommerce.com>
Date: Wed, 15 Dec 2021 16:55:38 -0600
Subject: [PATCH 3/3] Update sizes attribute for each usage of responsive-img

---
 templates/components/account/order-contents.html        | 1 +
 templates/components/account/orders-list.html           | 1 +
 templates/components/account/returns-list.html          | 1 +
 templates/components/blog/post.html                     | 1 +
 templates/components/carousel.html                      | 2 ++
 templates/components/cart/content.html                  | 1 +
 templates/components/cart/preview.html                  | 1 +
 templates/components/common/cart-preview.html           | 1 +
 templates/components/common/responsive-img.html         | 3 ++-
 templates/components/products/card.html                 | 1 +
 templates/components/products/list-item.html            | 1 +
 templates/components/products/modals/writeReview.html   | 1 +
 templates/components/products/options/product-list.html | 3 ++-
 templates/components/products/product-view.html         | 4 +++-
 templates/pages/brand.html                              | 1 +
 templates/pages/brands.html                             | 2 ++
 templates/pages/category.html                           | 1 +
 templates/pages/compare.html                            | 1 +
 18 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/templates/components/account/order-contents.html b/templates/components/account/order-contents.html
index f2b452365f..7e8e7ff592 100644
--- a/templates/components/account/order-contents.html
+++ b/templates/components/account/order-contents.html
@@ -33,6 +33,7 @@ <h5 class="account-listShipping-title">{{lang 'account.orders.details.ship_to_mu
                         fallback_size=../theme_settings.productthumb_size
                         lazyload=../theme_settings.lazyload_mode
                         default_image=../theme_settings.default_image_product
+                        sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                     }}
                 {{/if}}
                 {{#unless refunded}}
diff --git a/templates/components/account/orders-list.html b/templates/components/account/orders-list.html
index 71193a0c65..371f000c76 100644
--- a/templates/components/account/orders-list.html
+++ b/templates/components/account/orders-list.html
@@ -17,6 +17,7 @@ <h3 class="account-heading">{{lang 'account.orders.heading' }}</h3>
                         fallback_size=../theme_settings.productthumb_size
                         lazyload=../theme_settings.lazyload_mode
                         default_image=../theme_settings.default_image_product
+                        sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                     }}
                 {{/if}}
             </div>
diff --git a/templates/components/account/returns-list.html b/templates/components/account/returns-list.html
index 145d1cd952..e185921557 100644
--- a/templates/components/account/returns-list.html
+++ b/templates/components/account/returns-list.html
@@ -9,6 +9,7 @@ <h3 class="account-heading">{{lang 'account.returns.heading' }}</h3>
                     image=product.image
                     fallback_size=../theme_settings.productthumb_size
                     lazyload=../theme_settings.lazyload_mode
+                    sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                 }}
             </div>
             <div class="account-product-body">
diff --git a/templates/components/blog/post.html b/templates/components/blog/post.html
index 885e5925a5..e59fba4d66 100644
--- a/templates/components/blog/post.html
+++ b/templates/components/blog/post.html
@@ -7,6 +7,7 @@
                         image=post.thumbnail
                         fallback_size=theme_settings.blog_size
                         lazyload=theme_settings.lazyload_mode
+                        sizes=(concat (first (split theme_settings.blog_size 'x')) 'px')
                     }}
                 </a>
             </figure>
diff --git a/templates/components/carousel.html b/templates/components/carousel.html
index a34da1a0d3..62562d23a4 100644
--- a/templates/components/carousel.html
+++ b/templates/components/carousel.html
@@ -27,6 +27,7 @@
                     class="heroCarousel-image"
                     fallback_size='1280w'
                     lazyload='disabled'
+                    sizes='(max-width: 640px) 640px, (max-width: 1280px) 1280px, (max-width: 1920px) 1920px, 2560px'
                 }}
             {{else}}
                 {{> components/common/responsive-img
@@ -34,6 +35,7 @@
                     class="heroCarousel-image"
                     fallback_size='1280w'
                     lazyload='lazyload'
+                    sizes='(max-width: 640px) 640px, (max-width: 1280px) 1280px, (max-width: 1920px) 1920px, 2560px'
                 }}
             {{/if}}
             {{#if button_text}}
diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html
index 772f3f3012..c05591c2e1 100644
--- a/templates/components/cart/content.html
+++ b/templates/components/cart/content.html
@@ -25,6 +25,7 @@
                             fallback_size=../theme_settings.productthumb_size
                             lazyload="lazyload"
                             default_image=../theme_settings.default_image_product
+                            sizes='80px'
                         }}
                     {{/if}}
                 </td>
diff --git a/templates/components/cart/preview.html b/templates/components/cart/preview.html
index 82430c6435..c0b4874b44 100644
--- a/templates/components/cart/preview.html
+++ b/templates/components/cart/preview.html
@@ -61,6 +61,7 @@ <h1 class="modal-header-title">
                             fallback_size=../theme_settings.product_size
                             lazyload=../theme_settings.lazyload_mode
                             default_image=../theme_settings.default_image_product
+                            sizes='(min-width: 800px) 80px, 640px'
                         }}
                     </div>
                 </figure>
diff --git a/templates/components/common/cart-preview.html b/templates/components/common/cart-preview.html
index 3d416e3a64..9d84a97206 100644
--- a/templates/components/common/cart-preview.html
+++ b/templates/components/common/cart-preview.html
@@ -17,6 +17,7 @@
                                 fallback_size=../theme_settings.productthumb_size
                                 lazyload=../theme_settings.lazyload_mode
                                 default_image=../theme_settings.default_image_product
+                                sizes="160px"
                             }}
                         {{/if}}
                     </div>
diff --git a/templates/components/common/responsive-img.html b/templates/components/common/responsive-img.html
index 79b4656e52..7da11a504f 100644
--- a/templates/components/common/responsive-img.html
+++ b/templates/components/common/responsive-img.html
@@ -31,6 +31,7 @@
        srcset="{{getImageSrcset image use_default_sizes=true }}"
      {{else if default_image}}src="{{cdn default_image}}" alt="{{lang 'products.card_default_image_alt'}}"
      {{/if}}
-     class="{{#if class}}{{class}}{{/if}}"
+     {{#if class}}class="{{class}}"{{/if}}
+     {{#if sizes}}sizes="{{sizes}}"{{/if}}
 {{#unless lazyload '==' 'disabled'}}loading="lazy"{{/unless}}
 {{otherAttributes}} />
diff --git a/templates/components/products/card.html b/templates/components/products/card.html
index ffb35527cc..e64469b40f 100644
--- a/templates/components/products/card.html
+++ b/templates/components/products/card.html
@@ -72,6 +72,7 @@
                     fallback_size=theme_settings.productgallery_size
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
+                    sizes='320px'
                 }}
             </div>
         </a>
diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
index 7a62bdbc09..3f6df39c47 100644
--- a/templates/components/products/list-item.html
+++ b/templates/components/products/list-item.html
@@ -57,6 +57,7 @@
             fallback_size=theme_settings.productgallery_size
             lazyload=theme_settings.lazyload_mode
             default_image=theme_settings.default_image_product
+            sizes='320px'
         }}
         </a>
         {{#unless hide_product_quick_view}}
diff --git a/templates/components/products/modals/writeReview.html b/templates/components/products/modals/writeReview.html
index 8f428d662c..e1115ace70 100644
--- a/templates/components/products/modals/writeReview.html
+++ b/templates/components/products/modals/writeReview.html
@@ -15,6 +15,7 @@ <h2 class="modal-header-title">{{lang 'products.reviews.write_a_review'}}</h2>
                     fallback_size=theme_settings.product_size
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
+                    sizes=(concat (first (split theme_settings.product_size 'x')) 'px')
                 }}
             </div>
             <h6 class="product-brand">{{ product.brand.name }}</h6>
diff --git a/templates/components/products/options/product-list.html b/templates/components/products/options/product-list.html
index e963b325ba..8349e74bf2 100644
--- a/templates/components/products/options/product-list.html
+++ b/templates/components/products/options/product-list.html
@@ -26,7 +26,8 @@
                             {{> components/common/responsive-img
                                 image=image
                                 class="productOptions-list-item-image"
-                                lazyload='lazyload+lqip'
+                                lazyload='lazyload'
+                                sizes='80px'
                             }}
                         </figure>
                     {{/if}}
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
index 241fa75652..eac5fb6329 100644
--- a/templates/components/products/product-view.html
+++ b/templates/components/products/product-view.html
@@ -56,6 +56,7 @@
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
                     otherAttributes="data-main-image"
+                    sizes=(concat (first (split theme_settings.product_size 'x')) 'px')
                 }}
                 {{!-- Remove the surrounding a-element if there is no main image. --}}
                 {{#if product.main_image}}
@@ -85,7 +86,8 @@
                         image=this
                         fallback_size=../theme_settings.productview_thumb_size
                         lazyload=../theme_settings.lazyload_mode
-                    }}
+                        sizes=(concat (first (split ../theme_settings.productview_thumb_size 'x')) 'px')
+                        }}
                     </a>
                 </li>
             {{/each}}
diff --git a/templates/pages/brand.html b/templates/pages/brand.html
index 99b4af4160..cba8abf4b9 100644
--- a/templates/pages/brand.html
+++ b/templates/pages/brand.html
@@ -21,6 +21,7 @@
             image=brand.image
             fallback_size=theme_settings.thumb_size
             lazyload='disabled'
+            sizes=(concat (first (split theme_settings.thumb_size 'x')) 'px')
         }}
     </div>
 {{/if}}
diff --git a/templates/pages/brands.html b/templates/pages/brands.html
index 34e4cb51b1..8046489e44 100644
--- a/templates/pages/brands.html
+++ b/templates/pages/brands.html
@@ -22,6 +22,8 @@ <h1 class="page-heading">{{lang 'brand.label'}}</h1>
                                     fallback_size=../theme_settings.brand_size
                                     lazyload=../theme_settings.lazyload_mode
                                     default_image=../theme_settings.default_image_brand
+                                    sizes='320px'
+                                    sizes=(concat (first (split ../theme_settings.brand_size 'x')) 'px')
                                 }}
                             </div>
                         </a>
diff --git a/templates/pages/category.html b/templates/pages/category.html
index 570a093b9e..9614f28bb1 100644
--- a/templates/pages/category.html
+++ b/templates/pages/category.html
@@ -24,6 +24,7 @@
         fallback_size=theme_settings.zoom_size
         lazyload=theme_settings.lazyload_mode
         class="category-header-image"
+        sizes=(concat (first (split ../theme_settings.zoom_size 'x')) 'px')
     }}
 {{/if}}
 {{#unless theme_settings.hide_category_page_heading }}
diff --git a/templates/pages/compare.html b/templates/pages/compare.html
index b6edecf213..d641776a8e 100644
--- a/templates/pages/compare.html
+++ b/templates/pages/compare.html
@@ -21,6 +21,7 @@ <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</
                                         fallback_size=../theme_settings.product_size
                                         lazyload=../theme_settings.lazyload_mode
                                         default_image=../theme_settings.default_image_product
+                                        sizes=(concat (first (split ../theme_settings.product_size 'x')) 'px')
                                     }}
                                 </div>
                             </a>