웹 최적화 성능 보고

Core Web Vitals

웹 성능을 최적화하여 사용자 경험을 향상시키는 것은 중요합니다. 지금 소개드리는 Web Vitals는 구글에서 제공하는 사용자에게 우수한 환경을 제공하는데 필수적인 품질 체크 요소 가이드라고 할 수 있습니다.

대표적인 지표 항목

최대 콘텐츠 페인트 (LCP): 페이지가 로드될 때부터 가장 큰 텍스트 블록 또는 이미지 요소가 화면에 렌더링되는 시점까지의 시간을 측정

다음 페인트에 대한 상호작용 (INP): 페이지에서 이루어지는 모든 탭, 클릭 또는 키보드 상호작용의 지연 시간을 측정

레이아웃 변경 횟수 (CLS): 페이지가 로드되는 시점에 예상치 못한 레이아웃 변경의 누적 점수를 측정

현재 프로젝트를 https://pagespeed.web.dev/ 에서 분석한 결과

개선하기

FCP, LCP 개선

이미지 형식(webp, avif)

2524Kb(jpg) -> 1406Kb(webp) -> 1037Kb(webp) jpg에서 avif로 약 58%감축

실제 빠른 4G환경에서의 네트워크 탭

lazy loading

<img loading="lazy" src="image.jpg" alt="..." />
<iframe loading="lazy" src="video-player.html" title="..."></iframe>

loading속성으로 lazy를 부여하여 지연 로딩 처리

렌더링 차단 리소스 제거

• font 프로젝트 내부에서 호스팅

• script 비동기 처리

    <script
      defer
      type="text/javascript"
      src="//www.freeprivacypolicy.com/public/cookie-consent/4.1.0/cookie-consent.js"
      charset="UTF-8"
    ></script>
    <script defer type="text/javascript" charset="UTF-8">
      // Dom이 로드 된 이후에 실행해주기
      document.addEventListener("DOMContentLoaded", function () {
        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>

CLS 개선

img태그 width/height 속성 & 반응형 이미지 제공

<picture>
  <source
    media="(max-width: 575px)"
    width="575"
    height="575"
    srcset="images/Hero_Mobile.avif"
  />
  <source
    media="(min-width: 576px) and (max-width: 960px)"
    width="960"
    height="770"
    srcset="images/Hero_Tablet.avif"
  />
  <img
    src="images/Hero_Desktop.avif"
    width="960"
    height="560"
    alt="Hero"
  />
</picture>

img태그에 width & height속성 부여 -> 미리 설정하여 layout shifting방지 반응형으로 이미지 제공 -> 뷰 포트에 맞는 이미지만 로드

fallback UI 제공

• AS-IS
• TO-BE fallback UI 제공 -> layout shifting 방지

실제 상호작용이 일어날 때 스크립트 실행처리

프로젝트 시나리오 : 뷰포트에서 스크롤을 내려서 product section이 보일 때 loadProducts실행 및 무거운연산 처리하기

window.onload = () => {
  let productSection = document.querySelector("#all-products");
  let status = "idle";

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && status === "idle") {
        status = "loading";
        loadProducts().then(() => {
          status = "idle";
        });
        // Simulate heavy operation. It could be a complex price calculation.
        for (let i = 0; i < 10000000; i++) {
          const temp = Math.sqrt(i) * Math.sqrt(i);
        }
      }
    });
  });

  observer.observe(productSection);
};

scroll이벤트 방식은 scroll이 발생할 때마다 이벤트가 발생하는 문제가 있음 -> Intersection Observer API를 활용하여 특정 지점을 교차할 때 이벤트 발생시키기

접근성 및 검색엔진 최적화 하기

이미지에 alt속성 부여

alt속성을 부여한 장점

• 이미지 로드 실패 시 대체 텍스트를 제공.
• 검색 엔진에 최적화 할 수 있음.
• 스크린 리더기에 의미를 제공.

meta tag description속성 부여

<meta name="description" content="hanghae-plus" />

제목요소를 내림차순으로 표시하기

<h1>Article Title</h1>
  <section>
    <h2>Introduction</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Overview</h2>
    <section>
      <h3>Benefits</h3>
      <p>...</p>
      <section>
        <h4>Case Study</h4>
        <p>...</p>
      </section>
      <section>
        <h4>Statistics</h4>
        <p>...</p>
      </section>
    </section>
    <section>
      <h3>Conclusion</h3>
      <p>...</p>
    </section>
  </section>

TO-BE