Series 프론트엔드 성능 및 최적화
프론트엔드 성능 측정
프론트엔드에서 성능은 무엇을 말하는 걸까?
빠르게 웹페이지를 보여주는 것, 바로 속도다!
웹 페이지를 빨리 보여주도록 최적화해야 하는 이유는 무엇일까?
사용자 유치, 사용자 이탈률 감소 -> 비즈니스적 성장
SEO (웹 성능 지표가 SEO에 영향을 미친다)
좋은 사용자 경험(UX)
프론트엔드 성능 측정 지표에는 무엇이 있을까?
Core Web Vitals
1) LCP (Largest Contentful Paint)
로딩 성능을 측정
페이지가 처음 로드를 시작한 시점을 기준으로 뷰 포트 내에 가장 큰 이미지나 텍스트 블럭의 렌더링 시간을 측정
2) FID (First Input Delay)
사용자의 상호작용 측정
사용자가 페이지와 처음 상호 작용(링크 클릭 or 버튼 클릭)할 때, 이에 대한 응답으로 브라우저가 이벤트를 처리하기까지의 시간을 측정
+ 2024년 3월부터 INP(Interaction to Next Paint)가 FID를 대체
FID는 첫 번째 상호작용만을 측정, INP는 모든 페이지의 상호작용을 고려
3) CLS (Cumulative Layout Shift)
시각적 안정성 측정
사용자에게 웹 페이지가 표시되고 최종적으로 변화되는 정도를 측정한 수치
프론트엔드 성능을 측정하는 방법에는 어떤 것들이 있을까?
개발자도구 Lighthouse, Performance, Network...
Web Vitals Extension
참조
https://www.youtube.com/watch?v=IRj9vKBy9CA
https://web.dev/articles/fid?hl=ko
https://web.dev/articles/cls?hl=ko
https://devocean.sk.com/blog/techBoardDetail.do?ID=164863&boardType=techBlog
https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ko