[성능 베이스캠프 미션] 병민(윤병인) 미션 제출합니다. #39

airman5573 · 2022-09-04T17:51:43Z

🔥 결과

/_ 개선 목표에 있는 측정 항목들에 대해 개선 작업 전/후의 성능 측정 결과를 적어주세요. _/

배포한 CloudFront 접근 경로: https://dg26fkfja18k3.cloudfront.net/
개선 전후 성능 측정 결과
- 개선 전 (S3)

- 개선 후 (CloudFront)

✅ 개선 작업 목록

/_ 각 요구사항을 위해 어떤 개선 작업을 진행했는지 적어주세요
코드 변경사항으로 확인하기 어려운 CloudFront 설정 사항 등은 리뷰어가 확인할 수 있게 스크린샷이나 적용한 항목들을 적어주면 좋겠지요? 🙂
_/

1 요청 크기 줄이기

소스코드 크기 줄이기
- 코드압축 및 사용하지 않는 코드 제거를 위한 terserplugin을 적용했습니다(webpack5 기본 플러그인)
- CSS코드를 파일로 분리한뒤 압축했습니다
- Home페이지에서 불러들이는 js코드의 총 사이즈가 55kb(49kb + 6.5kb)로 줄었습니다
이미지 크기 줄이기
- 이미지 압축 소프트웨어인 imageOptim을 사용했습니다
- imagify로 한번 더 압축했습니다
- squoosh로 확장자를 webp로 변경하고 resizing했습니다
- hero : 10mb -> 90kb 로 줄었습니다
- gif : 2mb -> 800kb 로 줄었습니다
- 화면 해상도에 따라 이미지를 달리 가져왔습니다

2 필요한 것만 요청하기

페이지별 리소스 분리
- code spliting을 적용했습니다
아이콘 패키지 Tree Shaking
- production mode를 통해 사용하는 아이콘만 가져왔습니다

3 같은 건 매번 새로 요청하지 않기

CloudFront 캐시 설정 (설정값, 해당 값을 설정한 이유 포함)
모든 파일에 대한 캐쉬를 1년으로 설정했습니다.
다만 이렇게 할 경우 파일을 S3에 업로드 했을때, cloudfront에서 기존에 캐싱한 파일들을 직접 무효화 해줘야 하는 불편함이 있습니다.
index.html파일만 캐싱을 안하면 S3에 새로 파일을 올릴때마다 알아서 갱신이 되서 편하지만, LCP 1.2초를 넘기는 문제가 발생했습니다.
아직 이유는 잘 모르겠습니다. 그래서 우선 캐쉬를 1년으로 설정하고, 새로 번들할때 직접 무효화 해주는 방식을 선택했습니다.
GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다.
- cache를 활용해서 api 결과를 재활용 했습니다

4 최소한의 변경만 일으키기

검색 결과 > 추가 로드시 추가된 목록만 새로 렌더되어야 한다.
- GifItem 컴포넌트에 memo와 custom equal function을 적용했습니다
Frame Drop이 일어나지 않아야 한다.
- (Chrome DevTools 기준) Partially Presented Frame 역시 최소로 발생해야 한다.
Layout Shift 없이 애니메이션이 일어나야 한다.

🧐 공유

/_ 작업하면서 든 생각, 질문, 새롭게 학습하거나 시도해본 내용 등등 공유할 사항이 있다면 자유롭게 적어주세요 _/

폰트에 preload를 적용했습니다. 페이지 로드 시간을 약 40ms 줄였습니다

KangYunHo1221 · 2022-09-05T05:02:03Z

src/pages/Search/components/GifItem/GifItem.tsx

+export default memo(GifItem, (prevProps, nextProps) => {
+  return prevProps.id === nextProps.id;
+});


이렇게 받을 수 있군요.. 얕은 비교 안하고..
꿀팁 감사합니다

a : 여기에서도 소소한 개선 포인트를 찾으셨네요~
아주 좋습니다.👍

KangYunHo1221 · 2022-09-05T07:25:01Z

src/pages/Home/components/CustomCursor/CustomCursor.tsx

-      cursorRef.current.style.left = `${mousePosition.pageX}px`;
-    }
-  }, [mousePosition]);
+    console.log('useEffect is called');


커서마저 최적화 해버린 그에게 남아있는 한 톨의 인간미

이미 지웠습니다!

jin7969 · 2022-09-05T12:41:58Z

병민만의 코드 멋지네요 ㄷㄷ;; 👏👏

lokba

병민 반갑습니다. 리뷰가 많이 늦었네요.
코드를 하나하나 훓어보면서 많이 생각하고 배운 것 같네요.
무엇보다 상태를 하나라도 줄여서 리렌더링을 막을려고 많이 노력하신 것 같은데 해당 부분 인상 깊었습니다.

병민과 핑퐁하고 싶은 부분이 존재해서, 코멘트를 꽤나 남겼네요.
일정이 워낙 바쁘다 보니, 모든 코멘트에 답변을 안 달아주셔도 됩니다.

이번 리뷰에서는 근로에서 배운 RCA 룰을 적용해봤어요.
이거 꽤나 리뷰어의 생각을 대략적으로 알려줘서 저는 편하더라고요.

RCA 룰

r: 꼭 반영해 주세요. 적극적으로 고려해 주세요. (Request changes)
c: 웬만하면 반영해 주세요. (Comment)
a: 그냥 사소한 의견입니다. (Approve)

반영하시고, review 다시 요청해주세요.

lokba · 2022-09-06T16:39:27Z

index.html

    <link
-      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
-      rel="stylesheet"
+      rel="preload"


a : 폰트를 preload하니, 확실히 FOUT에서 오는 불편함이 해소되기는 하네요.👍

질문 드리고 싶은게 있습니다.
프로젝트 상으로는, 두 개의 웹 폰트(normal, italic)를 로드하고 있습니다.
컨텐츠를 많이 보여주는 사이트인 경우, 페이지에서 다양한 웹 폰트를 사용할 수도 있다고 생각하는데요. 이 경우 웹 폰트 로드 전략은 어떻게 가져가실 건지 궁금합니다.

만약 모든 폰트를 preload하지 않는다고 한다면, preload하지 않은 폰트가 적용된 텍스트는 어떤식으로 UX를 개선할지 궁금합니다.

사실 가능하면 폰트를 적게 사용하는게 가장 좋긴 합니다

한글폰트인 경우에는 공원의 강의때 처럼, 갆 같은 폰트는 한글 폰트에서 제외할것 같아요

다만, textarea나 input이 있는 경우에는 간호사라는 말을 입력할때 갆을 한번 거치는데 이때 이 글자가 안보일것이기 때문에 이런 경우에는 그냥 한글 폰트 최적화 안하고 그냥 사용할것 같아요

물어보신 다양한 웹 폰트를 사용하는 경우에는 어쩔수 없이 모든 폰트를 로드할것 같아요.

preload하지 않은 폰트가 적용된 텍스트가 있다면, "기존 폰트를 보여주고 로드가 되면 새로운 폰트로 갈아끼우기" 라는 전략이 있는걸로 알고 있는데, 저는 갑자기 뺙 하고 폰트가 변하는것이 사용자에게 더 안좋은 경험을 끼칠 수 있다고 생각해요. 그래서! 폰트가 로드되기 전에는 안보여주고 다 로드가 되면 그때 폰트가 나오도록 할것 같습니다 :D

혹시 록바가 생각하는 좋은 아이디어가 있나요?

폰트를 preload하니, 확실히 FOUT에서 오는 불편함이 해소되기는 하네요.👍

지금 다시보니 잘못 작성했네요~ FOUT(flash of unstyled text) -> FOIT(flash of invisible text) 였네요.

상황별로 자세하게 적어주셔서 감사합니다.
갑자기 뺙 하고 폰트가 변하는것이 사용자에게 더 안좋은 경험을 끼칠 수 있다고 생각해요.
저도 공감합니다. 폰트 관련해서 기술 블로그를 보다가 좋은 라이브러리가 존재하더라고요.
Font Face Observer라는 라이브러리인데, 해당 라이브러리를 사용하면 웹 폰트가 로드가 완료되는 시점을 파악할 수 있어요.

const font = new FontFaceObserver('Josefin Sans'); const headRef = useRef<HTMLHeadingElement>(null); useEffect(() => { font.load().then(function () { // 폰트가 로드 완료되는 시점 headRef.current?.classList.add('font-loaded'); }); }, []); return ( <h1 ref={titleRef}>memegle</h1> );

폰트가 로드가 완료되었을 경우, 해당 DOM 요소에 class를 주고
font-loaded가 되었을 때 스무스하게 폰트가 적용되는 transition을 적용하면 갑자기 뺙 하고 폰트가 변하지는 않을 것 같네요.

관련 블로그

lokba · 2022-09-06T16:51:36Z

index.html

+      href="static/josefin-sans-400-700-normal.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"


a : 하나 배워갑니다.

정말 crossorigin 속성을 제거하니, 브라우저에서 2번 폰트를 요청하게 되네요. 폰트 하나를 적용하는데도 신경 많이 쓴것이 코드에서 보이네요.

관련 포스트

lokba · 2022-09-06T17:01:00Z

index.html

+        font-weight: 400 700;
+        font-display: swap;
+        src: url(static/josefin-sans-400-700-normal.woff2) format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,


a : unicode range...까지 적용하셨네요.😎
제 생각에는 유의미한 효과는 못봤을 것 같은데, 적용한 이유가 궁금합니다.

제가 설정한것은 아니고 구글에서 설정한것을 그대로 복붙한겁니다 ㅎㅎ
그런데 생각해보니 저는 어차피 preload를 했기 때문에 폰트를 쓰던 안쓰던 불러는 올것 같네요!
지워도 될것 같습니다 :D

https://stackoverflow.com/a/65424718/9279003

수정했습니다 :D
569dd4d

확인했습니다~

lokba · 2022-09-06T17:06:00Z

index.html

+      crossorigin="anonymous"
+    />
+    <style>
+      /* font */


r : 불필요한 주석이라고 생각합니다. @font-face로 충분히 작성자에게 정보를 제공한다고 생각합니다. 어떻게 생각하시나요?

동의합니다! 👍

수정했습니다 :D

1167829

lokba · 2022-09-06T17:21:19Z

src/App.tsx

+        <Route
+          path="/"
+          element={
+            <React.Suspense fallback={<>loading...</>}>


c : Suspense를 페이지 컴포넌트 바로 상단에 배치하셨군요.

아래 영상을 한번 보실까요?

동적으로 Home 컴포넌트를 받아오고 렌더링하는 순간을 자세하게 보시죠.
Footer 컴포넌트에서 layout shift 현상이 일어나는 것을 볼 수 있습니다.
실제로 lighthouse를 돌렸을 때, CLS 점수가 아쉽기도 하고요.
어떻게 생각하실지 궁금합니다.

오 맞네요,,,흠흠,,, !!
Footer를 바닥에 붙여볼까요?
위쪽의 Navigation은 두는게 사용자 경험에 더 좋을것 같아서요.

어떻게 생각하시나요?

우선 Footer까지 Suspense에 넣었습니다 :D

60cffe5

아주 좋네요~ 반영된 결과로 메인 페이지 대상으로 Lighthouse 검색결과 CLS 지표가 많이 좋아졌네요.

lokba · 2022-09-06T18:45:29Z

src/pages/Search/components/SearchBar/SearchBar.tsx

-    </section>
-  );
-};
+const SearchBar = React.forwardRef(


a : 비제어 컴포넌트로 바꾸면서 자연스레 forwardRef까지...좋네요💯

lokba · 2022-09-06T18:47:20Z

src/pages/Search/Search.tsx

-      />
-      <SearchResult status={status} gifList={gifList} loadMore={loadMore} />
+      <SearchBar onEnter={handleEnter} onSearch={handleSearch} ref={inputRef} />
+      <SearchResult status={status} gifList={gifList} onLoadMore={handleLoadMore} />


a : loadMore -> onLoadMore 세심하시네요. 💯

lokba · 2022-09-06T18:54:18Z

src/utils/MemoryCache.ts

+  private staledTime = 0; // 1 day
+  private cacheTime = 0;
+
+  constructor(data: T | UnInitialized, staledTime = 86400) {


a : 제 개인적인 의견인데, 처음 봤을 때 살짝 헷갈렸어요.
status에도 uninitialized가 있어서 UnInitializedData로 타입명을 지으면 어떨까라는 생각도 들긴 하네요.

분명한 네이밍 좋습니다 :D

9ca8935

lokba · 2022-09-06T18:56:45Z

src/utils/MemoryCache.ts

+  | { status: 'staled'; data: T }
+  | { status: 'fresh'; data: T };
+
+class MemoryCache<T> {


a : MemoryCache 인상깊게 코드 잘봤습니다.
코드도 굉장히 명시적이고 가독성 좋게 잘 짜신 것 같아요~

lokba · 2022-09-06T18:59:39Z

webpack.config.js

    path: path.join(__dirname, '/dist'),
+    filename: '[name]-[chunkhash].js',


a : contenthash가 아닌 chunkhash를 사용한 이유가 있을까요?

테스트를 해보니, chunkhash를 쓰면 js파일을 변경했음에도 css파일의 파일명이 바뀌었고,
contenthash를 쓰면 js파일을 변경했을때 js파일만 파일명이 바뀌었네요(css 파일명은 그대로).
CSS파일의 캐쉬를 생각하면 contenthash로 통일하는게 더 좋을것 같네요 :D

수정했습니다 :D

d91ca57

테스트까지 해주셔서 감사합니다. 저도 웹팩 설정할때 찾아봤는데, contenthash와 chunkhash의 차이점이 존재하더라고요.

lokba

병민 수정사항 잘 봤습니다~ 👍👍👍
질문해주신 부분에 답장 드렸고, 추가적으로 피드백 하나만 남겼습니다.
꼭 반영할 필요없으시고, 혹시나 request changes로 남기겠습니다.
확인하시고 다시 리뷰요청주세욥!!

lokba · 2022-09-07T11:21:45Z

src/pages/Search/components/GifItem/GifItem.tsx

 import { GifImageModel } from '../../../../models/image/gifImage';

 import styles from './GifItem.module.css';

-type GifItemProps = Omit<GifImageModel, 'id'>;
+type GifItemProps = GifImageModel;

 const GifItem = ({ imageUrl = '', title = '' }: GifItemProps) => {


a : 해당 부분은 반영할 필요는 없습니다.
이미 인지하고 있을 수도 있지만, 많은 부분에서 성능 개선을 해주셔서 추가적으로 개선할 포인트 하나를 제시하고만 갑니다.

lighthouse 로딩 성능 스크린샷

현재 gif로 로드되는 리소스를 webm이나 mp4 포맷으로 변환하면 많은 리소스를 아낄 수 있을 것으로 보이네요.
관련 문서에 따르면, webm이 mp4보다 압축률이 좋아서 용량이 더 작다고 하네요.

관련 문서

아 맞습니다 !
저도 고민을 했는데, 아무래도 gif 검색 사이트라는 점을 고려해봤을때
사용자가 메인(홈)페이지에서 다운받은 파일(우클릭 -> save)은 mp4이고 검색 페이지에서 다운받는 파일은 gif라면
조금 혼동이 오지 않을까 싶어, 성능을 조금 내려놓고 컨셉을 지키는 방향을 선택했습니다.

혹시 록바는 이 부분에 대해서 어떻게 생각하시나요? 궁금합니다 :D

성능을 조금 내려놓고 컨셉을 지키는 방향을 선택했습니다.

오호 그러네요. 병민처럼 생각할 수 있겠군요. 저는 미션의 취지가 성능 개선이기에, gif를 모조리 video 요소로 전부 바꾸긴 했습니다.
만약...제가 실제 memegle의 개발자라면, 병민과 같은 생각을 할 것 같네요. 의견 상세히 적어주셔서 감사합니다. :)

미션의 취지도 맞는 말이네요 👍
생각 공유 감사합니다 :D

lokba

병민 수고하셨습니다.
리뷰가 늦어서 Approve도 딜레이되어서 죄송하네요.

코드에서 고민의 흔적이 많이 느껴져서 좋았습니다.
CustomCursor, AnimatedPath와 같이 제가 생각하지 못한 부분에서 렌더링 성능을 개선하셨는데 많이 배웠습니다.
단순한 의견의 피드백이었지만, 바로 적용해주셔서 좋았습니다.

이만 Approve 진행하겠습니다. 앞으로의 미션을 응원하겠습니다. 필승!

airman5573 added 20 commits September 2, 2022 14:19

save

08bb90f

이미지 용량을 줄였다

de7d9ee

이미지 확장자명 변경

a5d9140

검색 페이지 lazy loading 적용

b288088

aggresive webpack plugin 적용

8854693

css를 파일로 추출한다

f537499

cursor 성능 개선

1866a85

css 압축 적용

20d92db

input을 비제어 컴포넌트로 변경한다

280b570

GifItem에 메모를 적용한다

6b30115

path animation 성능 개선

ab562c3

trending api에 cache를 적용했다

14114d8

MemoryCache 개선

e4a6d32

api관련 미션 내용 변경

804519c

Home도 code spliting 적용

c9387e5

cache time 기본값 설정

72ad55c

import type 적용

18926ae

font preload 적용

bc88dd1

사용하지 않는 플러그인 제거

0dd0d9b

이미지 최적화

80edbf2

airman5573 assigned lokba Sep 4, 2022

airman5573 added 3 commits September 5, 2022 03:06

reflow 최소화

ca79ac8

사용하지 않는 코드 삭제

5986c2c

로그 삭제

89f1129

airman5573 assigned airman5573 and unassigned lokba Sep 4, 2022

KangYunHo1221 reviewed Sep 5, 2022

View reviewed changes

lokba suggested changes Sep 6, 2022

View reviewed changes

airman5573 added 9 commits September 7, 2022 15:48

불필요한 주석 제거

1167829

Suspense 위치 이동

38b364f

2byte 절약하기

cadfde4

레티나 디스플레이 대응

c2770a8

빌드 파일명 수정

d91ca57

분명한 네이밍 적용

9ca8935

unicode-range 제거

569dd4d

footer layout shift 개선

60cffe5

사용하지 않는 파일 삭제

c4810fb

lokba suggested changes Sep 7, 2022

View reviewed changes

lokba approved these changes Sep 7, 2022

View reviewed changes

lokba merged commit 2cf6da4 into woowacourse:airman5573 Sep 7, 2022

		path: path.join(__dirname, '/dist'),
		filename: '[name]-[chunkhash].js',

[성능 베이스캠프 미션] 병민(윤병인) 미션 제출합니다. #39

[성능 베이스캠프 미션] 병민(윤병인) 미션 제출합니다. #39

Conversation

airman5573 commented Sep 4, 2022 • edited Loading

🔥 결과

✅ 개선 작업 목록

🧐 공유

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

airman5573 Sep 5, 2022 • edited Loading

Choose a reason for hiding this comment

jin7969 commented Sep 5, 2022

lokba left a comment

Choose a reason for hiding this comment

RCA 룰

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lokba Sep 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lokba Sep 6, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lokba Sep 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lokba left a comment

Choose a reason for hiding this comment

lokba Sep 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lokba left a comment

Choose a reason for hiding this comment

airman5573 commented Sep 4, 2022 •

edited

Loading

airman5573 Sep 5, 2022 •

edited

Loading

lokba Sep 7, 2022 •

edited

Loading

lokba Sep 6, 2022 •

edited

Loading

lokba Sep 7, 2022 •

edited

Loading

lokba Sep 7, 2022 •

edited

Loading