lighthouse는 웹/앱 브라우저의 성능과 품질을 측정시키는 데 사용할 수 있는 오픈소스 툴이다.

개발자도구(F12)를 열고, 상단 메뉴에서 Lighthouse를 선택한 후 보고서를 생성하면 된다.

자동으로 성능, 접근성, SEO 등에 대한 분석을 알아서 시작하고 분석 결과를 확인 할수 있다.

 

 

Lighthouse - Chrome 웹 스토어

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

chromewebstore.google.com

 

 

개발 초기설정 연습을 하던 레포에서 한 번 실험 삼아 돌려봤는데 생각보다 성능이 좋지 않았다.

 

 

딱히 코드를 많이 작성하지도 않았고, npm 설치랑 초기 설정만 해둔 상태여서 이유가 너무 궁금했다..

그래서 lighthouse의 분석 결과를 따라 차근차근 성능 이슈가 발생한 이유가 무엇인지 알아보고 해결해보았다!

 

 

⚠ Ensuring Text Visibility During Web Font Loading

@font-face {
    font-family: "Pretendard-Light";
    src: url("./assets/fonts/Pretendard-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

 

 

 

이 문제는 로딩 중 폰트 시간이 보장되지 않았다는 것이다. 즉, 내가 정의해둔 폰트가 로딩되지 않았을 렌더링 시간동안 폰트가 보이지 않게 된다. 이는 가시성에 문제를 일으킨다. 따라서 이 문제를 해결하기 위해서는 내가 지정한  @font-face 선언에 font-display: swap; 속성을 추가해야 한다.

swap 속성을 추가하면 브라우저에게 초기에는 시스템 기본 폰트를 사용하다가, 사용자 지정 폰트가 완전히 로드되면 이를 교체하라고 지시한다. 이러한 방식으로 폰트 로딩 과정 중에 텍스트가 보이지 않는 문제를 효과적으로 방지할 수 있다.

 

 

How to fix Ensure text remains visible during webfont load

Hi I'm facing this problem in google pagespeed I almost get my site speed to 100 the only thing remaining is Ensure text remains visible during webfont load I'm already using font-display:swap; ...

stackoverflow.com

 

 

@font-face {
    font-family: "Pretendard-Light";
    src: url("./assets/fonts/Pretendard-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard-Regular";
    src: url("./assets/fonts/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 모든 @font-face 선언에 동일한 최적화 적용 */

 

⚠ Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.

 

다음으로 발생한 문제는 사용하지 않는 자바스크립트 문을 지워야한다는 내용이었다. 

 

일부 코드에서 한꺼번에 import 하는 부분이 있었다. 

이를 해결하는데에는 다양한 방법이 있을 수 있지만 나는 코드가 짧은 편이어서 import 방식을 바꿔보았다.

 

 

자바스크립트를 축소하세요.  |  Lighthouse  |  Chrome for Developers

축소되지 않은 자바스크립트 감사에 대해 알아보세요.

developer.chrome.com

 

 

 

필요한 모듈만 import하기

Babel은 자바스크립트 최신 문법을 구형 브라우저에서도 호환 가능하도록 변환하는 도구이다. 기본적으로 require를 사용하여 모든 모듈을 가져오지만, 아래와 같이 설정하면 import/export 문법을 사용할 수 있어 Tree Shaking을 실현한다.

Tree Shaing이란 나무를 흔들어서 이미 죽어버린 나뭇잎을 떨어뜨리듯이, 사용되지 않는 자바스크립트 코드를 제거한다는 의미를 담고 있다.

 

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { "modules": false }],
    "@babel/preset-react"
  ]
};

 

위와 같이 바벨 파일을 성정하면, 필요한 모듈만 import하여 사용할 수 있다.

 

 

main.jsx에서 필요한 creatRoot만 가져오도록 수정한 모습이다.

 

⚠ Avoid enormous network payloads Large network payloads cost users real money and are highly correlated with long load times

이 문제는 네트워크 페이로드에 문제가 생기는 것을 방지하라는 뜻이다.

이것도 폰트 설정에서 문제가 발생한 것을 보아 뭔가 로드하는데 많은 시간이 걸리는 것 같다..

폰트 프리로드(Preload)

index.html 파일에서 태그를 이용하여 폰트를 미리 로드하도록 설정할 수 있다. 

(/src/assets/fonts/폰트파일명.woff2) as="font" 속성을 추가하여 리소스 유형을 폰트로 지정합니다. type="font/woff2" 속성을 추가하여 리소스의 MIME 유형을 지정한다. crossorigin 속성을 추가하여 CORS 정책을 따르도록 변경했다. 이렇게 하면 브라우저가 HTML 파일을 파싱하는 동안 폰트 파일을 미리 로드할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <link href="./src/index.css" rel="stylesheet" />
    <link
      rel="preload"
      href="/src/assets/fonts/Pretendard-Light.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/src/assets/fonts/Pretendard-Regular.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/src/assets/fonts/Pretendard-Medium.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/src/assets/fonts/Pretendard-SemiBold.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/src/assets/fonts/Pretendard-Bold.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

 

 

🙄 브라우저 성능 개선 전

😁❤ 브라우저 성능 개선 후

 

 

이러한 브라우저 성능 최적화를 통해 Speed Index를 1.5초에서 0.6초로 40% 가량 감소시켜 Performance를 100으로 개선했다. Speed Index는 콘텐츠가 시각적으로 표시되는 진행 속도 측정값이다. 측정시 다시 로드될때 페이지의 비디오를 순간적으로 캡쳐하여 프레임 간 속도를 계산한다. 필요한 js 모듈만 정의하고 폰트가 로드되는 중 텍스트 표시가 유지되도록 하여 SI 점수를 대폭 늘릴 수 있었다. 이 외에도 TCP(초기 DOM 렌더링 시간), LCP(큰 콘텐츠 렌더링 시간) 등에 큰 문제가 없는 것을 확인하였다. 

 

아직 브라우저 최적화 입문 단계지만 이것을 시작으로, 개발 시 무작정 보여주기 식 코드로 엉망진창 만들지 말고 브라우저 성능에 대해 고려하여 작성해보자🧐

 

 

저작자표시

'Web > React' 카테고리의 다른 글

[React] 스크롤 애니메이션을 구현하는 다양한 방법을 알아보자  (0) 2025.04.03
[Tailwind CSS] React(JavaScript) & Vite + Tailwind CSS + PostCSS & AutoFixer로 프론트엔드 레포를 초기 구성하는 법  (0) 2024.10.03

티스토리툴바