perf(react-ecom): reduce cls

mesutcifci · Jan 23, 2024 · 7db0376 · 7db0376
1 parent 7f10e78
commit 7db0376
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/react-e-commerce-app/index.html b/react-e-commerce-app/index.html
@@ -22,7 +22,7 @@
 
     <link
       rel="preload"
-      href="https://firebasestorage.googleapis.com/v0/b/react-e-commerce-f354a.appspot.com/o/main-carousel%2Fmobile%2Fimage1.webp?alt=media&token=b3dac257-d205-4fea-b291-a668ca2cee82"
+      href="https://firebasestorage.googleapis.com/v0/b/react-e-commerce-f354a.appspot.com/o/main-carousel%2Fimage-1-xs.webp?alt=media&token=39e0fdc0-b233-434e-b22f-1f971e7c5d2d"
       as="image"
     />
 

diff --git a/react-e-commerce-app/src/components/Carousel/index.tsx b/react-e-commerce-app/src/components/Carousel/index.tsx
@@ -114,6 +114,7 @@ const Carousel = () => {
         position: "relative",
         overflow: "hidden",
         height: sliderWrapperHeight + "px",
+        minHeight: "23.4375rem",
       }}
     >
       {data.map((item, index) => {
@@ -249,7 +250,13 @@ const Carousel = () => {
               <source media="(min-width: 1024px)" srcSet={item.src.lg} />
               <source media="(min-width: 768px)" srcSet={item.src.md} />
               <source media="(min-width: 425px)" srcSet={item.src.sm} />
-              <img src={item.src.xs} onLoad={updateSliderWrapperHeight} />
+              <img
+                src={item.src.xs}
+                onLoad={updateSliderWrapperHeight}
+                {...(index > 0 && { loading: "lazy" })}
+                width={375}
+                height={442}
+              />
             </picture>
             <Box
               sx={{

diff --git a/react-e-commerce-app/src/components/WhyChooseUs/index.tsx b/react-e-commerce-app/src/components/WhyChooseUs/index.tsx
@@ -63,6 +63,7 @@ const WhyChooseUs = () => {
         alignItems: "center",
         rowGap: "1.875rem",
         marginTop: "1.875rem",
+        minHeight: { xs: "40.625rem", lg: "24.0625rem" },
       }}
     >
       <Box component="header" sx={{ width: "100%" }}>