프론트엔드 성능 최적화 - 데보션(Devocean)
*데보션 웹 프론트엔드 성능 최적화 방법 및 적용 사례 세미나 시청 후 정리를 위해 이 글을 작성 하게 되었습니다. 🙂
프론트엔드 성능 최적화가 필요한 이유
사용자 경험에 페이지 로딩 속도가 큰 영향을 미치고 있다는 연구 결과가 있습니다.
토코피디아라는 사이트에서 3.78초에서 1.72초로 로딩 속도를 단축한 결과 유저가 사이트에서 머무르는 시간이 더 길어졌고 비지니스 임팩트를 불러왔다는 점을 볼 수 있습니다.
속도의 정의
LCP 사용자가 사이트에 접속했을 때 첫화면에 가장 큰 영역(보통 이미지)을 차지하는 부분이 얼마나 빨리 로딩되는지
FID 맨 처음 사이트가 뜰때 액션(터치,스크롤)했을 때 얼마나 빨리 반응하는지
CLS 사용자가 개입 하지 않았을 때 얼마나 안정적으로 사용자가 원하는 화면을 유지하는지(광고가 사이트 컨텐츠를 밀어버리면 악영향)
LCP와 FID가 첫 로딩에만 집중 하는 것 같다는 피드백에 따라서 구글이 INP라는 지표가 FID 대신 측정이 될 예정입니다(2024년 초부터)_
INP 모든 input들의 속도 평균을 낸 지표
성능 측정 방법
LAB DATA
추가적으로
[WebPageTest][Pagespeed]
RUM DATA 실사용자 데이터
각 요소별 최적화 방법
LCP optimaization
- LCP 자원에 최대한 빨리 html 소스에서 찾아내야 합니다.
- 찾아낸 다음 우선 순위가 높게 되어 다운로드 되어야 합니다.
- CDN을 씁니다.
- 외부 리소스를 받아 와야하는 이미지인 경우 html header에
<link rel='preload'>태그를 추가 하면 브라우저가 미리 다운 받게 됩니다. <img>태그에 fetchpriority='high'를 넣게 되면 브라우저에서 우선적으로 다운로드 하게 됩니다.loading='lazy'를 했을 때 뷰포트에 들어오지 않는 부분들에 있어서는 지연 로딩을 할 수 있어서 브라우저가 다운 받을 리소스를 줄일 수 있습니다.
FID optimaization
- 불필요한 JavaScript 코드를 줄이세요.
- 큰 랜더링 업데이트를 줄이세요. (infinite scroll 적용시 첫 디바이스 화면 영역을 잡지 못해 추가적으로 방대한 양의 랜더링을 하는 경우 문제)
- coverage tool로 불필요한 자바스크립트 코드를 잡아 낼 수 있습니다.
- 트래킹을 위한 코드들을 지속적으로 모니터링 하면서 정리할 건 정리한다.
CLS optimaization
- 동적으로 생성되는 영역은 미리 플레이스홀더를 설정 해야 합니다. (상대적 크기라면 aspect-ratio를 사용하거나 minHeight 사용)
FE