feat: 오프스크린 이미지 지연을 위한 lazy loading 적용

solbijae · solbijae · commit 02213fcf5540 · 2025-06-03T15:44:55.000+09:00
diff --git a/index.html b/index.html
@@ -23,7 +23,6 @@
         <script type="text/javascript" charset="UTF-8">
             cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"light","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"Performance Course"});
         </script>
-              
     </head>
 
     <body>
@@ -51,7 +50,7 @@
                         <li class="menu-icon">
                             <picture>
                                 <source srcset="images/menu_icon.webp" type="image/webp">
-                                <img src="images/menu_icon.png" alt="menu icon">
+                                <img src="images/menu_icon.png" alt="menu icon" loading="lazy">
                             </picture>
                         </li>
                     </ul>
@@ -63,18 +62,17 @@
 
             <picture>
                 <source srcset="images/Hero_Desktop.webp" type="image/webp">
-                <img class="desktop" src="images/Hero_Desktop.jpg">
+                <img class="desktop" src="images/Hero_Desktop.jpg" loading="lazy">
             </picture>
             <picture>
                 <source srcset="images/Hero_Mobile.webp" type="image/webp">
-                <img class="mobile" src="images/Hero_Mobile.jpg">
+                <img class="mobile" src="images/Hero_Mobile.jpg" loading="lazy">
             </picture>
             <picture>
                 <source srcset="images/Hero_Tablet.webp" type="image/webp">
-                <img class="tablet" src="images/Hero_Tablet.jpg">
+                <img class="tablet" src="images/Hero_Tablet.jpg" loading="lazy">
             </picture>
 
-           
             <div class="hero-content">
                 <div class="container">
                     <h1>Discover our line of VR Headsets</h1>
@@ -100,7 +98,7 @@ <h1>Best Sellers</h1>
                         <div class="product-picture">
                             <picture>
                                 <source srcset="images/vr1.webp" type="image/webp">
-                                <img src="images/vr1.jpg" alt="product: Penom Case">
+                                <img src="images/vr1.jpg" alt="product: Penom Case" loading="lazy">
                             </picture>
                         </div>
                         <div class="product-info">
@@ -117,7 +115,7 @@ <h3 class="price">
                         <div class="product-picture">
                             <picture>
                                 <source srcset="images/vr2.webp" type="image/webp">
-                                <img src="images/vr2.jpg" alt="product: Noise Cancelling Headphone">
+                                <img src="images/vr2.jpg" alt="product: Noise Cancelling Headphone" loading="lazy">
                             </picture>
                         </div>
                         <div class="product-info">
@@ -134,7 +132,7 @@ <h3 class="price">
                         <div class="product-picture">
                             <picture>
                                 <source srcset="images/vr3.webp" type="image/webp">
-                                <img src="images/vr3.jpg" alt="product: Canon Digital SLR EOS Rebel T6">
+                                <img src="images/vr3.jpg" alt="product: Canon Digital SLR EOS Rebel T6" loading="lazy">
                             </picture>
                         </div>
                         <div class="product-info">
@@ -217,9 +215,7 @@ <h3>Newsletter Signup</h3>
             </div>
         </footer>
 
-
-         <a href="#" id="open_preferences_center">Update cookies preferences</a>
- 
+        <a href="#" id="open_preferences_center">Update cookies preferences</a>
 
         <script type="text/javascript" src="/js/main.js"></script>
         <script type="text/javascript" src="/js/products.js"></script>
