본문

와탭모니터링
와탭 히트맵으로 AJAX 성능을 개선하는 방법

작성일 2023년 09월 04일
main

AJAX 모니터링, 왜 해야하나요?

AJAX(Asynchronous JavaScript And XML)란 비동기 자바스크립트와 XML의 약자로, 클라이언트가 서버에 비동기 방식으로 데이터를 요청하는 기법입니다. AJAX를 이용하여 웹 페이지 화면을 구성할 때 AJAX가 정상적으로 호출되지 않는다면 고객에게 정상적인 서비스를 제공할 수 없습니다. AJAX 수집 정보를 통해 고객이 서비스 이용 과정에 불편함을 느끼지 않도록 확인할 수 있습니다. 이번 콘텐츠에서는 와탭 브라우저 모니터링을 활용해 AJAX 성능을 관리하는 방법을 소개하겠습니다.

브라우저 모니터링 대시보드에서 AJAX 성능을 모니터링 하기

ajax hitmap

브라우저 모니터링 대시보드에서는 AJAX 요청을 히트맵 차트 형태로 제공합니다. 어떤 페이지에서 어떤 AJAX를 호출했는지, 그리고 상태는 어떠한지에 대한 정보를 볼 수 있습니다. AJAX 요청이 느리거나 문제가 있을 경우, 아래 소개하는 AJAX의 상태를 확인할 수 있습니다.

1. 특정 AJAX 요청에서 에러가 생기는 경우

ajax_special_error

AJAX 요청 시 응답 값이 400 이상이거나 요청 자체를 하지 못한 경우 황색 계열로 히트맵 차트에 표시됩니다. 이 색상이 나타나면 다음과 같은 상황이 발생한 것으로 추측할 수 있습니다.

  • 자바스크립트 코드상 요청이 적절하지 않은 경우
  • 인증 문제로 인해 요청이 실패한 경우
  • 잘못 된 주소로 요청을 전송한 경우
  • 서버에서 요청을 처리하는 중에 문제가 발생한 경우
  • 서버에서 응답이 늦어 타임아웃이 발생한 경우

2. AJAX 병목 현상

브라우저 애플리케이션 전반에서 AJAX 요청에 병목 현상이 발생한다면 다음과 같은 상황인지 확인하세요.

ajax_bottle_neck


  • 서버 성능 제한: 서버 측에서 처리할 수 있는 요청의 수가 제한되거나 서버 자원이 부족한 경우 병목 현상이 발생할 수 있습니다.
  • 대량의 데이터 전송: 전송되거나 받아야 하는 데이터의 크기가 매우 크다면 요청 처리에 시간이 오래 걸려 병목 현상이 발생할 수 있습니다.
  • 자바스크립트 실행 성능: AJAX 요청을 처리하는 자바스크립트 코드의 성능이 좋지 않거나 다른 스크립트와 충돌이 발생하는 경우 병목 현상이 발생할 수 있습니다.

3. 타임 아웃 현상

브라우저 애플리케이션 전반에서 AJAX 요청이 타임 아웃 오류가 발생한다면 다음과 같은 상황인지 확인하실 수 있습니다.

ajax_time_out


  • 서버 응답 지연: 서버 측에서 처리하는 데 시간이 오래 걸리거나 서버가 다운된 경우 타임아웃이 발생할 수 있습니다.
  • 네트워크 지연: 인터넷 연결이 불안정하거나 지연이 발생하면 AJAX 요청이 제때 완료되지 않을 수 있습니다.
  • 요청 처리 지연: 브라우저에서 요청을 처리하는 데 시간이 오래 걸리는 경우 타임아웃이 발생할 수 있습니다.
  • 대량의 데이터: 전송되거나 받아야 하는 데이터의 크기가 매우 크다면 요청 처리에 시간이 오래 걸려 타임아웃이 발생할 수 있습니다.
  • 자바스크립트 실행 오류: AJAX 요청을 처리하는 자바스크립트 코드에 문제가 있거나 다른 스크립트와 충돌이 발생하는 경우 타임아웃이 발생할 수 있습니다.

AJAX 상세 정보 확인하기

AJAX로 인한 성능 저하 현상을 발견했다면 어떤 페이지에서 어떤 AJAX가 문제를 일으키고 있는지 확인해야 합니다. AJAX 히트맵 외에도 ① 평균 AJAX 응답 시간 TopN 차트와 ② AJAX 실패 건수로 AJAX 상세 정보를 확인할 수 있습니다.

ajax_topN_fail_path


평균 AJAX 응답시간 TopN 차트에서는 브라우저 애플리케이션에서 발생하는 AJAX의 평균 로드 시간을 확인할 수 있습니다. 로드가 오래 걸리는 호스트 또는 경로(Path)를 확인할 수 있습니다.

AJAX 실패 건수는 브라우저에서 AJAX 요청이 정상적으로 이루어지지 않는 개수로, 브라우저에서 발생하고 있는 AJAX 실패 건수에 대해 실시간으로 확인할 수 있습니다.

AJAX를 모니터링 하고 브라우저 성능을 관리하세요

AJAX 모니터링을 통해 AJAX 요청의 원활한 처리와 AJAX 요청으로 인해 웹 브라우저 성능이 저하되는 것을 확인할 수 있습니다. 또한, 단순히 AJAX 요청의 처리와 웹 브라우저 성능을 넘어 보안 문제를 발견하고, 네트워크 대역폭을 적절하게 사용하는지 확인할 수 있습니다. 와탭 브라우저 모니터링을 통해 AJAX 성능을 모니터링 하고, 브라우저 성능을 최적으로 유지해 보시는 걸 추천합니다.

AJAX 성능 관리 모니터링은 와탭으로!
바로 시작하는 와탭 브라우저 모니터링 더 알아보기
안주현[email protected]
Marketing TeamManager

지금 바로
와탭을 경험해 보세요.