도구를 사용하여 실적 측정

데이터 비용이 적게 들고 성능이 우수하고 복원력이 우수한 사이트를 구축하기 위한 핵심 목표가 몇 가지 있습니다.

목표마다 감사가 필요합니다.

목표 이유가 무엇인가요? 테스트 대상
개인 정보 보호, 보안, 데이터 무결성을 보장하고 API를 강력하게 사용할 수 있도록 지원합니다. HTTPS가 중요한 이유 모든 사이트 페이지/경로 및 애셋에 HTTPS가 구현되었습니다.
로드 성능 개선 사용자의 53% 는 로드 시간이 3초 이상 걸리는 사이트를 이탈합니다. 비동기식으로 로드하거나 지연할 수 있는 자바스크립트 및 CSS입니다. 상호작용까지의 시간 및 페이로드 크기에 대한 목표를 설정합니다(예: 3G의 TTI). 성능 예산을 설정합니다.
페이지 가볍게 만들기 • 데이터 요금제 제한이 적용된 사용자의 데이터 비용 절감 • 웹 앱 저장소 요구사항 감소(특히 저사양 기기 사용자에게 중요) • 호스팅 및 제공 비용 절감 • 서비스 성능, 안정성, 복원력 개선 페이지 용량 예산을 설정합니다(예: 400KB 미만으로 첫 로드). 과도한 자바스크립트가 있는지 확인합니다. 파일 크기를 확인하여 팽창 이미지, 미디어, HTML, CSS, 자바스크립트를 찾습니다. 지연 로드될 수 있는 이미지를 찾고 커버리지 도구를 사용하여 사용되지 않는 코드를 확인합니다.
리소스 요청 줄이기 지연 문제 감소 • 서빙 비용 감소 • 서빙 성능, 안정성, 복원력 개선 리소스 유형에 관계없이 과도하거나 불필요한 요청을 찾습니다. 예를 들어 반복적으로 로드되는 파일, 여러 버전으로 로드되는 자바스크립트, 사용되지 않는 CSS, 한 번도 조회되지 않거나 지연 로드될 수 있는 이미지가 있습니다.
메모리 사용량 최적화 특히 휴대기기에서 메모리에 새로운 병목 현상이 발생할 수 있습니다. Chrome 작업 관리자를 사용하면 홈페이지를 로드하고 다른 사이트 기능을 사용할 때 메모리 사용량을 위해 사이트를 다른 사이트와 비교할 수 있습니다.
CPU 부하 줄이기 휴대기기의 CPU가 제한적임(특히 저사양 기기) 과도한 자바스크립트가 있는지 확인합니다. 범위 도구를 사용하여 사용되지 않는 JavaScript 및 CSS를 찾으세요. 첫 번째 로드 시 불필요하게 실행되는 스크립트 및 과도한 DOM 크기를 확인하세요. 여러 버전으로 로드된 JavaScript나 소규모 리팩터링으로 피할 수 있는 라이브러리를 찾습니다.

웹사이트 감사를 위한 다양한 도구와 기법이 있습니다.

  • 시스템 도구
  • 브라우저 기본 제공 도구
  • 브라우저 확장 프로그램
  • 온라인 테스트 애플리케이션
  • 에뮬레이션 도구
  • 분석
  • 서버 및 비즈니스 시스템에서 제공하는 측정항목
  • 화면 및 동영상 녹화
  • 수동 테스트

아래에서는 각 감사 유형에 어떤 접근 방식이 적절한지 알아보세요.

리소스 요청 기록: 수, 크기, 유형, 타이밍

사이트 감사를 시작할 때 먼저 브라우저의 네트워크 도구를 사용하여 페이지를 먼저 확인하는 것이 좋습니다. 방법을 잘 모르겠다면 Chrome DevTools 네트워크 패널 시작 가이드를 참고하세요. Firefox, Safari, Internet Explorer, Edge에서도 유사한 도구를 사용할 수 있습니다.

변경하기 전에 결과를 기록해 두시기 바랍니다. 네트워크 요청의 경우 스크린샷만큼 간단할 수 있으며 프로필 데이터를 JSON 파일로 저장할 수도 있습니다. 아래에서 테스트 결과를 저장하고 공유하는 방법을 자세히 알아보세요.

네트워크 사용량 감사를 시작하기 전에 브라우저 캐시를 사용 중지하여 최초 로드 성능에 대한 정확한 통계를 확보해야 합니다. 이미 서비스 워커를 통해 캐싱을 사용하고 있다면 Cache API 스토리지를 삭제하세요. 시크릿 (비공개) 창을 사용하면 브라우저 캐시를 사용 중지하거나 이전에 캐시된 항목을 삭제할 필요가 없습니다.

다음은 브라우저 도구로 확인해야 하는 몇 가지 핵심 기능과 측정항목입니다.

  • 부하 성능: Lighthouse는 로드 측정항목 요약을 제공합니다. 애디 오스마니가 페이지 로드의 주요 사용자 순간에 관한 훌륭한 요약을 작성했습니다.
  • 리소스와 메모리 사용량을 로드하고 파싱하는 타임라인 이벤트 더 자세히 알아보려면 메모리와 JavaScript 프로파일링을 실행하세요.
  • 총 페이지 크기 및 파일 수
  • JavaScript 파일의 수와 가중치입니다.
  • 대용량의 개별 자바스크립트 파일 (100KB 이상).
  • 사용되지 않는 JavaScript입니다. Chrome 범위 도구를 사용하여 확인할 수 있습니다.
  • 이미지 파일의 총 개수 및 무게입니다.
  • 유난히 큰 개별 이미지 파일.
  • 이미지 형식: JPEG 또는 SVG일 수 있는 PNG가 있나요? WebP가 대체와 함께 사용되나요?
  • 반응형 이미지 기법 (예: srcset)의 사용 여부입니다.
  • HTML 파일 크기.
  • CSS 파일의 총 개수 및 크기입니다.
  • 사용되지 않은 CSS입니다. (Chrome에서는 범위 패널을 사용합니다.)
  • 웹 글꼴 (아이콘 글꼴 포함)과 같은 다른 자산을 사용하는 데 문제가 있는지 확인합니다.
  • DevTools 타임라인에서 페이지 로드를 차단하는 요소가 있는지 확인하세요.

빠른 Wi-Fi나 빠른 모바일 데이터 연결을 사용하는 경우 낮은 대역폭과 긴 지연 시간 에뮬레이션으로 테스트합니다. 데스크톱은 물론 모바일에서도 테스트해야 합니다. 일부 사이트에서는 UA 스니핑을 사용하여 다양한 기기에 다양한 애셋과 레이아웃을 제공합니다. 기기 시뮬레이션뿐만 아니라 원격 디버깅을 사용하여 실제 하드웨어에서 테스트해야 할 수도 있습니다.

메모리 및 CPU 로드 확인

변경하기 전에 메모리 및 CPU 사용량을 기록해 두세요.

Chrome에서는 창 메뉴에서 작업 관리자에 액세스할 수 있습니다. 이렇게 하면 웹페이지의 요구사항을 간단하게 확인할 수 있습니다

열려 있는 4개의 브라우저 탭의 메모리 및 CPU 사용량을 보여주는 Chrome 작업 관리자
Chrome 작업 관리자 — 메모리 및 CPU 낭비에 주의하세요.

최초 및 후속 로드 성능 테스트

Lighthouse, WebPagetest, Pagespeed Insights는 속도, 데이터 비용, 리소스 사용량을 분석하는 데 유용합니다. 또한 WebPagetest는 정적 콘텐츠 캐싱, 첫 바이트까지의 시간, 사이트에서 CDN을 효과적으로 사용하는지 여부도 확인합니다.

결과 저장

핵심 프로그레시브 웹 앱 요구사항 테스트

Lighthouse는 보안, 기능, 접근성, 성능 및 검색엔진 성능을 테스트하는 데 도움이 됩니다. 특히 Lighthouse는 사이트에서 서비스 워커 및 웹 앱 매니페스트와 같은 PWA 기능을 성공적으로 구현했는지 확인합니다.

Lighthouse는 또한 사이트가 허용되는 오프라인 환경을 제공할 수 있는지 테스트합니다.

Lighthouse 보고서를 JSON으로 다운로드하거나 Lighthouse Chrome 확장 프로그램을 사용하는 경우 보고서를 GitHub Gist로 공유할 수 있습니다. 공유 버튼을 클릭하고 뷰어에서 열기를 선택한 다음 새 창에서 공유 버튼을 다시 클릭하고 Gist로 저장합니다.

Chrome Lighthouse 보고서를 gist로 내보내는 방법을 보여주는 스크린샷
Lighthouse Chrome 확장 프로그램에서 gist로 보고서 내보내기 — 공유 버튼 클릭

분석, 이벤트 추적, 비즈니스 측정항목을 사용하여 실제 실적 추적

가능하다면 이탈률, 페이지에 머문 시간, 이탈 페이지 등 비즈니스 요구사항과 관련된 변경사항을 적용하기 전에 애널리틱스 데이터를 기록해 두세요.

가능하면 영향을 받을 수 있는 비즈니스 및 기술 측정항목을 기록해 변경 후 결과를 비교할 수 있습니다. 예를 들어 전자상거래 사이트에서는 스트레스 및 지구력 테스트를 위해 분당 주문을 추적하거나 통계를 기록할 수 있습니다. 페이지 용량과 리소스 요청을 줄이면 백엔드 스토리지 비용, CPU 요구사항, 제공 비용, 복원력이 향상될 가능성이 높습니다.

분석이 구현되지 않는다면, 지금이 바로 적기입니다. 비즈니스 측정항목과 분석은 사이트의 작동 여부를 최종 결정하게 됩니다. 해당하는 경우 버튼 클릭 및 동영상 재생과 같은 사용자 작업을 위한 이벤트 추적을 통합합니다. 사용자가 '전환'으로 이동하는 경로인 목표 흐름 분석을 구현할 수도 있습니다.

Google 애널리틱스 사이트 속도를 통해 성능 측정항목과 비즈니스 측정항목의 상관관계를 확인할 수 있습니다. '홈페이지 로드 속도'와 '홈페이지를 통한 방문 시 매출이 어땠나요?'의 예가 있습니다.

Google 애널리틱스 사이트 속도를 보여주는 스크린샷

Google 애널리틱스는 Navigation Timing API의 데이터를 사용합니다.

JavaScript 성능 API 중 하나 또는 자체 측정항목을 사용하여 데이터를 기록할 수 있습니다. 예를 들면 다음과 같습니다.

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

ReportingObserver를 사용하여 브라우저 지원 중단 및 개입 경고를 확인할 수도 있습니다. 이 API는 실제 사용자로부터 실시간으로 실제 측정 결과를 얻기 위한 여러 API 중 하나입니다.

실제 경험: 화면 및 동영상 녹화

모바일 및 데스크톱에서 페이지 로드를 동영상으로 녹화합니다. 고속 프레임과 타이머 디스플레이를 추가하면 더 잘 작동합니다.

스크린캐스트를 저장할 수도 있습니다. Android, iOS, 데스크톱 플랫폼에는 다양한 스크린캐스트 녹화 앱과 동일한 작업을 위한 스크립트가 있습니다.

동영상 녹화 페이지 로드는 WebPagetest의 필름 스트립 뷰 또는 Chrome DevTools의 스크린샷 캡처와 매우 유사하게 작동합니다. 페이지 구성요소 로드 속도(빠르고 느린 부분과 느린 속도)에 관한 실제 기록을 확인할 수 있습니다. 동영상 녹화물과 스크린캐스트를 저장하여 추후 개선사항과 비교해 보세요.

사용 전후를 나란히 비교하면 개선사항을 효과적으로 보여줄 수 있습니다.

안 되는 사람이랄까?

해당하는 경우 웹 블로트 점수를 확인합니다. 이 테스트는 재미있는 테스트이지만 코드 팽창을 보여주거나 개선 여부를 보여줄 수 있는 강력한 방법이 될 수 있습니다.

아래의 내 사이트 비용은 얼마인가요?를 보면 서로 다른 지역에서 사이트를 로드하는 데 드는 재정적 비용을 대략적으로 확인할 수 있습니다.

whatdoesmysitecost.com 웹사이트 스크린샷

다른 여러 독립형 및 온라인 도구를 사용할 수 있습니다. perf.rocks/tools를 확인하세요.