FE - 성능 최적화에 대한 고찰(w. LightHouse)

 

최근에 FE 관련해서 전문가가 되려면 어떻게 해야할까? 라는 주제로 생각에 빠진 적이 있었다.

 

내가 생각하기에 FE의 주된 역할은 사용자와 서비스 간의 상호작용을 원활하게 하는 것이다.

 

그렇다면 '사용자와 서비스 간' 상호작용을 원활하게 한다는 것은 무엇일까?

 

간단하게 '사용자가 서비스를 사용하는데 이해하기 쉽게, 사용하기 쉽게'  만드는 것이다. 

 

FE에서 저러한 문제를 하기 위해서는 몇가지 문제점을 해결할 필요가 있다.

 

(Web 의 경우)

 

1. 사용자가 빠르게 화면을 볼 수 있어야 한다. (FCP)

 

2. 사용자가 빠르게 서비스와 빠르게 상호작용할 수 있어야 한다. (TTI)

 

3. 사용자는 화면이 완성되어 가는 모습을 체감할 수 있어야 한다(SI)

 

4. 사용자는 빠르게 서비스의 주요 콘텐츠를 볼 수 있어야 한다. (LCP)

 

내가 생각할 때 SEO 보다 중요한 것들이다. 위에 것과 SEO 등을 묶어서 Web vital이라고도 한다.

 

SEO가 아무리 좋아도 실제 서비스의 질적인 영역을 나타내는 Web Vital(FCP, LCP, TTI, SI) 등이 좋지 않으면 사용자는 절대 다시 들어오지 않을 것이다. 또한 SEO가 좋아 검색창에 자주 등장 하더라도 볼 때 마다 "아 저 사이트는 실제 서비스가 별로야"라는 좋지 못한 브랜딩이 일어날 수 있다.

 

실제 최적화에 무지했을 때 개발 중이던 프로젝트의 Web vital 점수는 아주 별로 였다.

사이드 프로젝트 성격이었기 때문에 FCP는 그나마 볼만 했지만, 배너 이미지를 가져오는 것 때문에 LCP가 영 아니였다. 

 

(여담이지만, 디자이너님의 시안에 맞는 Carousel이 없어서 직접 만들었다)

 

사용자 입장에서는 LCP가 좋지 못하니, 사이트에 접속했을때 2.7초 동안은 가운데가 비어있다. (아주 좋지 못한 경험일 것이다)

 

SPA 성격상 SEO가 안좋다는 것 그렇다 쳐도, SI와 LCP는 개선할 필요가 있었다.

 

또 그 외에도 문자열 압축 문제, preload 문제 등 다시 살펴보면 production 환경에서 조정해줘야 할 것이 한 둘이 아니였다.

 

일단 SI와 LCP 등의 Web vital 문제를 해소하기 위해서 다음과 같은 전략을 도입하였다.

 

- Image Preload [LCP 향상]

- gzip 압축 [리소스 다운시간 절약]

- Pending 상태일때 Fallback Component 도입 (Skeleton) [SI 향상]

- Layout Shift 문제 해결을 위한 크기 조정 [UX 향상]

- Nginx Cache 정책 조정 [재 방문시 LCP, FCP 등 향상]

- Lazy

 

저러한 전략을 도입해서 다시 Web Vital을 확인한 결과! 성과가 있었다.

 

일반적으로 FCP, LCP가 2초 내로 나오면 준수한 최적화로 보는데, 1.1s 정도면 꽤나 효용을 봤다고 볼 수 있을 것 같다.

 

나중에 SEO와 다른 부분도 향상 시킬 수 있으면 손을 봐야겠다.