퍼포먼스를 분석할 때 Chrome DevTools에서 어떤 지표를 체크해야 하나요?
분야: 프론트엔드
크게 보면 Performance, Lighthouse, Network, Memory, 그리고 Coverage 탭을 중점적으로 살펴볼 수 있습니다.
우선, Performance 탭에서는 First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to Interactive (TTI), Total Blocking Time (TBT), 그리고 Cumulative Layout Shift (CLS)와 같은 지표를 확인할 수 있습니다.
이 지표들은 각각 사용자가 첫 콘텐츠를 볼 수 있는 시점, 메인 콘텐츠가 로딩 완료되는 시점, 그리고 페이지와 정상적으로 상호작용할 수 있게 되는 시점 등을 보여줍니다. 이러한 지표들은 사용자 경험 품질을 정량적으로 진단하는 데 매우 중요하므로, 수치에 이상이 있을 경우 개선해야 합니다.
또한, Lighthouse 탭을 활용해서 앱을 전체적으로 스캔해볼 수 있습니다. 여기서는 Performance, Accessibility, Best Practices, SEO 영역별로 종합 점수를 확인하고, 특히 퍼포먼스 점수 하락 요인을 분석해서 개선할 포인트를 찾습니다.
다음으로 Network 탭에서는, 각 리소스의 다운로드 크기나 Time to First Byte(TTFB) 시간을 중점적으로 체크합니다. 이를 통해 서버 응답 지연이나, 비효율적으로 무거운 리소스가 있는지 확인할 수 있습니다.
추가로 앱의 장기 사용성까지 고려한다면, Memory 탭에서 Heap Snapshot을 찍어 메모리 누수가 있는지 분석하고, 불필요하게 유지되는 객체(특히 'Detached DOM Tree')가 남아있는지를 확인할 수 있습니다.
마지막으로 Coverage 탭을 이용해, 현재 불필요하게 로드되고 사용되지 않는 JavaScript나 CSS가 많은 경우를 찾아서, 코드 스플리팅이나 번들 최적화를 진행해볼 수 있습니다.
FCP는 몇 초 이하면 양호하다고 판단하나요? 🤔
FCP는 사용자가 첫 번째 콘텐츠를 볼 수 있는 시점을 의미합니다. Google Web Vitals 기준으로는 1.8초 이하를 'Good'으로 평가하고 있습니다.
1.8초를 넘기기 시작하면 사용자 입장에서 '느리다'고 체감하기 시작하고,
특히 3초를 초과하면 이탈률이 급격히 올라가는 경향이 있기 때문에 항상 1.8초를 목표로 최적화를 진행하고 있습니다.
LCP가 느릴 때 개선 방법에 대해서 알고 계신가요? 🤔
LCP는 페이지 내 가장 큰 요소가 렌더링 완료되는 시점을 의미합니다. 해당 수치가 느릴 경우 주로 다음 방법으로 최적화를 진행해볼 수 있습니다.
첫번째로 크리티컬 렌더링 리소스 최적화입니다. LCP 요소(대부분 메인 이미지나 Hero Text)가 늦게 내려오는 경우가 많기 때문에, 해당 리소스를 서버에서 우선순위를 높게 주거나 preload를 적용합니다.
두번째로는 이미지 최적화입니다. 이미지를 WebP 포맷으로 변환하거나, 이미지 사이즈 자체를 줄이는 방법을 사용합니다.
마지막으로 Lazy Loading 적용이 있습니다. LCP에 해당하지 않는 나머지 리소스는 loading="lazy"를 적용해서 불필요한 리소스 로딩을 막습니다.