[프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)

렌더링에 관심을 가지기

처음 프런트 앤드 개발자가 되면 해당 기능을 개발하는데 가장 큰 관심과 열정을 쏟는다.

하지만, 연차가 어느 정도 차게 되면 내가 짠 코드의 구조와 성능에 대해 관심이 생기기 시작한다.

오늘은 그 중 렌더링에 관련된 얘기다.

 

렌더링이란?

가장 간단하게 설명하면 웹 애플리케이션 상에 데이터를 표시하는 행위이다.

즉 사용자의 화면 혹은 다른 출력장치에 내가 프로그래밍한 요소를 문서 객체모델(DOM) 형태로 보여준다.

우리가 만들어진 화면은 HTML로 이루어진 문서 구조와 CSS로 만들어진 스타일 요소들이

혼합된 형태로 화면상에 그려지게 된다.

HTML의 경우 DOM(Document Object Model)으로 구현
CSS의 경우 CSSOM(CSS Object Mode)으로 구현 

 

렌더링 성능 모니터링

간단한 HTML과 css의 경우 하드웨어 성능이 요즘은 워낙 좋아져서 빠른 속도로 페이지를 그리는 것이 가능하나,

복잡한 시스템의 경우는 좀 다르다.

우리는 복잡한 시스템을 구축하게 되면 페이지 렌더링 성능을 분석해야 되는 상황이 오게 될 것이다.

특히 많은 양의 애니메이션 등을 넣은 홈페이지라면 성능에 대해 관심을 가지게 된다.

 

크롬 개발자 Performance 탭 활용하기

내가 사용하는 주 브라우저는 크롬 개발자 도구는 개발자들에게 다양한 웹 분석 내용을 제공한다.

그중 크롬 개발자 도구 중 퍼포먼스 탭을 이용하면 내 페이지의 렌더링 관련된 정보를 얻을 수 있다.

Ctrl+Shift + I 단축키를 이용해도 개발자 도구가 실행한 뒤 performance tab으로 이동한다.

크롬 개발자 도구 실행하기

 

크롬 개발자 도구 Performance tab 이동하기

 

크롬 개발자도구 Performance Tab 활용하기 

크롬 performance tab에서는 해당 페이지가 랜더링 될 때 걸리는 시간 및 어느 구간에서 병목이 나타나는지를 분석해준다.

크롬 퍼포먼스 도구에서 record 버튼 혹은 reload 버튼을 클릭하여 분석을 시작할 수 있다.

분석이 시작된 뒤 원하는 동작을 완료하거나, reload가 완료되면 stop 버튼을 누른다.

그럼 분석 결과가 performance 패널에 나타나는 것을 볼 수 있다.

 

네이버를 통해 reload 분석을 해본 결과

 

 

summary tab을 보면 간단하게 Loading과 Rendering 등에 몇 초가 소요되었는지를 확인할 수 있다.

이러한 분석 결과로 사이트 등 랜더링이 느릴 경우 느린 구간을 확인하여 해당 부분을 개선해 나갈 수 있는 자료로 활용할 수 있다.

performance 결과화면

자세한 performance 결과 지표에 대한  분석은 아래 링크에서 확인하면 된다.

developers.google.cn/web/tools/chrome-devtools/evaluate-performance?hl=ko

시작해요, 런타임 성능 분석  |  Chrome DevTools  |  Google Developers

 

 

 

FPS  성능 분석

webpage 내 애니메이션을 다량으로 사용하고 있다면 FPS 분석을 진행해보길 추천한다.

FPS란?

FPS(Frames-Per-Second)는 초당 프레임 수로 성능 지표의 가장 기본지표이다. 

사용자들은 60 FPS 정도로 동작할 때 만족한다고 한다. 

주로 게임에서 자주 이용했지만, 애니메이션 등 다양한 기능이 추가되어 웹상에서도 분석 자료로 이용 중이다.

FPS의 경우 내가 짠 애니메이션들이 끊김 없이 잘 동작되는지를 확인할 수 있다.

 

 

크롬 개발자 도구를 활용한 FPS 성능 분석

먼저 크롬 브라우저에서 내가 성능을 분석할 사이트에 들어간 뒤 

마우스 우클릭을 눌러 검사를 클릭해서 크롬 개발자 도구를 실행한다.

Ctrl+Shift + I 단축키를 이용해도 개발자 도구가 실행된다.

 

FPS미터를 실행하려면

크롬 개발자 도구에서 Ctrl+Shift+P를 눌러서 명령 메뉴를 실행시킨 뒤 

Show frame Per seconds meter를 실행해주면 된다.

실행 후 크롬 FPS미터가 브라우저 위에 성생 된 걸 볼 수 있다.

 

마우스를 움직이면서 초당 애니메이션 프레임이 작동되는 상태와 GPU 메모리 사용량을 확인할 수 있다.

앞서 말했듯이 애니메이션은 60 FPS로 실행되면 끊김없이 부드럽게 보이게 되고,

60FPS 미만일 경우 프레임 렌더링이 오래 걸려 애니메이션이 매끄럽지 않고 버벅거릴 수 도있고 보인다.

크롬 FPS meter의 경우 애니메이션을 실행했을 때

높은 %가 기록되면 애니메이션이 부드럽게 진행되고 % 낮아질수록 버벅거리거나 병목이 일어나는 곳이라고 보면 된다.

FPS 성능 실시간 분석 화면 약 90% 성능 유지 

 

또한, 하단의 GPU 사용량을 체크해서 내가 만든 웹 프로그램이

너무 많은 GPU를 사용하는 것은 아닌지 확인할 수 있다.

 

혹시 내가 넣은 개발 코드의  애니메이션들이 많이 버벅거리고 있다면

이러한 실시간 지표를 확인하여 내 웹 상내 적정한 속도와 FPS가 실행되고 있는지 점검이 가능합니다.