개발 프로젝트: 핀더펜

[핀더펜] 성능 최적화 - 성능검사(FCP)

hanlabong 2024. 4. 30. 01:55
728x90

 

  1. Eliminate render-blocking resources
    • 페이지의 첫 번째 페인트를 차단하는 모든 URL
    • 차단 리소스
      • <script>
        • 문서의 <head>태그 안에 있음
        • defer 속성 없음
        • async 속성 없음
      • <link ref="stylesheet">
        • disabled 속성 없음
        • 유저 기기에 맞는 media 속성이 없음
    • 해결 방법
      • index.html의 폰드 stylesheet 제거
      • index.css의 폰트 import로 대신
    • 결과
      • 성능 검사 점수 29 >> 31 소폭 상승
  2. Enable text compression
    • 이걸 해결하기 위해 서치를 해봄
    • 파일을 압축하는 방법은 2가지가 있음
      1. 서버에서 압축
      2. 빌드하는 과정에서 압축
    • 그래서 현재 서버를 통해 배포가 아니라 정적 페이지를 배포하기 때문에 vite를 이요해 압축하는 방법을 찾아봄
    • 방법이 나와 있었지만 평소 빌드했을 때 자동으로 압축을 해주지 않나 생각이 들어서 압축한 프로젝트를 실행해봄
    • 그 결과 오류 종류가 변경됨
  3. Minify JavaScript
  4. Reduce unused Javascript
  5. Remove duplicate modules in JavaScript bundles
  6. Avoid serving legacy Javascript to dodern browsers

 

빌드한 파일 실행 후 성능 검사 실행 결과

 

빌드 과정에서 파일이 압축되면서 사용하지 않는 파일은 제거되어 관련 문제는 자동으로 해결된 것을 알 수 있었다. 그에 따라 FCP, LCP, SI의 시간이 대폭 줄어든 것을 확인했다.

 

이제 새로운 문제를 해결해야겠다.

 

  1. Reduce unused JavaScript
  2. Eliminate render-block resources
  3. Preconnect to required origins

1. Reduce unused JavaScript

chrome-extension 관련 경고였다. 해결 방법을 찾아본 결과 크롬 확장 프로그램 중 React Developer Tools의 사이트 엣세스를 모든 페이지에서 클릭 시로 변경하면 된다.

 

메인 번들의 크기가 너무 커서 생긴 문제였다. vite를 통해 빌드한 후 친절히 해결 방법을 알려주었다.

 

rollup 적용

// vite.config.ts
build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes("node_modules")) {
            const module = id.split("node_modules/").pop().split("/")[0];
            return `vendor/${module}`;
          }
        },
      },
    },
  },

=> 결과

 

2. Eliminate render-block resources

3. Preconnect to required origins

참조 중인 폰트 import 과정에서 문제가 생겼다. cdn을 통한 참조가 아닌 assets 폴더에 폰트 파일을 저장한 후 참조하도록 수정했다.

@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-display: swap;
  src: local('Pretendard Black'), url(./assets/font/woff2/Pretendard-Black.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-display: swap;
  src: local('Pretendard ExtraBold'), url(./assets/font/woff2/Pretendard-ExtraBold.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: local('Pretendard Bold'), url(./assets/font/woff2/Pretendard-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-display: swap;
  src: local('Pretendard SemiBold'), url(./assets/font/woff2/Pretendard-SemiBold.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: local('Pretendard Medium'), url(./assets/font/woff2/Pretendard-Medium.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: local('Pretendard Regular'), url(./assets/font/woff2/Pretendard-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-display: swap;
  src: local('Pretendard Light'), url(./assets/font/woff2/Pretendard-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-display: swap;
  src: local('Pretendard ExtraLight'), url(./assets/font/woff2/Pretendard-ExtraLight.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-display: swap;
  src: local('Pretendard Thin'), url(./assets/font/woff2/Pretendard-Thin.woff2) format('woff2');
}

 

결과

 

 

초록색은 아니지만 그래도 많이 발전했다..!

 

 

텍스트 압축 사용  |  Lighthouse  |  Chrome for Developers

텍스트 압축을 사용하여 웹페이지 로드 성능을 개선하는 방법에 대해 알아보세요.

developer.chrome.com

 

 

728x90