From 4e36eb90ccd047ff019408e1a3e689381ce909e0 Mon Sep 17 00:00:00 2001
From: Nathan Booker <nathan.booker@bigcommerce.com>
Date: Sun, 23 Sep 2018 16:49:43 -0700
Subject: [PATCH] STRF-5474 Improve performance of first carousel slide

-rel=preload tag for first carousel slide (if present)
-don't lazyload first slide
---
 CHANGELOG.md                       | 1 +
 templates/components/carousel.html | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57df4cd8d1..806a3094cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added hidden field for checkboxes with a "No" value. [#1355](https://github.com/bigcommerce/cornerstone/pull/1355)
 - Stop lazyloading store logo [#1357](https://github.com/bigcommerce/cornerstone/pull/1357)
 - Update lazysizes plugin to 4.1.2 [#1358](https://github.com/bigcommerce/cornerstone/pull/1358)
+- Improve performance of first carousel slide [#1356](https://github.com/bigcommerce/cornerstone/pull/1356)
 
 ## 2.4.0 (2018-09-14)
 - Fix encoding issues on Account Signup Form ("&#039;" characters showing in country name)[#1341] (https://github.com/bigcommerce/cornerstone/pull/1341)
diff --git a/templates/components/carousel.html b/templates/components/carousel.html
index 6d79720f0f..3c271312b6 100644
--- a/templates/components/carousel.html
+++ b/templates/components/carousel.html
@@ -10,8 +10,8 @@
     {{#each carousel.slides}}
     <a href="{{url}}">
         <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}stretch{{/if}} {{#if @first}}heroCarousel-slide--first{{/if}}">
-            <div class="heroCarousel-image-wrapper" {{#if image_height}}{{#if image_width}}style="height: {{multiply (divide image_height image_width) 100}}vw"{{/if}}{{/if}}>
-                <img class="heroCarousel-image" data-lazy="{{image}}" alt="{{alt_text}}" title="{{alt_text}}"
+            <div class="heroCarousel-image-wrapper" {{#and image_height image_width}}style="height: {{multiply (divide image_height image_width) 100}}vw"{{/and}}>
+            <img class="heroCarousel-image" {{#if @first}}src{{else}}data-lazy{{/if}}="{{image}}" alt="{{alt_text}}" title="{{alt_text}}"
                 {{#if image_width}}width="{{image_width}}"{{/if}} {{#if image_height}}height="{{image_height}}"{{/if}} />
             </div>
             {{#if heading}}