개요

웹페이지 렌더링 문제는 웹페이지가 사용자의 기기에서 올바르게 표시되거나 작동하지 않을 때 발생합니다． 이 문제는 불완전하거나 왜곡된 이미지, 잘못된 레이아웃, 느린 로딩 시간 또는 응답하지 않는 기능 등의 다양한 방법으로 나타날 수 있습니다． 이 문제의 원인은 다양한 요인에서 비롯될 수 있습니다． 

HTTP Archive (HAR)는 웹페이지 렌더링 문제를 진단하고 해결하는 데 도움을 줄 수 있는 도구입니다． HAR는 관리자가 웹페이지에 접근할 때 생성되는 요청, 대응, 시간을 포함한 네트워크 트래픽 데이터를 캡처하고 분석할 수 있게 해줍니다． 이 데이터는 웹페이지가 어떻게 로딩되고 작동하는지를 이해하는 데 도움을 주며, 병목현상이나 오류를 식별하고 렌더링 문제의 근본 원인을 파악하는 데 도움이 됩니다．

이 글에서는 HAR 데이터를 활용하여 웹페이지 렌더링 문제를 해결하는 방법을 논의할 것입니다．

환경

HAR 데이터가 필요합니다．

지침

문제를 재현하면서 HAR 데이터를 수집하십시오． HAR 데이터를 수집하는 방법에 대한 지침은 이 글을 참고하세요． 수집한 HAR 데이터를 활용하여 HTTP 상태 코드와 HTTP 요청의 응답 시간을 확인함으로써 문제를 드러내는 방법을 알아보겠습니다．  

HTTP 상태 코드

HTTP 상태 코드는 클라이언트의 서버 요청 상태에 대한 정보를 제공하여 통신 과정에서 발생할 수 있는 문제를 진단하고 해결하는 데 도움을 줍니다． 아래는 일반적인 HTTP 상태 코드와 그 의미입니다． 자세한 내용은 HTTP/1.1 상태 코드 정의 페이지를 참조하세요.

• 200 - 성공
• 404 - 페이지를 찾을 수 없음 / 잘못된 요청
• 401 - 권한 없음
• 403 - 금지됨 
• 304 - 수정되지 않음 (콘텐츠가 캐시됨)
• 500 - 내부 서버 오류

단계

1. 수집한 HAR 데이터를 Google HAR 분석기에 로드하십시오
2. HTTP 상태 코드로 요청을 필터링합니다．
   예시
   아래는 Google HAR 분석기에 로드된 파일을 보여줍니다． 이 연결은 콘텐츠가 올바르게 로드되지 않은 Facebook을 탐색하려는 시도입니다． 성공하지 못한 (비-2xx) HTTP 상태 코드로 필터링하면 도메인 이름 x.x.fbcdn.net에 대한 많은 403 (금지됨) 대응이 있음을 확인할 수 있습니다 (노란색으로 표시됨)． 다음 단계는 이러한 요청이 금지된 이유를 좀 더 자세히 조사하는 것입니다． 
   
   
   
3. Google에 대한 접근이 제한된 국가 (예: 중국)에서는 Google HAR 분석기를 사용할 수 없습니다． 이 경우, 데이터를 수집할 때 사용된 동일한 개발 도구에서 HAR 데이터를 로드하고 HTTP 상태 코드에 따라 내림차순으로 정렬할 수 있습니다．
   

긴 웹페이지 로딩 시간

웹 애플리케이션에서 가장 흔히 발생하는 문제 중 하나는 웹페이지 로딩 속도가 느리거나, 경우에 따라 웹페이지 전체 로딩이 실패하는 것입니다． 수집된 HAR 데이터를 활용하여 각 요청의 세부 사항을 파악하고 로딩 시 상당한 지연을 겪고 있는 요청들을 식별할 수 있습니다． 특정 요청들이 무한 로딩 상태에 갇혀 있어 애플리케이션의 전반적인 속도 저하에 기여할 가능성이 있습니다． HAR 데이터를 분석하면 이러한 문제 있는 요청들을 파악하고 적절한 조치를 취할 수 있게 해줍니다．

단계

1. 수집한 HAR 데이터를 Google HAR 분석기에 로드하십시오

2. 패킷 지연 응답 요청(일반적으로 총 시간에서 가장 긴 막대)를 클릭하세요

3. 지연의 주요 원인(차단, 대기 또는 수신)을 확인하세요
   중요한 시간 필드
   차단됨 시간 - 요청이 브라우저에 의해 전송되기 전에 대기한 시간.
   대기 시간 - 서버의 응답을 기다리는 시간． 이 값이 높음 경우, 서버가 바쁘거나 성능 문제일 수 있습니다． 아래 그림에서 우리는 서버로부터 약 5초의 대기 시간을 볼 수 있습니다:
   수신 시간 - 이것은 클라이언트에게 필요한 정보를 서버가 전송하는 데 사용된 시간입니다． 일반적으로 여기가 네트워크 문제가 감지되는 곳입니다． 
   
   참고: 시간 필드는 Chrome의 개발자 도구를 사용할 때도 사용할 수 있으며, 유사한 시간 단계 분석을 제공합니다． 시간 분석 단계에 대한 자세한 설명은 타이밍 미리보기를 참조하세요.
   

4. 예를 들어, Google HAR 분석기에 접근할 수 없습니다． (예시: 중국) 이 경우, 데이터를 수집한 동일한 개발자 도구에서 HAR 데이터를 로드할 수 있습니다．
5. 분석은 응답 시간이 가장 긴 연결을 식별하는 데 중점을 둔 2단계와 유사할 것입니다． 예를 들어, 아래 제공된 스크린샷의 개요 섹션에서, 우리는 로딩이 지연된 여러 연결을 관찰할 수 있습니다． 개요 섹션 내에서 이러한 연결을 강조 표시함으로써, 일부 요청이 로드되는 데 30초 이상 걸린다는 것을 알 수 있습니다． 이러한 연결 중 하나를 선택하면 그것이 app.launchdarkly.com에 대한 요청임을 알 수 있습니다．
   
6. 로드 시간이 긴 요청이 식별되면, 지연의 근본 원인을 조사할 수 있습니다． 연구해볼 만한 잠재적 요인 중 하나는 이러한 요청을 차단하고 있는 온프레미스 방화벽의 존재 여부입니다．
7. 특정 지역에서는 중국과 같은 애플리케이션 내의 일부 장기 보류 요청이 내장 트래커에 기인할 수 있는 알려진 문제입니다． 자세한 사항은 중국 | 웹페이지 렌더링 문제를 참조하세요．