프론트엔드 웹 성능 측정

프론트엔드 개발자분으로부터 크롬 개발자도구를 이용하여 Network > Preview 창을 보는 계기가 있었는데, 이때 프론트엔드에서 웹 성능 측정이 얼마나 중요한 부분인지 알게 되었다. 

 

웹 성능 측정 = 웹 로딩 시간 

 

웹 성능 측정 도구들 

서버에서 콘텐츠(데이터)가 사용자에게 전달되기까지 여러 단계가 있기 떄문에 웹 성능을 결정짓는 요소는 다양하다. 

ex) 사용자의 디바이스 환경, 네트워크, DNS 응답속도, 웹 서버의 응답속도, 백엔드 처리속도, 프론트엔드 최적화 등 



Name : 로드하는 파일의 이름 표시. 마우스로 클릭항 이미지 확인 & 파일 내용 확인 가능 

Type : 파일 형식 표시 

Size : 파일 크기 표시 

Time : 로드되기까지 시간 표시 

하단의 106 requests~ 이런 부분들은 사이트가 로드되기까지 걸리는 총 시간 및 트래픽이 표시된다고 한다. 

위 항목들을 통해 비정상적으로 과부하가 걸리는 이미지나 파일을 확인해볼 수 있다고 한다. 

 

 

 

참고 https://imweb.me/faq?mode=view&category=30&category2=43&idx=15603