실적 감사

Sam Dutton

프로그레시브 웹 앱 (PWA) 기술이 사이트에 어떤 이점을 제공하는지 들어보셨을 것입니다. 사이트 성능의 기반을 개선하지 않고 PWA 기능을 추가하고 싶을 수도 있습니다. 하지만 아무리 많은 PWA 기능을 사용해도 자바스크립트 차단 및 과도한 이미지 문제를 해결할 수는 없습니다.

대신 첫 번째 단계는 효과적인 부분과 개선할 수 있는 부분을 객관적으로 검토하는 사이트 감사를 실행하는 것입니다.

사이트 또는 앱을 감사하면 탄력적이고 성능이 우수한 환경을 구축할 수 있습니다. 또한 승인 절차가 최소화된 빠른 실적 개선 사항을 강조하세요. 감사를 통해 데이터 기반 개발의 기준이 마련됩니다. 변경으로 인해 개선되었나요? 내 사이트와 경쟁업체 사이트를 비교하는 방법 노력을 우선시할 수 있는 측정항목과 개선 후 자랑할 수 있는 구체적인 증거를 얻을 수 있습니다.

5분만

홈페이지에서 Lighthouse를 실행하고 보고서 데이터를 저장합니다. 성능, 접근성, 보안, SEO 개선을 위한 정량화된 기준과 할 일 목록을 확인할 수 있습니다.

30분 만에

Lighthouse가 여전히 시작하기에 가장 좋은 도구이지만 시간이 있다면 다른 도구의 결과를 기록할 수도 있습니다.

  • Chrome DevTools 보안 패널: HTTPS 사용
  • Chrome DevTools 네트워크 요청 패널: 로드 타이밍, 리소스 크기, HTML, CSS, JavaScript, 이미지, 글꼴, 기타 파일의 요청 수
  • Chrome 작업 관리자: 사이트에서 다른 앱보다 훨씬 많은 CPU나 메모리를 정기적으로 사용하는 경우 메모리 누수, 작업 실행 또는 리소스 로드 문제를 해결해야 할 수 있습니다.
  • WebPagetest: 캐싱, 첫 번째 바이트까지의 시간, CDN 사용량
  • Pagespeed Insights: 로드 성능, 데이터 비용, 리소스 사용량(실제 성능 통계를 강조하는 Chrome 사용자 환경 보고서 데이터 포함)

처음 방문하는 사용자의 입장에서 웹사이트를 테스트하세요. 시크릿 (비공개) 창에서 사이트를 열거나 브라우저 도구를 사용하여 캐싱을 사용 중지하고 저장소를 지웁니다. 이렇게 하면 모든 애셋이 로컬 캐시가 아닌 네트워크에서 가져오므로 첫 번째 로드 성능을 정확하게 파악할 수 있습니다.

실제 테스트만큼 좋은 것은 없습니다. 사용자를 대표하는 기기와 연결을 사용하여 사이트를 테스트하고 주관적인 경험을 기록해 두세요.

도구 사용에 어려움을 겪고 있다면

속도 도구에 대한 생각 가이드를 참고하세요.

다른 방법이 없다면 Lighthouse를 사용하여 다음을 확인하세요.

잠재고객, 이해관계자, 맥락

리팩터링의 우선순위는 시청자, 콘텐츠, 기능에 따라 달라집니다. 내 사이트를 방문하는 사용자 왜 그리고 어떻게 사용하나요? 성능 예산은 얼마인가요?

이해관계자는 누구이며 우선순위는 무엇인가요? 이는 감사 데이터를 구조화하고, 표시하고, 공유하는 방식에 영향을 미칩니다.

전체 사이트를 감사할 수 없는 경우 페이지 분석을 확인하여 집중해야 할 부분을 파악하세요. 높은 이탈률, 낮은 페이지 체류 시간, 예상치 못한 종료 페이지는 어디서 시작해야 할지 알려주는 좋은 지표가 될 수 있습니다. 호스팅 비용, 광고 클릭수, 전환수와 같은 비즈니스 측정항목도 마찬가지입니다. 이해관계자로부터 중요한 데이터에 대한 개요를 파악합니다.

테스트, 녹화, 수정, 반복

변경하기 전에 사이트 상태를 기록하여 문제를 파악하고 개선 또는 회귀의 시작점을 설정합니다. 이를 통해 개발 노력을 정당화하고 보상할 수 있는 데이터를 얻을 수 있습니다.

사이트 내에서 여러 페이지 유형을 테스트합니다. 단일 페이지 앱의 경우 첫 번째 로드 환경뿐만 아니라 구성요소, 경로, UX 흐름을 테스트합니다.