[Chrome] Performance Lighthouse Coverage

https://www.youtube.com/watch?v=v8H5ujL4Tt8

결의 브라우저 렌더링

재귀적 : 자기자신을 호출

https://tuhbm.github.io/2019/04/02/devTools-performance/

개발자도구 - Performance편

https://skyksit.tistory.com/entry/%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95-lighthouse

사이트 성능 측정 (lighthouse)

 

Coverage Tab 을 통해 사용되지 않는 CSS 코드 확인하기

source에 coverage

개발자 도구에서 ctrl + shift + p 를 누르고 'show coverage'를 검색해 선택하면 coverage 탭을 열 수 있습니다. 여기서는 시각적으로 아주 직관적이게 지금 화면을 그리는데 사용된 CSS와 사용되지 않는 CSS 를 확인할 수 있습니다. 초록색은 전체에서 사용되는 부분을, 빨간색은 사용되지 않는 부분을 의미합니다. 구체적인 파일 항목을 클릭하면 그 파일 안의 CSS 내용 중 사용되는/사용되지 않는 CSS 코드를 조회할 수 있습니다. 이 기능은 특히 외부 CSS 프레임워크를 사용할 때, 사용되지 않는 CSS를 줄임으로써 성능 최적화를 할 때 유용합니다.

• 만일 해당 페이지를 로드할 때 사용되는 CSS 를 보고 싶다면 바로 새로고침 아이콘을 누르면 되고
• 어떤 인터랙션에 사용되는 CSS 를 보고 싶다면 녹화 버튼을 클릭한 후 인터랙션을 수행한 후 중단시켜보면 됩니다.

출처: https://codingmoondoll.tistory.com/entry/크롬-개발자-도구로-CSS-다루기