Web Performance .00 시작하기 전에

안녕하세요. RyuWoong 입니다.

이번에 포스팅 할 내용은 Web Performance입니다.

JS와 React를 공부하며 내부 로직을 최적화 하는 것 외에, 신경 써야할 것들이 더 있다는 걸 알게모르게 눈치 채고 있었습니다.

 

우리가 React를 다루면서 re-Rendering이라던지, CSS IN JS를 사용하면 어떤 장단점이 있는지 등에 대해 알아가다 보면, 근본적인 무언가가 연관이 있어서 성능에 영향을 미치고 있다는 느낌을 받게 됩니다. 새로운 방법론이나, 도구가 등장하는 것은 기존의 문제나 불편함을 해소하기 위해 등장한 것이니까요.

 

이번에는 근본적인 것을 찾아 여정을 떠나 볼까 합니다.

저 같은 Junior 개발자들이나 입문자들에게 도움이 되었으면 합니다.

 

Web Perfomance?

Web Perfomance는 로드 시간 및 런타임의 객관적인 측정과 사용자 경험을 의미합니다. 쉽게 말해 로드 되는데 걸리는 시간, 상호 작용 가능한 시간 및 반응성, 그리고 상호 작용 중 콘텐츠가 얼마나 부드러운지를 말합니다.

• 스크롤이 부드러운가요?
• 버튼을 클릭 할 수 있나요?
• 팝업이 빠르게 로드 되고 표시되며 애니메이션도 부드러운가요?

Web Perfomance는 로드하는데 걸리는 시간, 초당 프레임 수 및 상호 작용 가능해지는 시간과 같은 객관적인 측정과 콘텐츠가 로드 되는데 느껴지는 시간과 같은 주관적인 경험을 모두 포함한 것 입니다.

 

사이트가 응답하는 데 걸리는 시간이 길면 사용자는 사이트를 방문하지 않게 됩니다. 따라서 로딩 및 응답 시간을 최소화하고 경험의 긴 꼬리 부분을 비동기식으로 로드하면서 가능한 빠르게 사용 가능하고 상호 작용이 가능한 경험을 제공하는 것이 중요합니다.

 

우리는 이 Web Perfomance를 측정하고, 최적화 하는 방법에 대해 알아보겠습니다.