[REFACTOR] 홈 화면 성능 개선 #285

rbgksqkr · 2024-09-23T18:02:35Z

Issue Number

As-Is

네트워크 속도 느릴 시 폰트 FOUT 발생

To-Be

초기 로딩 속도 개선
- 폰트 최적화
- 이미지 최적화
- 코드 스플리팅
favicon 설정

Check List

테스트가 전부 통과되었나요?
모든 commit이 push 되었나요?
merge할 branch를 확인했나요?
Assignee를 지정했나요?
Label을 지정했나요?

Test Screenshot

번들 사이즈 줄이기

번들 크기 : 212.56KB -> 209.07KB
TBT : 410ms -> 230ms
CLS : 0

개선 전 lighthouse / bundle

개선 후 lighthouse / bundle

폰트 preload

DOMContentLoad : 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생 (외부 리소스 x)
load : DOMContentLoad + 이미지, 스타일시트 같은 외부 리소스도 모두 불러오는 것이 끝났을 때 발생
초기 상태 : 번들을 모두 다운받은 후 폰트 load
- DOMContentLoad : 691ms / load : 7.98초
- 로딩은 빠른데, 폰트 깜빡임 존재

폰트 preload : 폰트 preload 적용, but 폰트 용량이 크면 네트워크에 따라 흰화면 보는 시간이 길어짐
- DOMContentLoad : 5.35초 / load : 6.24초
- 폰트 깜박임은 없어졌는데, 폰트가 용량이 커서 불러올 동안 오래 흰 화면

폰트 preload + subset : 한글에 안쓰이는 글자를 제거한 서브셋 적용. 홈화면 폰트 크기 : 2.1MB -> 100KB
- DOMContentLoad : 1.02초 / load : 1.02초

이미지 최적화

93.8KB -> 16.9KB

png 파일을 webp 확장자로 변경
이미지 크기 수정

(Optional) Additional Description

localhost 에서 측정하다보니 배포되고 한번더 확인해보긴 해야함
로컬 폰트 로 하면 사용자 컴퓨터에 깔려있는 경우 네트워크탭도 안거쳐서 로컬 폰트로 바꿀까 고민중

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

novice0840

코드 잘 읽어봤어요~~

궁금한 것들 질문 남겼으니 천천히 답변 달아주세요

novice0840 · 2024-09-25T07:04:43Z

frontend/package.json

-    "start": "webpack serve --config webpack.config.dev.js",
+    "dev": "webpack serve --config webpack.config.dev.js",
+    "start": "webpack serve --config webpack.config.prod.js",


🙏 제안 🙏

이름을 dev/prod 환경에 대응되도록 start에서 prod로 바꾸는 건 어떠한가요?

novice0840 · 2024-09-25T07:24:32Z

frontend/src/router/lazyPages.ts

+export const GamePage = lazy(() => import('@/pages/GamePage/GamePage'));
+export const GameResultPage = lazy(() => import('@/pages/GameResultPage/GameResultPage'));
+export const MainPage = lazy(() => import('@/pages/MainPage/MainPage'));
+export const NicknamePage = lazy(() => import('@/pages/NicknamePage/NicknamePage'));
+export const ReadyPage = lazy(() => import('@/pages/ReadyPage/ReadyPage'));
+export const RoundResultPage = lazy(() => import('@/pages/RoundResultPage/RoundResultPage'));
+export const VoteStatusPage = lazy(() => import('@/pages/VoteStatusPage/VoteStatusPage'));


🌸 칭찬 🌸

lazy loading 좋네요 굿굿

novice0840 · 2024-09-25T07:37:13Z

frontend/webpack.config.common.js

@@ -30,7 +30,7 @@ module.exports = {
        ],
      },
      {
-        test: /\.(png|jpe?g|gif|svg)$/i,
+        test: /\.(png|jpe?g|gif|svg|webp)$/i,


🌸 칭찬 🌸

webp 포함 굿굿

novice0840 · 2024-09-25T07:43:09Z

frontend/webpack.config.common.js

+      template: path.join(__dirname, './public/index.html'),
+      hash: true,
+      favicon: path.join(__dirname, './public/favicon.ico'),


🌸 칭찬 🌸

favicon이 없었는데 추가되었군요 굿굿

novice0840 · 2024-09-25T07:44:32Z

frontend/public/index.html

+  <link
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Regular.subset.91.woff2"
+    rel="preload" as="font" type="font/woff2" crossorigin />
+  <link
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.83.woff2"
+    rel="preload" as="font" type="font/woff2" crossorigin />
+  <link
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.84.woff2"
+    rel="preload" as="font" type="font/woff2" crossorigin />
+  <link
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.85.woff2"
+    rel="preload" as="font" type="font/woff2" crossorigin />
+  <link
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.89.woff2"
+    rel="preload" as="font" type="font/woff2" crossorigin />
+  <link
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.90.woff2"
+    rel="preload" as="font" type="font/woff2" crossorigin />
+  <link
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.91.woff2"
+    rel="preload" as="font" type="font/woff2" crossorigin />


💭 질문 💭

이미 위쪽에 폰트 link가 있는 상태인데 서로 다른 폰트를 가져오는 태그인가요?

서브셋 폰트를 사용하면 용량을 크게 줄일 수 있더라구요! PR 본문에도 작성했는데 기존에 가져오던 방식대로라면 폰트 용량이 2.1MB로 엄청 큽니다. 근데 그 상태에서 preload를 진행하면 흰 화면을 오래 보게 되더라고요
그래서 폰트 용량을 줄여야하는데, 그 방법 중 하나로 서브셋 폰트가 있습니다. 서브셋 폰트를 적용한 후 실행하면 홈화면에 필요한 서브셋 폰트가 네트워크탭에 나타났었는데, 해당 폰트만 preload한 거라고 보시면 됩니당

https://d2.naver.com/helloworld/4969726

rbgksqkr added 9 commits September 21, 2024 15:50

refactor: 이미지 형식 webp로 변환 및 이미지 크기 조절 #278

a258084

refactor: 폰트 preload 적용 #278

9156bf7

refactor: meta tag 추가 #278

6a8325d

refactor: favicon 설정 #278

69fcab6

refactor: font subset 적용하여 리소스 용량 줄이기 #278

0c84823

chore: webpack-bundle-analyzer 설정 #278

9c26a17

chore: js output contenthash 적용 #278

4146635

refactor: 코드 스플리팅 적용 #278

43e6bd6

refactor: 서브셋 폰트 preload 적용 #278

ed4be6b

rbgksqkr added ♻️ refactor 리팩토링 🫧 FE front end labels Sep 23, 2024

rbgksqkr added this to the FE Sprint5 milestone Sep 23, 2024

rbgksqkr requested review from useon and novice0840 September 23, 2024 18:02

rbgksqkr self-assigned this Sep 23, 2024

rbgksqkr linked an issue Sep 23, 2024 that may be closed by this pull request

[REFACTOR] 홈 화면 성능 개선 #278

Closed

3 tasks

novice0840 approved these changes Sep 25, 2024

View reviewed changes

rbgksqkr added the 🔥 Emergency 긴급 처리(2명 리뷰 머지 PR) label Sep 26, 2024

rbgksqkr added 2 commits September 26, 2024 19:47

merge: conflict 해결 #278

aed82dd

chore: github actions 스크립트 수정 #278

5e46808

rbgksqkr merged commit a3d78d8 into develop Sep 26, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[REFACTOR] 홈 화면 성능 개선 #285

[REFACTOR] 홈 화면 성능 개선 #285

rbgksqkr commented Sep 23, 2024 •

edited

Loading

novice0840 left a comment

novice0840 Sep 25, 2024

novice0840 Sep 25, 2024

novice0840 Sep 25, 2024

novice0840 Sep 25, 2024

novice0840 Sep 25, 2024

rbgksqkr Sep 25, 2024

[REFACTOR] 홈 화면 성능 개선 #285

[REFACTOR] 홈 화면 성능 개선 #285

Conversation

rbgksqkr commented Sep 23, 2024 • edited Loading

Issue Number

As-Is

To-Be

Check List

Test Screenshot

번들 사이즈 줄이기

폰트 preload

이미지 최적화

(Optional) Additional Description

🌸 Storybook 배포 주소

novice0840 left a comment

Choose a reason for hiding this comment

novice0840 Sep 25, 2024

Choose a reason for hiding this comment

🙏 제안 🙏

novice0840 Sep 25, 2024

Choose a reason for hiding this comment

🌸 칭찬 🌸

novice0840 Sep 25, 2024

Choose a reason for hiding this comment

🌸 칭찬 🌸

novice0840 Sep 25, 2024

Choose a reason for hiding this comment

🌸 칭찬 🌸

novice0840 Sep 25, 2024

Choose a reason for hiding this comment

💭 질문 💭

rbgksqkr Sep 25, 2024

Choose a reason for hiding this comment

rbgksqkr commented Sep 23, 2024 •

edited

Loading