크롬 개발자 도구를 사용한 성능 측정

www.youtube.com/watch?v=5fLW5Q5ODiE

이 글은 위의 영상을 기반으로 작성되었습니다.

 

Lighthouse(audits) 사용하기

되도록이면 시크릿 모드에서 성능 측정을 수행하십시오. 그렇지 않으면 확장 프로그램의 간섭을 받을 수도 있습니다.

페이지 로딩을 개선하기 위한 작업에 착수할 때, 항상 'audit(심사)' 부터 시작하십시오. 지금은 lighthouse 로 이름이 바뀌었습니다.

 

스로틀링(throttling) : 영어 단어에서 유래한 말로, 원어는 목을 조르는 행위를 말한다. 즉, 인간의 목을 조르는 것도 스로틀링이다. 이 점에서 유래하여 무언가의 출력을 조절하는 뜻도 가지고 있는데, 기계장치에 연결된 액체나 기체가 흐르는 관에 달린 밸브를 조절하는 광경을 생각해보면 적절한 의미 확장인 셈.

 

clear storage : 이용자가 웹사이트에 처음 방문해서 아예 캐시된 데이터가 전혀 없는 상황을 가정합니다.

측정을 수행하면 여러 지표 하에서의 성능 수치가 출력됩니다. 점수가 높을 수록 좋은 것입니다. 각각의 세부 지표들에 마우스를 갖다 대면 관련 문서를 더 볼수 있습니다.

 

• performance
  • First Contentful Paint : 페이지의 주요 콘텐츠가 언제 이용자에게 보여지는 시점
  • Time to Interactive : 페이지가 이용자의 입력을 다룰 수 있게 되는 시점
  • 등등

 

이제 Lighthouse(audit)을 통해 어떤 부분들을 개선해야 하는지를 알아냈다면 이제 실제로 개선 단계로 접어들어야 합니다. 이때 여러개를 한꺼번에 고치는게 아니라 한번에 하나씩 개선하도록 하시기 바랍니다.

 

텍스트 압축하기

• 네트워크 탭으로 넘어간 후 use larger quest rows 에 체크합니다.
• 브라우저의 새로고침 버튼을 우클릭해서 강력 새로고침을 수행합니다.
• 자원들은 2가지 값으로 그 크기가 나타나는데, 위의 값은 실제 다운로드된 크기를, 아래 값은 압축이 풀린 후의 리소스의 크기를 나타냅니다. 이 두개가 똑같다는 것은 압축이 이루어지지 않은 채로 리소스가 다운로드 되었다는 뜻입니다. 백엔드 부분에서 미들웨어에 compression 을 등록하면 이를 이뤄낼 수 있습니다.

 

Performance 패널 사용하기

• performance 패널로 이동합니다.
• 퍼포먼스를 정해진 기기환경에서 테스트하기 위해 네트워크 속도와 CPU 성능을 제한하고(스로틀링)
• start profiling and reload page를 클릭합니다.
• timeing 에서 어떤 자원이 어느 시점에 처리되는지를 순차적으로 볼 수 있습니다.
• main 에서는 어떤 이벤트들이 일어나는 지를 순차적으로 볼 수 있습니다. 리액트와 같은 프레임워크를 쓴다면 맨 앞 이벤트들은 주로 프레임워크에 의해 일어나는 것들일 것입니다.
• 이벤트의 하위에는 상위 이벤트를 전체를 이루는 하위 이벤트들이 위치하고 있습니다.