<a href="https://www.maeil-mail.kr/question/306" target="_blank" rel="noopener nofollow">👉🏻원문 보기</a>
<blockquote>
프론트엔드와 관련된 질문이에요.
</blockquote>
크게 보면 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가 많은 경우를 찾아서, 코드 스플리팅이나 번들 최적화를 진행해볼 수 있습니다.
<h2>FCP는 몇 초 이하면 양호하다고 판단하나요? 🤔</h2>
FCP는 사용자가 첫 번째 콘텐츠를 볼 수 있는 시점을 의미합니다. Google Web Vitals 기준으로는 **1.8초 이하를 ‘Good’**으로 평가하고 있습니다.
1.8초를 넘기기 시작하면 사용자 입장에서 '느리다’고 체감하기 시작하고, 특히 3초를 초과하면 이탈률이 급격히 올라가는 경향이 있기 때문에 항상 1.8초를 목표로 최적화를 진행하고 있습니다.
<h2>LCP가 느릴 때 개선 방법에 대해서 알고 계신가요? 🤔</h2>
LCP는 페이지 내 가장 큰 요소가 렌더링 완료되는 시점을 의미합니다. 해당 수치가 느릴 경우 주로 다음 방법으로 최적화를 진행해볼 수 있습니다.
첫번째로 크리티컬 렌더링 리소스 최적화입니다. LCP 요소(대부분 메인 이미지나 Hero Text)가 늦게 내려오는 경우가 많기 때문에, 해당 리소스를 서버에서 우선순위를 높게 주거나 <code>preload</code>를 적용합니다.
두번째로는 이미지 최적화입니다. 이미지를 WebP 포맷으로 변환하거나, 이미지 사이즈 자체를 줄이는 방법을 사용합니다.
마지막으로 Lazy Loading 적용이 있습니다. LCP에 해당하지 않는 나머지 리소스는 <code>loading=&quot;lazy&quot;</code>를 적용해서 불필요한 리소스 로딩을 막습니다.
<h2>📚 추가 학습자료를 공유합니다.</h2>
<a href="https://web.dev/articles/optimize-lcp?hl=ko" target="_blank" rel="noopener nofollow">[web.dev] 최대 콘텐츠 렌더링 시간 최적화</a>

이 시대를 살아가는 모든 대한민국 개발자들이 이곳에 모일때까지.

Shout out to all my Korean devs out there!
Stay wicked, guys! 

퍼포먼스를 분석할 때 Chrome DevTools에서 어떤 지표를 체크해야 하나요?