랜딩페이지 성능 개선 (LCP 개선)

문제

우리 inforum의 랜딩페이지의 성능이 어떤지 Lighthouse에 돌려봤다.

LCP(Largest Contentful Paint)가 3.1초가 걸렸다.

LCP가 2.5초 내여야 사용자에게 좋은 경험을 줄 수 있다.

원인 분석

이에 대해 원인을 분석해보았다.

우리의 원래 랜딩페이지는 다음과 같은 로직으로 화면을 보여주었다.

1. TypeIt이라는 라이브러리를 사용해 타이핑 애니메이션을 적용해 "무한한 개발 이야기 공간"텍스트를 보여준다.

2. 텍스트가 완전히 다 보여지고 난 뒤 1초에 걸쳐 로고이미지와 상세 정보들을 보여준다.

우선 랜딩페이지에서 Largest Contentful element는 무엇일까??

"인포럼 로고 이미지"였다.

성능 개선

LCP를 줄이기 위해서는 이 "인포럼 로고 이미지"를 가능한 빨리 보여주면 된다.

로직을 다음과 같이 변경해보았다.

1. "인포럼 로고 이미지"를 SSR로 가장 처음에 보여준다.

2. hydration과정에서 0.5초에 걸쳐 타이틀과 상세 정보들을 보여준다.

+ TypeIt 라이브러리가 사용자 경험에 있어 별로 좋지 않은 것 같아 제거했다.



결과

LCP를 3.1s -> 0.7s로 개선할 수 있었다.