웹 사이트 유지 관리는 여러 팀의 노력을 결합합니다. 중단이 발생하면 개발자와 엔지니어링 팀이 문제를 직접 해결할 수 있지만 디지털 마케터는 사이트 관리에 대한 동일한 액세스 권한이 없을 수 있습니다. 디지털 마케터로서 팀의 성공은 사이트 성능에 따라 다르지만 스스로 문제를 식별하거나 해결할 수 있는 도구가 없을 수 있습니다.
당사의 웹사이트 성능 모델링(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
. 페이지의 모든 링크를 테스트한 후 어떤 링크가 끊어졌는지 보고합니다.
당사의 모니터는 귀하의 사이트와 상호 작용하는 모니터를 통해 사이트 동작을 캡처합니다. 이렇게 하면 매일 업데이트된 데이터를 볼 수 있으므로 자산이나 페이지가 로드되지 않는 시기를 추측할 필요가 없습니다.
Google PageSpeed는 New Relic에서 수집한 다른 메트릭과 함께 핵심 웹 바이탈을 보고합니다. 이 데이터를 통해 사용자가 사이트를 경험하는 방식에 대한 통찰력을 얻을 수 있습니다.
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 가 너무 많은 리소스를 차지하고 마지막에 로드되어 콘텐츠가 포함된 최대 페인트가 지연될 수 있는지 여부를 인사이트에서 알 수 있습니다. 콘텐츠 크기는 최적이지만 페이지 로드가 여전히 느린 경우 네트워크 또는 소스 문제일 수 있습니다.
사용자 참여가 감소했지만 사이트를 사용할 수 있고 콘텐츠가 최적화되어 있다면 다른 문제가 있을 수 있습니다. 문제 해결을 위한 가능한 여정은 다음과 같습니다.