개선전 performance
Opportunities, Diagnostics
- 웹페이지의 문제점과 문제점을 해결하기 위한 가이드를 보여준다
Opportunities : 리소스 관점에서 가이드 제공 (로딩 성능 최적화)
Diagnostics : 페이지의 실행관점에서 가이드 제공 (렌더링 성능 최적화
Passed audits
- 잘 적용하고 있는 항목들을 표시한다
Opportunities/ Properly size images
- Resource Size : 이미지 사이즈
- Potential Savings : 최적화 했을 때 용량을 얼마큼 절약할 수 있는지
performance
-
페이지가 로드되면서 실행되는 작업들을 타임라인과 차트별로 보여준다.
-
위에 표시한 새로고침 버튼을 누르면 페이지가 새로고침 되면서 페이지의 작업들을 분석해 준다.
-
어떤 타입의 작업들이 어느정도 비율로 실행이 됐는지 나타내며 페이지 전체의 타임라인을 의미한다. 원하는 스크립트를 드래그해서 선택 해 볼 수가있다.
-
위에서 선택한 영역에서 벌어지는 작업들을 frame 차트 형태로 상세하게 보여준다.
-
선택한 영역에 대한 상세한 내용을 보여준다
모든 자바스크립트의 load가 끝난 시점에 많은 자바스크립트 코드가 실행이 된다.
오른쪽 으로 가보면
자바스크립트의 코드 실행이 끝난 시점
FCP(first contentful paint) : 실제로 화면에 그려지는 순간
FE