관련링크

이전 콘텐츠에서도 다뤘듯이, 페이지 로드 속도가 느리면 사용자는 페이지를 이탈할 확률이 높아지고, 매출로 직결될 가능성도 낮아집니다. 웹 페이지를 최적화하고 사용자 경험 개선을 위해서는 페이지를 구성하는 리소스를 지속적으로 모니터링하고 개선해야 해야하는데요.

페이지 로드 분석을 통해 어떤 요소가 페이지 로드를 느리게 만드는지 식별하고, 문제점을 개선하여 최적화된 사용자 경험을 제공할 수 있습니다. 페이지 로드를 분석하는 것은 사용자가 서비스나 제품을 더 많이 이용하고 더 긴 시간 동안 이용하도록 만들어 줍니다.

와탭 브라우저 모니터링을 통해 빠르고 쾌적한 웹 페이지를 만들기 위한 리소스 모니터링 방법을 소개하겠습니다.

---

먼저 와탭 브라우저 모니터링 대시보드에 페이지 로드 타임라인 위젯을 통해서 전체 페이지 로드 성능 전반적으로 확인할 수 있습니다. 페이지 로드 타임라인 위젯은 어느 구간에서 페이지 로드가 느린지 확인할 수 있습니다.

다음으로, 로딩이 느린 페이지를 발견합니다. 가장 빨리 확인할 수 있는 지표는 페이지 로드 시간과 페이지 로드 수입니다. 페이지 로드 시간과 페이지 로드 수 차트를 통해 사용자 접속량과 로드 시간이 긴 페이지를 발견할 수 있습니다.

예를 들어, 브라우저 모니터링을 활용해 사용자가 많은 페이지에서 로드 시간이 길어진 것을 발견했다고 가정하겠습니다. 사용자가 많은 페이지는 그만큼 비즈니스에서 중요하므로, 해당 페이지의 성능을 개선하는 데 집중할 수 있습니다.

반대로, 로딩 속도가 느린 페이지의 접속량이 많지 않다면 개발 리소스 투자 우선 순위를 정하는데 도움이 되는 데이터를 제공할 수 있습니다.

그 다음으로 페이지 로드 이벤트를 히트맵 형태로 확인할 수 있습니다. 페이지 로드가 느릴수록 히트맵 차트 상단에 표시됩니다.

이제 속도가 느려진 페이지를 확인했다면 원인을 찾아야겠죠? 와탭 브라우저 모니터링 메뉴에서 [분석] → [페이지 로드 히트맵]으로 이동하면 히트맵을 확인할 수 있습니다. 페이지 로드가 느린 영역을 드래그하면 페이지 목록에서 페이지 로드 이벤트 리스트를 확인할 수 있습니다.

페이지 목록에서 돋보기 모양을 클릭하면 페이지 로드 상세 창이 나타납니다. 페이지 로드 상세 창에서는 페이지 로드 성능을 분석하기 위한 다양한 지표와 성능에 영향을 주는 요소를 파악할 수 있습니다.

페이지 로드 과정 중 구간 별 소요된 시간을 그래프 차트로 제공합니다. 차트를 통해 페이지 로드 과정 중 느린 구간을 파악하고 최적화를 진행할 수 있습니다.

• 페이지 정보: 최종 사용자의 접속 환경, 접속 페이지 정보, 사용자 ID, 세션 ID 정보를 제공합니다. 이 정보들로 특정 환경에서만 발생하는 이상 현상을 판단해 볼 수도 있습니다.
  

페이지 로드 타이밍 정보에서는 페이지 구간마다 로드에 걸리는 시간을 확인할 수 있습니다. 구간에 대한 주요 지표는 아래와 같습니다.

• 리다이렉트: 브라우저가 웹 페이지를 불러올 때 리다이렉트 과정에서 걸린 평균 시간입니다.
• 캐싱: 브라우저가 웹 페이지를 불러오면서 캐시된 리소스를 검색하는데 걸린 평균 시간입니다.
• DNS 탐색: 브라우저가 웹 페이지를 불러오면서 웹사이트 도메인을 조회하는데 걸린 평균 시간입니다.
• TCP 연결: 브라우저가 웹 페이지를 불러올 때 TCP 헨드셰이크 과정에서 걸린 평균 시간입니다.
• 응답 대기: 브라우저가 웹 페이지를 불러오면서 네트워크 요청을 보낸 후 서버로부터 첫 번째 바이트가 수신될 때까지 걸린 평균 시간입니다.
• 렌더링: 서버로부터 다운로드한 리소스를 화면에 렌더링하고 페이지 로드 이벤트를 완료하는데 걸린 평균 시간입니다.
• Load Time: 브라우저가 웹 페이지를 완전히 불러오는데 걸린 평균 시간입니다.
• Front-End: 웹 페이지를 초기 렌더링 하는데 걸린 평균 시간입니다.
• Back-End: 페이지 로드 요청부터 리소스를 다운로드 하는데 걸린 평균 시간입니다.
  

[리소스 목록] 메뉴를 통해 페이지 로드에 영향을 주는 리소스를 확인해보겠습니다.

웹 페이지에 콘텐츠를 띄우기 위해서는 서버로부터 리소스를 다운로드 해야합니다. 이 리소스는 페이지 로드 성능에 큰 영향을 줄 수 있습니다. 페이지 로드 상세 창의 리소스 목록에서는 로딩 속도와 리소스 크기를 빠르게 확인할 수 있습니다.

리소스의 시작 시간을 기준으로 타임라인 차트를 제공해 로딩 속도가 느린 리소스를 한 눈에 파악할 수 있습니다. 리소스 목록을 통해 페이지 로딩에 영향을 주는 리소스 개선에 도움을 얻을 수 있습니다. 리소스를 선택하면 나타나는 리소스 상세 창을 통해 상세 시간 정보를 확인할 수 있습니다.

마지막으로, 브라우저 모니터링을 통해 프론트엔드와 백엔드에서 어떻게 성능을 개선할 수 있을지 대표적인 개선 방법도 함께 소개하겠습니다.

백엔드 구간을 최적화하기

• 캐시 설정 최적화: 웹 페이지의 캐시 설정이 최적화되지 않거나 캐시 만료 시간이 너무 짧으면 캐싱 속도가 느려질 수 있습니다. 콘텐츠 유형 별로 적절한 캐시 만료 시간을 설정하는 것이 중요합니다.
• 서버 응답 시간: 서버의 처리 속도가 느리거나 서버가 과부하 상태인 경우 응답 시간이 느려질 수 있습니다. 서버 성능을 최적화 하거나 서버 용량을 증설하는 조치 등이 필요할 수 있습니다.
• 서버 위치: 서버와 사용자 간의 거리가 멀 경우 지연 시간이 길어질 수 있습니다. 이를 해결하기 위해 Content Delivery Network(CDN)과 같은 서비스를 사용하여 사용자와 가까운 위치에서 콘텐츠를 제공할 수 있도록 하세요.
• 네트워크 지연: 인터넷 연결이 느리거나 불안정한 경우 백엔드 구간의 로딩 속도에 영향을 끼칠 수 있습니다. 이 문제는 사용자의 네트워크 상황에 따라 달라질 수 있습니다.
• 파일 크기: 큰 파일을 다운로드할 때 속도가 느려질 수 있습니다. 이미지, 스크립트, 스타일 시트 등의 리소스를 최적화하고 압축하여 파일 크기를 줄이세요.
  

프론트엔드 구간을 최적화하기

• 무거운 CSS: 많은 수의 CSS 규칙과 복잡한 선택자를 사용한다면 브라우저가 스타일 계산에 시간을 많이 소모할 수 있습니다. CSS 최적화 및 규칙 간소화, 불필요한 스타일 제거 작업을 통해 렌더링 속도를 개선하세요.
• 이미지 최적화: 무거운 이미지 파일은 렌더링 속도를 느리게 만들 수 있습니다. 이미지를 압축하고 적절한 크기와 포맷으로 최적화 하세요. 필요에 따라 페이지 로딩 기법을 사용하여 렌더링 속도를 개선하세요.
• 웹 폰트 사용: 웹 폰트는 사용자에게 다양한 폰트 스타일을 제공할 수 있지만 로딩 시간에 영향을 줄 수 있습니다. 웹 폰트를 최적화하고 필요한 것만 사용하세요. 폰트 로딩 전에 텍스트를 표시하는 방식으로 렌더링 속도를 개선할 수도 있습니다.

  ---

지금까지 브라우저 모니터링으로 페이지 로드에 영향을 주는 요인을 확인하는 방법을 공유 드렸습니다. 브라우저 모니터링을 통해 페이지에 유입하는 고객이 이탈하지 않게 성능 최적화를 하고, 매출과 비즈니스 성장에 도움이 되셨길 바랍니다!