feat: 렌더링 차단 리소스 제거

dhp94d · dhp94d · commit 7a1c3f7c55ef · 2024-08-15T21:45:51.000+09:00
diff --git a/README.md b/README.md
@@ -19,7 +19,8 @@
       - [2.3.2 aspect-ratio 적용](#232-aspect-ratio-적용)
       - [2.3.3 이미지 크기 최적화](#233-이미지-크기-최적화)
       - [2.3.4 이미지 lazy-load 적용](#234-이미지-lazy-load-적용)
-      - [2.3.5 개선 결과](#235-개선-결과)
+      - [2.3.5 개선 결과](#235-개선-결과)
+    - [2.4 렌더링 차단 리소스 제거하기](#24-렌더링-차단-리소스-제거하기)
 
 ---
 
@@ -94,6 +95,8 @@ requestIdleCallback(heavyOperationAsync, { timeout: 3000 });
 main.js 코드 365 -> 275
 products.js 코드 2319 -> 1223
 
+---
+
 #### 2.1.3 개선 결과
 
 위 두 과정을 통해서 어떤 변화가 일어났는지 확인해보겠습니다.
@@ -108,6 +111,8 @@ products.js 코드 2319 -> 1223
 **자바스크립트 실행 시간 단축 후기**
 해당 프로젝트는 매우 간단한 프로젝트로 아주 간단한 기술들만 적용이 되었는데요, 만약 큰 프로젝트를 진행하시고 계시다면 트리쉐이킹, 망글링, 코드분할, 레이지로딩 등 다양한 기술들을 적용해보시면 됩니다!
 
+---
+
 ### 2.2 차세대 형식을 사용해 이미지 제공하기
 
 #### 2.2.1 이미지 변환 jgp -> avif
@@ -120,6 +125,8 @@ products.js 코드 2319 -> 1223
 <img width="799" alt="image" src="https://github.com/user-attachments/assets/f783f4c1-ea4f-4701-922b-e516f72d5428">
 <br/>
 
+---
+
 #### 2.2.2 개선 결과
 
 이제 결과를 확인해봅니다!!
@@ -134,7 +141,9 @@ products.js 코드 2319 -> 1223
 3. ssr환경으로 서버에서 avif로 변환하여 저장 -> 현재불가능
 4. 클라이언트에서 avif로 변환 -> 가능
 
-4번의 경우 가능하지만.. 추천하지 않음 오히려 제네레이터 과정에서 오히려 렌더링시간이 더 늘어날 수 있음.. 더불어 이미 브라우저가 jpg파일을 받은 상태로 이미지 렌더링시 일부 성능 향상을 얻을수는 있지만 효과가 크리티컬하지않아, 다른 이미지 최적화 용법을 통해 최적화 하는것용이하기 때문에 **차세대 형식을 사용해 이미지 제공하기** 최적화는 여기까지만 진행하겠습니다! 현업에서는 꼭 1,2,3을 활용해주세요!
+&nbsp;4번의 경우 가능하지만.. 추천하지 않음 오히려 제네레이터 과정에서 오히려 렌더링시간이 더 늘어날 수 있음.. 더불어 이미 브라우저가 jpg파일을 받은 상태로 이미지 렌더링시 일부 성능 향상을 얻을수는 있지만 효과가 크리티컬하지않아, 다른 이미지 최적화 용법을 통해 최적화 하는것용이하기 때문에 **차세대 형식을 사용해 이미지 제공하기** 최적화는 여기까지만 진행하겠습니다! 현업에서는 꼭 1,2,3을 활용해주세요!
+
+---
 
 ### 2.3 이미지 크기 적절하게 설정하기 & 이미지 요소에 width 및 height 명시하기
 
@@ -181,6 +190,8 @@ source는 우선, media를 통해 source를 필터하고 그 후 type조건을 
 <br/>
 <br/>
 
+---
+
 #### 2.3.2 aspect-ratio 적용
 
 &nbsp;다음은 반응형으로 영역을 잡아 사용하는 img를 레이아웃 시프트가 되지 않도록 초기영역을 지정해주겠습니다. 현재 img영역은 아래와 같습니다
@@ -245,6 +256,8 @@ section.best-sellers .product-slider .product img {
 
 레이아웃 시프트가 확연히 개선되었습니다!!
 
+---
+
 #### 2.3.3 이미지 크기 최적화
 
 현재 렌더링되는 화면에 비해 사이가 과도하게 큰 이미지들이 있습니다. 이를 최적화된 크기로 자르고 압축하여 사이즈를 최적화 해봅시다.
@@ -257,7 +270,7 @@ avif로 변환을 하였으나, 여전히 큰 사이즈들이 있습니다. 이
 
 1. 이미지 사이즈 조정(렌더링 및 fixed된 size에 맞게 크기 조정)
 2. 이미지 압축(그래픽이 크게 손상되지 않는 수준에서 최대한 압축)
-3. jpg -> avif, webp 변환
+3. ## jpg -> avif, webp 변환
 
 #### 2.3.4 이미지 lazy-load 적용
 
@@ -303,11 +316,38 @@ observer.observe(img);
 해당 코드를 통해 이전과 다르게 사이트에 접속 시 뷰포트에 있는 이미지만 로드하는것을 보실 수 있습니다.
 ![image](https://github.com/user-attachments/assets/3d70ee4f-1ca0-4762-9f8a-fac2b479941f)
 
-#### 2.3.5 개선 결과
+---
+
+#### 2.3.5 개선 결과
 
 자 이제 얼마나 개선되었는지 지표를 확인해볼까요?
 ![image](https://github.com/user-attachments/assets/f4ca7ca8-6134-437b-b756-ee68e8f715c1)
 ![image](https://github.com/user-attachments/assets/6e6ad395-702d-4b66-a84d-6ed30230b02a)
 ![image](https://github.com/user-attachments/assets/0be71f54-e2fa-44ae-bfc7-14397ac5d495)
 
 이미지 관련된 지표가 모두 정상화 되었습니다!! 짝짝짝짝
+
+---
+
+### 2.4 렌더링 차단 리소스 제거하기
+
+<img width="776" alt="image" src="https://github.com/user-attachments/assets/3e928ab4-40a0-4206-8755-80f4e3aabe0c">
+cookie-consent.js가 LCP와 FCP를 방해하고 있다고 설명되어 있는데요, cookie-consent.js를 어떻게 호출하고있나 확인해보겠습니다.
+
+<br/>
+<br/>
+
+```
+<head>
+  <!-- Cookie Consent by FreePrivacyPolicy.com https://www.FreePrivacyPolicy.com -->
+  <script
+    type="text/javascript"
+    src="//www.freeprivacypolicy.com/public/cookie-consent/4.1.0/cookie-consent.js"
+    charset="UTF-8"
+  ></script>
+</head>
+```
+
+&nbsp;해당 이슈를 해결하기 위해서는 \<head> 태그에 대한 이해가 있어야 합니다.
+
+&nbsp;현재 구조에서의 문제점은
diff --git a/index.html b/index.html
@@ -5,44 +5,28 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Home - Tech Shop</title>
-    <link href="https://fonts.googleapis.com/css?family=Heebo:300,400,600,700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Heebo:300,400,600,700&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="/css/styles.css" />
     <!-- <link rel="stylesheet" type="text/css" href="/css/slick.css"/> -->
-    <!-- Google Tag Manager -->
-    <script>
-      (function (w, d, s, l, i) {
-        w[l] = w[l] || [];
-        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
-        var f = d.getElementsByTagName(s)[0],
-          j = d.createElement(s),
-          dl = l != 'dataLayer' ? '&l=' + l : '';
-        j.async = true;
-        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-        f.parentNode.insertBefore(j, f);
-      })(window, document, 'script', 'dataLayer', 'GTM-PKK35GL5');
-    </script>
+
     <!-- End Google Tag Manager -->
 
     <!-- Cookie Consent by FreePrivacyPolicy.com https://www.FreePrivacyPolicy.com -->
-    <script type="text/javascript" src="//www.freeprivacypolicy.com/public/cookie-consent/4.1.0/cookie-consent.js" charset="UTF-8"></script>
-    <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>
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PKK35GL5" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-PKK35GL5"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <header>
@@ -60,32 +44,88 @@
             <li><a href="about.html">About us</a></li>
             <li><a href="index.html#best-sellers-section">Best Sellers</a></li>
             <li><a href="index.html#newsletter-section">Newsletter</a></li>
-            <li class="menu-icon"><img src="images/menu_icon.webp" width="24" height="17" /></li>
+            <li class="menu-icon">
+              <img src="images/menu_icon.webp" width="24" height="17" />
+            </li>
           </ul>
         </nav>
       </div>
     </header>
 
     <section class="hero">
       <picture>
-        <source width="576" height="576" media="(max-width: 575px)" srcset="images/Hero_Mobile.avif" type="image/avif" />
-        <source width="960" height="770" media="(min-width: 576px) and (max-width: 960px)" srcset="images/Hero_Tablet.avif" type="image/avif" />
-        <source width="1920" height="893" srcset="images/Hero_Desktop.avif" type="image/avif" />
+        <source
+          width="576"
+          height="576"
+          media="(max-width: 575px)"
+          srcset="images/Hero_Mobile.avif"
+          type="image/avif"
+        />
+        <source
+          width="960"
+          height="770"
+          media="(min-width: 576px) and (max-width: 960px)"
+          srcset="images/Hero_Tablet.avif"
+          type="image/avif"
+        />
+        <source
+          width="1920"
+          height="893"
+          srcset="images/Hero_Desktop.avif"
+          type="image/avif"
+        />
 
-        <source width="576" height="576" media="(max-width: 575px)" srcset="images/Hero_Mobile.webp" type="image/webp" />
-        <source width="960" height="770" media="(min-width: 576px) and (max-width: 960px)" srcset="images/Hero_Tablet.webp" type="image/webp" />
-        <source width="1920" height="893" srcset="images/Hero_Desktop.webp" type="image/webp" />
+        <source
+          width="576"
+          height="576"
+          media="(max-width: 575px)"
+          srcset="images/Hero_Mobile.webp"
+          type="image/webp"
+        />
+        <source
+          width="960"
+          height="770"
+          media="(min-width: 576px) and (max-width: 960px)"
+          srcset="images/Hero_Tablet.webp"
+          type="image/webp"
+        />
+        <source
+          width="1920"
+          height="893"
+          srcset="images/Hero_Desktop.webp"
+          type="image/webp"
+        />
 
-        <source width="576" height="576" media="(max-width: 575px)" srcset="images/Hero_Mobile.jpg" type="image/jpg" />
-        <source width="960" height="770" media="(min-width: 576px) and (max-width: 960px)" srcset="images/Hero_Tablet.jpg" type="image/jpg" />
-        <source width="1920" height="893" srcset="images/Hero_Desktop.jpg" type="image/jpg" />
+        <source
+          width="576"
+          height="576"
+          media="(max-width: 575px)"
+          srcset="images/Hero_Mobile.jpg"
+          type="image/jpg"
+        />
+        <source
+          width="960"
+          height="770"
+          media="(min-width: 576px) and (max-width: 960px)"
+          srcset="images/Hero_Tablet.jpg"
+          type="image/jpg"
+        />
+        <source
+          width="1920"
+          height="893"
+          srcset="images/Hero_Desktop.jpg"
+          type="image/jpg"
+        />
         <img width="1920" height="893" src="images/Hero_Desktop.jpg" />
       </picture>
 
       <div class="hero-content">
         <div class="container">
           <h1>Discover our line of VR Headsets</h1>
-          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+          <p>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremque laudantium.
+          </p>
           <button>View Headsets</button>
         </div>
       </div>
@@ -100,7 +140,12 @@ <h1>Best Sellers</h1>
         <div class="container">
           <div class="product new">
             <div class="product-picture">
-              <img src="images/vr1.avif" width="350px" height="350px" alt="product: Penom Case" />
+              <img
+                src="images/vr1.avif"
+                width="350px"
+                height="350px"
+                alt="product: Penom Case"
+              />
             </div>
             <div class="product-info">
               <h5 class="categories">Headsets, Apple</h5>
@@ -114,7 +159,12 @@ <h3 class="price">
 
           <div class="product new">
             <div class="product-picture">
-              <img src="images/vr2.avif" width="350px" height="350px" alt="product: Noise Cancelling Headphone" />
+              <img
+                src="images/vr2.avif"
+                width="350px"
+                height="350px"
+                alt="product: Noise Cancelling Headphone"
+              />
             </div>
             <div class="product-info">
               <h5 class="categories">Headsets, PS</h5>
@@ -128,7 +178,12 @@ <h3 class="price">
 
           <div class="product">
             <div class="product-picture">
-              <img src="images/vr3.avif" width="350px" height="350px" alt="product: Canon Digital SLR EOS Rebel T6" />
+              <img
+                src="images/vr3.avif"
+                width="350px"
+                height="350px"
+                alt="product: Canon Digital SLR EOS Rebel T6"
+              />
             </div>
             <div class="product-info">
               <h5 class="categories">Headsets, Oculus</h5>
@@ -208,5 +263,37 @@ <h3>Newsletter Signup</h3>
 
     <script type="text/javascript" src="/js/main.min.js"></script>
     <script type="text/javascript" src="/js/products.min.js"></script>
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-PKK35GL5');
+    </script>
+    <script
+      type="text/javascript"
+      src="//www.freeprivacypolicy.com/public/cookie-consent/4.1.0/cookie-consent.js"
+      charset="UTF-8"
+      defer
+    ></script>
+    <script type="text/javascript" charset="UTF-8" defer>
+      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>
   </body>
 </html>
