웹 성능 최적화 (2) 썸네일형 리스트형 크롬 개발자 도구의 Performance 패널 알아보기 Performance 패널 이번 글에서는 크롬 개발자 도구에서 Performace 패널에 대해서 알아보겠습니다. Performance 패널은 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니다. 특히 브라우저의 메인 스레드에서 실행되는 자바스크립트를 볼 수 있어서, 어떤 코드가 성능상에 문제가 되는지를 확인할 때 사용하기 좋습니다. Performance 패널으로 이동하여 새로고침 버튼을 누르면 현재 페이지를 새롭게 로딩하면서 그 과정에서의 여러 작업을 기록하게 됩니다. 각 파트에 대해서 알아보겠습니다. 1. CPU 차트, 네트워크 차트, 스크린 샷 최상단에 있는 CPU 차트는 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지를 비율로 보여 줍니다. 스크립트 실행 작업은 노란색, 렌더링작업은.. 크롬 개발자 도구(Lighthouse)를 이용하여 페이지 성능 검사하기 Lighthouse란? Lighthouse란 크롬에서 제공하는 웹 성능을 측정하고 개선 방향을 제시하는 자동화 툴입니다. Lighthouse를 이용하면 현재 페이지의 웹 바이탈(Web Vitals) 지표를 확인하여 웹 성능을 개선하기 위한 취해야 할 액션들을 파악할 수 있어 웹 성능을 최적화하는데에 매우 중요한 툴입니다. Mode Lighthouse는 3가지 모드를 제공합니다. Navigation: 초기 페이지 로딩을 분석합니다. (기본값) Timespan: 사용자가 정의한 시간동안을 분석합니다. 주로 사용자 인터렉션이 포함된 상황을 분석할 때 사용합니다. Snapshot: 특정 상태에서의 성능을 분석합니다. Device Device 항목은 데스크탑 환경, 혹은 모바일 환경에서 분석을 할지에 대해서 설정.. 이전 1 다음
