웹 사이트 유지 관리는 여러 팀의 노력을 결합합니다. 중단이 발생하면 개발자와 엔지니어링 팀이 문제를 직접 해결할 수 있지만 디지털 마케터는 사이트 관리에 대한 동일한 액세스 권한이 없을 수 있습니다. 디지털 마케터로서 팀의 성공은 사이트 성능에 따라 다르지만 스스로 문제를 식별하거나 해결할 수 있는 도구가 없을 수 있습니다.
당사의 웹사이트 성능 모델링(WPM) 도구는 인사이트 사이트의 가용성과 성능을 알려줍니다. 즉시 사용 가능한 및 모니터의 정기 점검을 통해 사이트 성능에 대해 결코 확신할 수 없습니다.
데이터가 수집되면 페이지 자산에 대한 사용자 세부 정보를 추적하는 다양한 차트를 볼 수 있습니다. 종합하면 사용자가 사이트를 경험하는 방식을 이해하는 데 도움이 될 수 있습니다.
목표
이 문서는 코드가 없는 웹사이트 모니터링 도구를 설정하는 데 도움이 되며 데이터를 이해하는 과정을 안내합니다. 이 자습서에서는 다음을 수행합니다.
모니터링할 페이지를 선택하면 New Relic은 웹 사이트 가용성, 끊어진 링크, 성능 및 SSL 인증서 만료에 대해 페이지를 확인하는 전 세계 여러 서버의 모니터 집합을 배포합니다. 시작하려면 홈페이지를 선택하는 것이 좋습니다.
New Relic은 모니터를 배포하는 데 몇 분 정도 걸리며 웹 사이트에 대한 데이터를 받기 시작합니다. 모니터는 수동으로 추가한 페이지의 성능만 확인한다는 점에 유의하십시오.
Google PageSpeed API 키 추가
New Relic의 점수가 Google에 있는 점수와 일치하도록 Google API에서 핵심 웹 바이탈을 가져옵니다. 초기 설정 후 이러한 점수를 계속 캡처하려면 Google PageSpeed API 키를만들어야 합니다.
데이터를 상황에 맞게 배치
모니터가 New Relic에 데이터를 보고하면 사용자 경험과 SEO 순위를 개선하는 데 도움이 되는 메트릭이 표시됩니다. 다음은 요약 페이지에 표시되는 데이터 종류의 예입니다.
첫 번째 섹션은 ping 데이터를 보여줍니다. 이러한 종류의 데이터는 기본 사이트 기능을 확인하는 가용성 확인입니다.
Site availability. 페이지가 전혀 로드되었는지 여부를 보고합니다. 그렇지 않은 경우 서버나 도메인에 문제가 있을 수 있습니다.
Page load time. 페이지에서 모든 자산을 로드하는 데 걸리는 시간의 중앙값을 수집합니다. 이 데이터는 콘텐츠 유형과 크기별로 더 세분화됩니다.
SSL Validity. 이는 SSL 인증서가 유효한지, 만료 중인지 또는 만료되었는지 알려줍니다. 여기에는 SSL 인증서를 갱신해야 하는 날짜도 포함됩니다.
Broken links. 페이지의 모든 링크를 테스트한 후 어떤 링크가 끊어졌는지 보고합니다.
당사의 모니터는 귀하의 사이트와 상호 작용하는 모니터를 통해 사이트 동작을 캡처합니다. 이렇게 하면 매일 업데이트된 데이터를 볼 수 있으므로 자산이나 페이지가 로드되지 않는 시기를 추측할 필요가 없습니다.
WPM은 선택적으로 다른 신세틱 검사와 동일한 일정으로 Google의 PageSpeed API에서 코어 웹 바이탈을 가져옵니다. 이는 성능에 대한 주기적이고 전반적인 정보를 제공하지만, 실제 방문자의 실시간 피드는 아닙니다. 실제 사용자가 자신의 디바이스와 네트워크에서 사이트를 어떻게 경험하는지 확인해야 하는 경우, WPM과 함께 실사용자 모니터링을 추가하는 방법은 다음 단계를 참조하십시오.
First contentful paint. 이는 첫 번째 자산이 페이지에 로드되는 데 걸리는 시간을 캡처합니다. 위 스크린샷에서는 페이지에 무언가를 로드하는 데 3.22초가 걸렸습니다.
Largest contentful paint. 콘텐츠가 포함된 첫 번째 페인트와 달리 이는 페이지에서 가장 큰 콘텐츠가 완전히 로드되는 데 걸리는 시간을 캡처합니다. 예를 들어 중요한 캠페인에 대한 정보가 페이지의 가장 큰 자산에 나타나는 경우 이 숫자는 사용자가 이를 보기 전에 기다리는 시간을 알려줍니다. 위 스크린샷에서는 2.79초가 걸렸습니다.
Interaction to next paint. 사용자가 사이트의 요소와 상호 작용할 때 사용자의 복합 복합을 처리하는 데 시간이 걸립니다. 이 숫자는 요청(사용자 복합체 복합)과 응답(사용자 요청에 따라 페이지가 어떻게 변경되는지) 사이의 지연으로 해당 시간을 캡처합니다. .
Cumulative layout shift. 이는 사이트에 있는 다양한 자산의 시각적 안정성을 측정합니다. 예를 들어 사용자가 사이트의 기본 페이지로 이동한 후 로드하는 동안 이미지가 이동할 수 있습니다. 이런 움직임은 예상치 못한 일이다.
시간 경과에 따라 데이터를 수집하여 사이트 성능에 대한 보다 풍부한 그림을 얻을 수 있습니다. 시간 창을 확대 및 축소하고 위의 gif와 같이 특정 사건 주변에서 데이터가 어떻게 변경되는지 확인할 수 있습니다. 완료되면 상단의 타임스탬프 버튼을 클릭하여 원하는 기간으로 다시 조정합니다.
웹페이지는 HTML, 이미지, JavaScript 및 비디오와 같은 다양한 유형의 콘텐츠로 구성됩니다. 당사의 콘텐츠 차트는 다양한 콘텐츠 유형이 서로 상대적으로 어떻게 수행되는지 보여줍니다. 예를 들어:
Content size 각 유형의 크기를 킬로바이트 단위로 표시합니다. 위 차트를 참조하면 JavaScript 콘텐츠 유형이 특정 페이지의 이미지보다 비례적으로 작은 것을 확인할 수 있습니다. 사이트의 성능이 다운된 경우 개발팀에 앱 레벨에서 사이트를 최적화하도록 요청할 수 있습니다.
Content sources 콘텐츠가 호스팅되는 위치를 크기별로 분류합니다. 예를 들어, 위 차트에서 콘텐츠의 대부분은 노란색으로 표시된 뉴렐릭에서 제공됩니다. 콘텐츠가 최적화되었으나 페이지에서 여전히 손상되는 경우 콘텐츠 소스 위치를 변경하면 해당 오류를 해결할 수 있습니다.
Content load time 전체 페이지의 로드 시간을 기준으로 특정 콘텐츠 유형을 로드하는 데 걸리는 시간을 보여줍니다.
Network 콘텐츠가 페이지에 전달되는 방식과 해당 콘텐츠를 전달하는 데 걸리는 시간을 분석합니다.
페이지가 느리게 로드되는 경우 Content 섹션을 사용하여 문제의 잠재적 원인을 진단할 수 있습니다. 예를 들어, Content size 과 Content load time 를 비교하면 CSS 가 너무 많은 리소스를 차지하고 마지막에 로드되어 콘텐츠가 포함된 최대 페인트가 지연될 수 있는지 여부를 인사이트에서 알 수 있습니다. 콘텐츠 크기는 최적이지만 페이지 로드가 여전히 느린 경우 네트워크 또는 소스 문제일 수 있습니다.
사용자 참여가 감소했지만 사이트를 사용할 수 있고 콘텐츠가 최적화되어 있다면 다른 문제가 있을 수 있습니다. 문제 해결을 위한 가능한 여정은 다음과 같습니다.
팀이 랜딩 페이지를 업데이트한 전날에 타임슬라이스 데이터에서 트래픽이 급격히 감소했음을 알 수 있습니다.
끊어진 링크가 보고되었음을 알 수 있습니다. 사이트 전체에서 사용되는 배너 내부의 링크입니다.
이 시점에서 관련 팀과 협력하여 끊어진 링크를 수정하고 사이트의 나머지 부분에 대한 업데이트를 배포할 수 있습니다.
다음은 뭐지?
웹사이트 성능 모니터링은 설치 없이 사이트의 가용성 및 코어 웹 바이탈을 파악할 수 있도록 지원합니다 ― 사이트에 대한 엔지니어링 액세스 권한이 없을 때 유용합니다. 이는 본질적으로 신세틱 방식의 저빈도 검사입니다: 모니터는 소수의 외부 위치에서 주기적으로 실행되며, 코어 웹 바이탈은 자체 방문자가 아닌 Google의 PageSpeed API에서 가져옵니다.
사이트에 대한 실제 사용자 경험을 상시적으로 파악하려면 브라우저 모니터링을 추가하십시오. 페이지를 직접 계측하므로, 모든 메트릭은 주기적인 샘플 대신 실제 방문자 세션에서 가져옵니다.
두 가지를 비교하면 다음과 같습니다:
웹사이트 성능 모니터링
브라우저 모니터링
데이터 소스
신세틱 검사+Google PageSpeed API
실제 방문자 세션
설정
설치 없음
브라우저 에이전트 설치
핵심 웹 바이탈
주기적, 랩 기반
지속적, 실제 사용자로부터
고장
없음
브라우저, 디바이스, 지역 등에 따라
오류 및 세션 세부 정보
사용할 수 없습니다
JS 오류, 세션 트레이스 및 세션 리플레이
WPM을 기준 검사(업타임, 끊어진 링크, SSL 만료)로, 브라우저 모니터링을 실제 사용자 경험 및 코어 웹 바이탈 추세에 대한 신뢰할 수 있는 출처로 사용할 것을 권장합니다. 시작하려면:
실제 페이지 로드, 코어 웹 바이탈 및 JS 오류 캡처를 시작하려면 브라우저 에이전트를 설치 하십시오.
