데이터 비용이 적고 성능이 우수하며 탄력적인 사이트를 구축하기 위한 몇 가지 핵심 목표가 있습니다.
목표마다 감사가 필요합니다.
| 목표 | 이유가 무엇인가요? | 테스트할 항목 |
|---|---|---|
| 개인 정보 보호, 보안, 데이터 무결성을 보장하고 강력한 API 사용을 지원하세요. | HTTPS가 중요한 이유 | 모든 사이트 페이지/경로 및 애셋에 HTTPS가 구현되었습니다. |
| 로드 성능 개선 | 로드하는 데 3초 이상 걸리면 사용자의 53% 가 사이트를 이탈합니다. | 비동기식으로 로드되거나 지연될 수 있는 JavaScript 및 CSS 대화 시간 및 페이로드 크기에 대한 목표를 설정합니다(예: 3G의 TTI). 실적 예산을 설정합니다. |
| 페이지 가벼워지기 | • 데이터 한도가 설정된 데이터 요금제 사용자의 데이터 비용 절감 • 웹 앱 스토리지 요구사항 감소 - 특히 사양이 낮은 기기 사용자에게 중요합니다. • 호스팅 및 게재 비용 절감 • 게재 성능, 안정성, 복원력 개선 | 페이지 크기 예산을 설정합니다(예: 첫 번째 로드 400KB 미만). 과도한 JavaScript가 있는지 확인합니다. 파일 크기를 확인하여 불필요하게 큰 이미지, 미디어, HTML, CSS, JavaScript를 찾습니다. 지연 로드할 수 있는 이미지를 찾고 적용 범위 도구를 사용하여 사용되지 않는 코드를 확인합니다. |
| 리소스 요청 줄이기 | • 지연 시간 문제 감소 • 게재 비용 감소 • 게재 성능, 안정성, 복원력 개선 | 모든 유형의 리소스에 대한 과도하거나 불필요한 요청을 찾습니다. 예를 들어 반복적으로 로드되는 파일, 여러 버전으로 로드되는 JavaScript, 사용되지 않는 CSS, 조회되지 않거나 지연 로드될 수 있는 이미지가 여기에 해당합니다. |
| 메모리 사용량 최적화 | 특히 휴대기기에서 메모리가 새로운 병목 현상이 될 수 있습니다. | Chrome 작업 관리자를 사용하여 홈페이지를 로드하고 다른 사이트 기능을 사용할 때 메모리 사용량이 다른 사이트와 어떻게 다른지 비교합니다. |
| CPU 부하 줄이기 | 휴대기기의 CPU가 제한적입니다(특히 사양이 낮은 기기). | 과도한 JavaScript가 있는지 확인합니다. 범위 도구를 사용하여 사용되지 않는 JavaScript 및 CSS를 찾습니다. 과도한 DOM 크기와 첫 로드 시 불필요하게 실행되는 스크립트를 확인합니다. 여러 버전으로 로드된 JavaScript 또는 사소한 리팩터링으로 피할 수 있는 라이브러리를 찾습니다. |
웹사이트를 감사하는 데는 다양한 도구와 기법이 있습니다.
- 시스템 도구
- 기본 제공 브라우저 도구
- 브라우저 확장 프로그램
- 온라인 테스트 애플리케이션
- 에뮬레이션 도구
- 애널리틱스
- 서버 및 비즈니스 시스템에서 제공하는 측정항목
- 화면 및 동영상 녹화
- 수동 테스트
아래에서 각 감사 유형에 적합한 접근 방식을 알아보세요.
리소스 요청 기록: 수, 크기, 유형, 시점
사이트를 감사할 때는 브라우저의 네트워크 도구로 페이지를 확인하는 것이 좋습니다. 방법을 잘 모르겠다면 Chrome DevTools 네트워크 패널 시작 가이드를 참고하세요. Firefox, Safari, Internet Explorer, Edge에서도 유사한 도구를 사용할 수 있습니다.
변경하기 전에 결과를 기록해 두세요. 네트워크 요청의 경우 스크린샷처럼 간단할 수 있습니다. 프로필 데이터를 JSON 파일로 저장할 수도 있습니다. 테스트 결과를 저장하고 공유하는 방법에 관한 자세한 내용은 아래를 참고하세요.
네트워크 사용량 감사를 시작하기 전에 브라우저 캐시를 사용 중지하여 첫 로드 실적에 관한 정확한 통계를 얻어야 합니다. 이미 서비스 워커를 통해 캐싱을 실행하고 있다면 Cache API 저장소를 삭제합니다. 브라우저 캐시를 사용 중지하거나 이전에 캐시된 항목을 삭제할 필요가 없도록 시크릿 (비공개) 창을 사용하는 것이 좋습니다.
다음은 브라우저 도구로 확인해야 하는 몇 가지 핵심 기능 및 측정항목입니다.
- 부하 성능: Lighthouse는 부하 측정항목의 요약을 제공합니다. Addy Osmani가 페이지 로드의 주요 사용자 순간을 요약한 글을 작성했습니다.
- 리소스 로드 및 파싱, 메모리 사용량에 관한 타임라인 이벤트 더 자세히 알아보려면 메모리 및 JavaScript 프로파일링을 실행하세요.
- 총 페이지 크기 및 파일 수입니다.
- JavaScript 파일의 수 및 크기입니다.
- 특히 큰 개별 JavaScript 파일 (예: 100KB 초과)
- 사용하지 않는 JavaScript Chrome 범위 도구를 사용하여 확인할 수 있습니다.
- 이미지 파일의 총 개수 및 크기입니다.
- 특히 큰 개별 이미지 파일
- 이미지 형식: JPEG 또는 SVG일 수 있는 PNG가 있나요? WebP가 대체 항목과 함께 사용되나요?
- 반응형 이미지 기법 (예: srcset)이 사용되는지 여부
- HTML 파일 크기입니다.
- CSS 파일의 총 개수 및 가중치입니다.
- 사용하지 않는 CSS Chrome에서는 범위 패널을 사용하세요.
- 웹 글꼴 (아이콘 글꼴 포함)과 같은 다른 애셋의 문제가 있는 사용 여부를 확인합니다.
- DevTools 타임라인에서 페이지 로드를 차단하는 항목이 있는지 확인합니다.
빠른 Wi-Fi 또는 빠른 모바일 데이터 연결을 사용하는 경우 낮은 대역폭 및 높은 지연 시간 에뮬레이션으로 테스트합니다. 모바일과 데스크톱에서 모두 테스트해야 합니다. 일부 사이트에서는 UA 스니핑을 사용하여 기기에 따라 서로 다른 애셋과 레이아웃을 제공합니다. 기기 시뮬레이션뿐만 아니라 원격 디버깅을 사용하여 실제 하드웨어에서 테스트해야 할 수도 있습니다.
메모리 및 CPU 부하 확인
변경하기 전에 메모리 및 CPU 사용량을 기록합니다.
Chrome에서는 창 메뉴에서 작업 관리자에 액세스할 수 있습니다. 이는 웹페이지의 요구사항을 간단하게 확인하는 방법입니다.
최초 로드 및 후속 로드 성능 테스트
Lighthouse, WebPagetest, Pagespeed Insights는 속도, 데이터 비용, 리소스 사용량을 분석하는 데 유용합니다. WebPagetest에서는 정적 콘텐츠 캐싱, 시간당 첫 번째 바이트, 사이트에서 CDN을 효과적으로 사용하는지도 확인합니다.
결과 저장
- WebPagetest: 테스트 결과마다 고유한 URL이 있습니다.
- Pagespeed Insights: 온라인 Pagespeed Insights 도구에 이제 Chrome 사용자 환경 보고서 데이터가 포함되어 실제 실적 통계를 강조 표시합니다.
- Lighthouse: 다운로드 버튼을 클릭하여 Chrome DevTools Audit 패널에서 보고서를 저장합니다.
핵심 프로그레시브 웹 앱 요구사항 테스트
Lighthouse를 사용하면 보안, 기능, 접근성, 성능, 검색엔진 성능을 테스트할 수 있습니다. 특히 Lighthouse는 사이트에서 서비스 워커 및 웹 앱 매니페스트와 같은 PWA 기능을 성공적으로 구현했는지 확인합니다.
Lighthouse는 사이트에서 허용 가능한 오프라인 환경을 제공할 수 있는지 테스트합니다.
Lighthouse 보고서를 JSON으로 다운로드하거나 Lighthouse Chrome 확장 프로그램을 사용하는 경우 보고서를 GitHub Gist로 공유할 수 있습니다. 공유 버튼을 클릭하고 '뷰어에서 열기'를 선택한 다음 새 창에서 공유 버튼을 다시 클릭하고 'Gist로 저장'을 클릭합니다.
분석, 이벤트 추적, 비즈니스 측정항목을 사용하여 실제 실적 추적
가능하면 변경사항을 구현하기 전에 애널리틱스 데이터(이탈률, 페이지 조회 시간, 이탈 페이지 등 비즈니스 요구사항과 관련된 모든 데이터)를 기록해 두세요.
가능하면 변경 후 결과를 비교할 수 있도록 영향을 받을 수 있는 비즈니스 및 기술 측정항목을 기록하세요. 예를 들어 전자상거래 사이트는 분당 주문 수를 추적하거나 스트레스 및 내구성 테스트 통계를 기록할 수 있습니다. 페이지 크기와 리소스 요청을 줄이면 백엔드 스토리지 비용, CPU 요구사항, 게재 비용, 복원력이 개선될 수 있습니다.
아직 분석을 구현하지 않았다면 지금이 적기입니다. 비즈니스 측정항목과 분석은 사이트가 제대로 작동하는지 여부를 최종적으로 판단하는 기준입니다. 적절한 경우 버튼 클릭 및 동영상 재생과 같은 사용자 작업에 이벤트 추적을 통합합니다. 사용자가 '전환'으로 이동하는 경로인 목표 흐름 분석을 구현하는 것도 좋습니다.
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의 스크린샷 캡처와 매우 유사하게 작동합니다. 페이지 구성요소 로드 속도에 관한 실제 기록(빠른 속도와 느린 속도)을 확인할 수 있습니다. 동영상 녹화 파일과 스크린캐스트를 저장하여 나중에 개선된 사항과 비교하세요.
전후 비교를 나란히 표시하면 개선사항을 효과적으로 보여줄 수 있습니다.
안 되는 사람이랄까?
해당하는 경우 웹 확장 점수를 확인합니다. 재미있는 테스트이지만 코드 확장을 보여주거나 개선사항을 보여주는 효과적인 방법이 될 수도 있습니다.
아래에 표시된 What Does My Site Cost?에서는 여러 지역에서 사이트를 로드하는 데 드는 비용을 대략적으로 안내합니다.
다른 많은 독립형 및 온라인 도구를 사용할 수 있습니다. perf.rocks/tools를 참고하세요.