1. 성능 최적화의 필요성

CSR과 SSR을 사용할 때 왜 성능 최적화를 고민해야 할까요? [그림 5-1]을 보면 사용자에게는 속도가 중요하다는 것을 알 수 있습니다. 페이지 로딩이 완료되어야 상호작용이나 그 외 동작들을 수행할 수 있고, 사용자가 원하는 정보를 얼마나 쉽게 찾을 수 있는지 등을 판단할 수 있기 때문입니다.

[그림 5-1] 사용자에게 속도는 얼마나 중요할까? (Speed Matters, vol.3)

MSC 2019 행사에서 발표된 바에 따르면 49%의 사용자는 2초 이내에 페이지 로드가 완료되길 기대하고, 40%는 사이트가 열리는데 3초 이상 걸리게 된다면 해당 사이트 이용을 포기한다고 합니다.

또한 Google의 경우 사이트 순위를 지정할 때 로딩 속도를 고려하기 때문에 SEO를 위해서는 속도를 개선해야 함을 알 수 있습니다.

2. 성능 지표별 최적화 방법

성능은 상대적인 개념입니다. 디바이스와 네트워크 성능에 따라 웹 사이트의 로드 시간이 사용자마다 다르게 느껴질 수 있으며, 페이지 렌더링 기법에 따라 동일한 로드시간의 사이트라 하더라도 한 사이트가 다른 사이트보다 더 빨리 로드되는 것처럼 보일 수 있습니다. 또한 사이트가 빠르게 로드되는 것처럼 보이지만 사용자의 상호 작용에 대한 응답이 느릴 수도 있습니다.

따라서 성능에 대해 이야기할 때 정확하고 정량적으로 측정할 수 있는 객관적인 기준으로 성능을 언급하는 것이 중요합니다. 웹 페이지의 로딩 속도를 기준으로 빠르거나 느린 것을 인식하는 여러 시점을 측정 항목으로 활용합니다. 성능 측정을 하는 중요한 지표로는 FCP(First Contentful Paint), LCP(Largest Contentful Paint), FID(First Input Delay), TTI(Time to Interactive), TTFB(Time to First Byte) 등이 있습니다. 성능 측정 도구는 이러한 측정 항목들을 분석하여 성능 문제를 발견하고 해결하는 데 도움을 줍니다. 아래에서 성능을 측정하는 방법과 성능 지표별 최적화 방법을 자세하게 알아보겠습니다.[1]

2.1. 성능 측정 도구

개발자 도구

웹 브라우저에서 제공하는 개발자 도구를 통해 웹 페이지의 성능 측정, 디버깅, 네트워크 분석 등을 할 수 있습니다.크롬 브라우저에서 제공하는 개발자 도구의 경우 Network 탭에서 네트워크 요청 및 응답 시간을 분석하고, Performance 탭과 Performance Insights 탭에서 페이지 로딩 시간과 페이지 로드 동안 발생하는 이벤트와 작업을 확인할 수 있습니다.[2]

[그림 5-2] 크롬 개발자 도구 Performance insights 탭에서의 성능 측정 결과

[그림 5-3] 크롬 개발자 도구 Performance insights 탭 내부 Details의 성능 개선지표