무료로 웹 페이지의 퍼포먼스를 한 번에 가시화할 수 있는 툴 「Firefox Profiler」 사용
- 공유 링크 만들기
- X
- 이메일
- 기타 앱
무료로 웹 페이지의 퍼포먼스를 한 번에 가시화할 수 있는 툴 「Firefox Profiler」 사용
파이어폭스는 웹 개발자를 위한 개발 툴이 탑재되어 있다. 이 개발 툴에 웹사이트의 퍼포먼스를 가시화시킬 수 있는 분석 툴 '파이어폭스 프로필er'가 추가되어 있어서 실제로 사용을 해봤다.
Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog
https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/
Firefox Profiler 를 사용하려면 분석 대상 웹 페이지를 연 상태에서 키보드의 「Shift」와「F5」를 동시에 누르고, 나타난 메뉴로부터 「기록시작」을 클릭한다.
기록을 개시하면, 웹 페이지를 갱신하거나 웹 페이지내의 요소를 클릭하거나 하는 퍼포먼스를 체크하고 싶은 조작을 하고, 조작이 완료된 후에 「기록 캡쳐」를 클릭하면 된다.
그러면 성능 분석 결과가 새로운 탭에 표시된다.
분석 결과에서는 각 요소가 읽혔을 때의 CPU 사용률이나……
통신시간을 확인 가능하다.
또, 상부에는 분석 기간내의 스크린 쇼트가 즐비하게 표시되고 있기 때문에 「이 조작을 실행했을 때의 퍼포먼스를 알고 싶다」라고 할 경우에 도움이 된다.
분석 결과는 Mozilla의 서버에 업로드하여 공유 가능.공유를 하려면 화면 우측 상단에 Upload Local Profile을 클릭하고 원하는 내용을 선택한 후 Upload를 클릭하면 된다.
다음은 표시되는 URL을 메일이나 메시지 앱으로 공유하면 다른 기계에서도 같은 분석 결과를 볼 수 있다.
또, 공유 설정 화면에서 「Download」를 클릭하면……
분석결과를 포함하는 JSON 파일을 gzip 형태로 저장할 수 있다.
Firefox Profiler의 자세한 사용법은 아래 공식 문서에 해설되어 있으므로 더 자세히 알고 싶다면 확인가능하다..
User Guide - Firefox Profiler - Documentation
https://profiler.firefox.com/docs/
- 공유 링크 만들기
- X
- 이메일
- 기타 앱