Projects
[NutriNotes] 프론트엔드 프로젝트 성능 개선기
기능 구현이 끝난 후 프론트엔드 성능이 사용자 경험에 영향을 미칠 수 있다는 것을 알고, 서비스의 품질 향상을 위해 LightHouse와 번들 분석기를 이용해 성능 지표를 측정하며 개선하고자 했습니다. LightHouse를 통해 성능을 측정하였을 때, FCP와 LCP 지표가 낮게 나온 것을 확인하였고, 이를 개선하였습니다. 먼저 해당 지표들의 의미를 알아보고, 개선점을 살펴보겠습니다. FCP와 LCP FCP(First Contetnful Paint)는 유저가 페이지에 처음 진입했을 때, 콘텐츠가 처음 렌더되기 시작하는 시점을 뜻합니다. 즉, 페이지 콘텐츠가 모두 렌더 되지 않아도 일부가 렌더 되기 시작했다면, 이 시점을 측정합니다. 이때 콘텐츠는 이미지나 텍스트, 요소, 내용이 있는 요소를 뜻합니다. 이..
