-
[핀더펜] 성능 최적화 - 성능검사(FCP)개발 프로젝트: 핀더펜 2024. 4. 30. 01:55728x90
- Eliminate render-blocking resources
- 페이지의 첫 번째 페인트를 차단하는 모든 URL
- 차단 리소스
- <script>
- 문서의 <head>태그 안에 있음
- defer 속성 없음
- async 속성 없음
- <link ref="stylesheet">
- disabled 속성 없음
- 유저 기기에 맞는 media 속성이 없음
- <script>
- 해결 방법
- index.html의 폰드 stylesheet 제거
- index.css의 폰트 import로 대신
- 결과
- 성능 검사 점수 29 >> 31 소폭 상승
- Enable text compression
- 이걸 해결하기 위해 서치를 해봄
- 파일을 압축하는 방법은 2가지가 있음
- 서버에서 압축
- 빌드하는 과정에서 압축
- 그래서 현재 서버를 통해 배포가 아니라 정적 페이지를 배포하기 때문에 vite를 이요해 압축하는 방법을 찾아봄
- 방법이 나와 있었지만 평소 빌드했을 때 자동으로 압축을 해주지 않나 생각이 들어서 압축한 프로젝트를 실행해봄
- 그 결과 오류 종류가 변경됨
- Minify JavaScript
- Reduce unused Javascript
- Remove duplicate modules in JavaScript bundles
- Avoid serving legacy Javascript to dodern browsers
빌드한 파일 실행 후 성능 검사 실행 결과
빌드 과정에서 파일이 압축되면서 사용하지 않는 파일은 제거되어 관련 문제는 자동으로 해결된 것을 알 수 있었다. 그에 따라 FCP, LCP, SI의 시간이 대폭 줄어든 것을 확인했다.
이제 새로운 문제를 해결해야겠다.
- Reduce unused JavaScript
- Eliminate render-block resources
- 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'개발 프로젝트: 핀더펜' 카테고리의 다른 글
[핀더펜] 성능 최적화 (0) 2024.05.04 [핀더펜] 성능 최적화 - 접근성 검사 (0) 2024.04.30 [핀더펜] 성능 최적화 - 성능 검사1 (0) 2024.04.27 [핀더펜] 최적화 진행 - lighthouse란? (1) 2024.04.26 [VSCODE] react native, node.js 실행 / 실행 오류 해결 (0) 2022.02.10 - Eliminate render-blocking resources