성능 최적화를 해보자

최근 팀원분들과 최적화 관련 이야기를 하다가 성능적인 측면에서 생각하는 기회가 되었습니다.
현재 우리 서비스를 최적화적인 부분이나 성능적인 부분을 고려하지않고 기능적으로만 생각하여 구현에만 급급하여 다른 부분들을 신경쓰지 못했는데 팀원이 제시해준 최적화 목표들로 하나씩 공부하고 기존코드에서 개선해 나아가는걸 목표로 최적화를 진행할 예정입니다

그래서 시작한한 첫번재 요소: LCP

Large Contentful Paint: 웹 페이지의 로딩 성능을 측정하는 핵심 지표로 가장 큰 콘테츠가 그려지는 성능을 측정

대부분 이미지 또는 텍스트(폰트) 요소 때문에 로딩이 느려진다

콘테츠가 랜더링되는데 걸리는 시간 지표

✅ 0 ~ 2.5초: 좋음

⚠️ 2.5초 ~ 4.0초: 개선 필요

❌ 4.0초 이상: 느림 (사용자 이탈 위험!)

그럼 개발도구 -> LightHouse에서 사용자가 가장 처음 접한는 랜딩페이지를 측정을 해보자

FCP : 4.5초 -> 처음 콘테츠가 그려지는 시간
LCP : 8.7초 -> 가장큰 콘테츠가 그려지는 시간
Speed Index: 4.5초 ->사용자가 화면 콘텐츠가 얼마나 빠르게 보이는지를 수치로 나타낸 지표

처첨하다...
그래도 일단 어디서부터 개선해 나아가야되는지 고민을 해보자

성능적인 부분에서 우선순위는 사용자가 처음 보거나, 가장 많이보는 페이지들로 우선적으로 작업을 해야한다

우선 랜딩 페이지 요소

• 로고이미지
• 서비스 이름
• 랜딩 텍스트
• 로그인 버튼

친절하게도 Lighthouse 에서는 개선을 해야되는 부분들을 자세히 알려준다

찾았다 범인! 무려 8초동안 그려야 되는 로고이다. 하지만 실제 load는 0.4초 400ms 이다, load delay 가 8초 가까이 되는걸 확인할수있다.

그럼 어떤 요소들 때문에 지연이 되는걸까?

• HTML 파싱이 끝난후 img 태그가 나옴
• CSS , JS 파싱이 완료된후 랜더링 시작
• LCP 는 lazy-loading 최소화
• 폰트 웹폰트 로딩 지연

그럼 실제 브라우저 랜더링 순서를 잠깐 살펴보자

1. HTML 파싱 시작 → DOM 생성

2. CSS 파싱 → 스타일 적용 준비 (이때까지 렌더링 블로킹 상태)

3. JavaScript 실행 (defer/script 구분 중요)

4. 리소스 요청 (이미지, 폰트 등)

5. 스타일과 레이아웃 계산 완료 → 렌더 트리 생성

6. Paint → Composite → Render ===> 이 시점에서 LCP 요소가 뜨면 LCP 시간 기록된다

이미지/폰트/CSS 요청이 조금이라도 늦으면 LCP가 그대로 지연되기 때문에 최대한 지연을 줄이는 방법이 필요

이미지 preload

브라우저는 HTML을 위에서 아래로 파싱하면서 <img>를 만나야 이미지 로딩을 시작한다 하지만 미리 중요한 이미지(LCP 요소)를 알고 있다면, 먼저 요청하게 할수있다.

<link rel="preload" as="image" href="/images/hero.webp" />

preload와 같이 해당 이미지의 포멧 즉 이미지의 용량에 대한 정보도 궁금해서 찾아보았다.

중요한 이미지는 이러한 방법으로 최적화하여 원한는 방법으로 preload를 진행하면된다.

그럼 폰트는 어떻게 처리를 할까?

폰트스왑

그럼 폰트는 어떻게 처리를 할까?
폰트는 font-display:swap 을 사용해서 외부 폰트가 로딩 될때까지 딜레이가 아닌 기본 폰트로 사용하고 로딩이 완료되면 폰트가 교체 된다.

아직 많이 남았다

하나씩 천천히 개선해 나아가면서 문제를 찾고 최적화를 할 예정이다

Strategies to improve LCP
Avoid unnecessary re-renders by:
Correcting the usage of useEffect
Doing lazy initialization on useState
Using React.memo or useCallBack
Avoiding Prop drilling

Improve loading of resources by:
Doing code splitting/deferring code
Doing lazy loading of components
Using srcset for Images

Clean the code by:
Removing unused code & Tree Shaking
Removing unnecessary CSS
Reducing unused exports

참고자료 :
https://medium.com/@pratik.developer2k16/code-splitting-and-lazy-loading-webpack-level-and-react-level-3dbeb74111db
https://dev.to/hxxtae/lighthousereul-hwalyonghayeo-lcp-jeomsu-gaeseonhagi-3o3i