웹 성능이란
웹 성능(Web Performance)은 웹 콘텐츠가 사용자에게 빠르게 전달될 수 있도록 하는 시스템들의 성능을 의미합니다. 즉, 웹 로딩 시간과 같다고 할 수 있습니다.
웹 성능이 중요한 이유
웹 성능이 중요한 이유는 너무나 명확합니다. 웹 서비스가 느리다는 것은 그 서비스를 이용하기가 불편하다는 뜻이고, 서비스가 불편하다면 사람들은 그 서비스를 이용하지 않을 것이기 때문입니다. 여러분도 웹 서비스가 느려서 몇 초간 로딩만 되는 경우 그냥 뒤로가기를 눌러본 경험이 있을 겁니다.
미국의 쇼핑몰인 월마트는 로딩 시간에 따른 구매율을 조사했는데, 로딩이 2초 내에 완료되었을 대 사용자의 구매가 가장 많았고, 로딩 시간이 길어질수록 구매율이 낮아지는 것을 발견하였습니다. 또 구글의 조사 자료에 따르면 웹 페이지가 3초 안에 로딩되지 않으면 53%의 사용자가 떠나고 로딩 시간이 길어지면 길어질수록 이탈률이 늘어납니다.
웹 성능을 측정하는 도구들
웹 성능을 결정짓는 요소는 다양합니다. 서버에서 콘텐츠가 사용자에게 전달되기까지 여러가지 단계가 있기 때문입니다. 사용자의 디바이스 환경, 네트워크, DNS 응답 속도, 웹 서버의 응답 속도, 백엔드의 처리 속도, 프론트엔드의 최적화 등이 웹 성능에 영향을 미칩니다. 그렇다면 현재 우리 웹 서비스의 웹 성능이 어느 정도인지 판단하고 문제점을 찾는 것이 중요할 텐데요. 이 글에서는 웹 성능을 측정할 수 있는 여러가지 도구들에 대해 알아보겠습니다.
크롬 브라우저 개발자 도구
구글 크롬 브라우저에 내장 되어있는 개발자 도구는 편리하고 강력한 기능을 제공합니다. 크롬을 실행하고 Ctrl + Shift + I, 맥에서는 CMD + OPT + I 를 누르면 개발자도구를 실행 할 수 있습니다.
개발자 도구의 네트워크 탭에서는 전체 HTTP 요청, 응답 시간, 전달 받는 파일들의 크기, DOMContentLoaded 시간, 모든 로드 완료 시간을 확인할 수 있습니다. 최적화를 진행한 후 웹 로딩시간이 빨라지는 것은 이 탭을 통해 확인 할 수 있습니다. 그리고 '폭포(waterfall)' 차트를 통해서는 어떤 파일이 로딩 시간을 얼마나 소모했는지 시각적으로 보여주어서 로딩이 느린 파일을 찾는 데 도움이 됩니다.
만약 이 도구를 통해서 로딩 시간이 느린 파일을 찾는다면, 해당 파일의 크기를 줄이기 위해 노력하거나 캐시를 활용하거나 CDN을 사용하거나 하는 여러가지 최적화 방안을 고려해 볼 수 있습니다만, 이 글은 성능 측정 도구에 초점을 맞추므로 자세히 설명하지는 않겠습니다.
WebPageTest
WebPageTest(WPT)는 웹 성능을 테스트할 수 있는 서비스입니다. 유료 프라이싱도 있지만 무료로도 많은 기능을 제공하고 있습니다.
WebPageTest에서는 유선망이나 모바일망 네트워크, 다양한 기기, 브라우저로 테스트가 가능하고, 세계의 여러 위치에서도 성능 측정이 가능합니다. 글로벌한 서비스라면 여러 지역에서 웹 성능을 측정해보는 것이 중요할 텐데, WebPageTest서비스를 이용하면 여러 나라에서 측정한 성능지표를 확인 할 수 있습니다.
위 이미지는 해당 서비스를 이용하여 구글 페이지를 테스트 해본 결과 중 First View 항목입니다.
First Byte 크기, Start Render 시간, FCP(First Contentful Paint, 첫 번째 텍스트 또는 이미지가 표시되는 데 걸린 시간), Speed index(페이지 콘텐츠가 얼마나 빨리 표시되는지), LCP(Largest Contentful Paint, 가장 큰 텍스트 또는 이미지가 표시된 시간), CLS(Cumulative Layout Shift, 표시 영역 안에 보이는 요소들이 얼마나 이동되는지), TBT(Total Blocking Time, FCP부터 웹페이지가 상호작용이 가능해지기 까지의 시간), Total Bytes 에 대한 정보들을 확인 할 수 있습니다.
이 외에도 해당 서비스는 많은 옵션을 다양하게 설정하고 테스트를 진행할 수 있기 때문에, 테스트가 필요한 특정 요건이 있다면 해당 요건에 맞춰 테스트를 할 수 있습니다. 예를 들어, 자바스크립트를 실행하지 않도록 하는 옵션, 인증 정보를 추가해서 인증을 한 상태로 테스트하는 옵션, 요청 헤더를 추가해서 테스트하는 옵션 등등이 있습니다.
구글 PageSpeed Insights
PageSpeed 는 구글에서 개발한 서비스이고, 구글에서 만든 웹 성능 지표를 바탕으로 다양한 웹 성능 영역을 검출합니다.
PageSpeed Insight라는 도구로 웹사이트 성능 최적화 요소를 평가할 수 있습니다. 위의 WebPageTest 처럼 세부적인 옵션을 선택해서 테스트할 수 있는 것은 아니지만, 심플하게 PC와 모바일 환경에서 테스트를 진행할 수 있습니다.
구글 PageSpeed insight 의 검사 결과 화면의 일부입니다. 웹 성능의 종합적인 점수를 매겨주고 있고, 여러가지 측정 항목에 대한 세부적인 값들을 확인 할 수 있습니다. 또한 코어 웹바이탈 영역의 성능 지표도 확인 할 수 있습니다.
그리고 위와 같이 결과 화면에서는 웹 성능 향상과 최적화를 위해서 진행할 수 있는 작업과 어떤 방법을 개선할 수 있는지도 자세히 알려주고 있습니다. 심플하지만 굉장히 친절한 서비스입니다.
Lighthouse
크롬 브라우저의 개발자도구에 또다른 웹 성능 측정에 유용한 도구가 있는데, 바로 Lighthouse 입니다. Lighthouse는 크롬 브라우저에 내장되어 있고 개발자도구에서 Lighthouse 탭을 통해 사용할 수 있습니다.
Lighthouse 탭을 통해서 현재 접속한 페이지의 웹 성능 측정 정보를 확인할 수 있습니다. 웹 성능과 더불어 웹 접근성 지표를 확인하기에도 좋은 도구입니다.
마치며
지금까지 웹 성능을 측정할 수 있는 몇 가지 도구에 대해 알아봤습니다. 사실 여러가지 유용한 도구들을 활용하여 웹 성능을 측정해볼 수 있지만, 회사나 조직에서 측정 결과를 활용하기 위해서는 이것만으로는 애매할 수 있습니다. 명확한 기준이 없기 때문이죠. 그래서 조직에서 웹 성능 측정 결과를 활용하기 위해서는 명확한 기준을 잡아야 합니다. 예를 들면 이미지나 폰트 파일의 최대 크기, JS 파일 크기의 합이 몇을 넘어가면 안된다는 정량적인 기준, FCP나 TTI와 같은 지표가 1초를 넘어가면 안된다는 시간 기반의 기준, WebPageTest나 Lighthouse 같은 도구에서 성능 점수가 몇 점 이상이어야 한다와 같은 기준 등이 있습니다. 이러한 기준을 명확히 잡고 웹 서비스 성능 최적화를 활용해 나간다면 좋은 사용자 경험을 제공하는 웹 서비스, 더불어 조직의 이익을 증대시키는 웹 서비스를 만들어나갈 수 있을 것입니다.
읽어주셔서 감사합니다.
참고 자료
강상진 윤호성 박정현, <웹에 날개를 달아주는 웹 성능 최적화 기법> 루비페이퍼. 2021
