성능 감사

샘 더튼

왜, 무엇을 사용해야 하나요?

프로그레시브 웹 앱 기술이 사이트에서 할 수 있는 모든 좋은 작업에 대해 들어보셨을 것입니다. 곧바로 PWA 기능을 추가하고 싶은 유혹을 느낄 수 있습니다. 가능하긴 하지만 먼저 'PWA 준비'를 하는 것이 훨씬 좋습니다.

PWA 매직을 아무리 높여도 JavaScript 차단이나 팽창된 이미지와 같은 문제는 해결되지 않습니다. PWA에는 견고한 기반이 필요합니다

그렇다면 웹사이트 상태는 어떻게 확인할 수 있을까요? 첫 번째 단계는 사이트 감사를 수행하는 것입니다. 사이트 감사는 무엇이 효과적이며 어떤 부분에서, 어떻게 개선할 수 있는지에 대한 객관적인 검토입니다.

사이트 또는 앱을 감사하면 복원력이 우수하고 성능이 우수한 환경을 구축하는 데 도움이 되며 최소한의 승인으로 구현할 수 있는 빠른 성과를 확인할 수 있습니다. 또한 감사는 데이터 기반 개발을 위한 기준도 제공합니다. 변경사항으로 인해 서비스가 개선되었나요? 내 사이트는 경쟁업체와 어떻게 다른가요? 노력의 우선순위를 정하는 측정항목과 개선 이후 자랑할 만한 구체적인 증거가 제공됩니다.

5분만 시간을 내면...

홈페이지에서 Lighthouse를 실행하고 보고서 데이터를 저장합니다. 성능, 접근성, 보안, 검색엔진 최적화 개선을 위한 수치화된 기준 및 할 일 목록을 확인할 수 있습니다.

30분만 시간을 내면...

Lighthouse로 시작하는 것이 가장 좋지만 시간이 좀 더 있으면 다른 도구의 결과도 기록할 수 있습니다.

  • Chrome DevTools Security 패널: HTTPS 사용
  • Chrome DevTools 네트워크 패널: 로드 타이밍, HTML, CSS, JavaScript, 이미지, 글꼴, 기타 파일의 리소스 크기 및 요청 수
  • Chrome 작업 관리자: 사이트에서 지속적으로 다른 앱보다 CPU나 메모리를 많이 사용하는 경우 메모리 누수, 작업 실행 또는 리소스 로드 문제를 해결해야 할 수 있습니다. 사용자를 대표하는 기기에서 사이트를 테스트해야 합니다.
  • WebPagetest: 다양한 위치 및 연결 유형, 캐싱, 첫 바이트 소요 시간, CDN 사용량에 대한 성능.
  • Pagespeed Insights: 실제 성능 통계를 강조표시한 Chrome 사용자 환경 보고서 데이터를 포함한 로드 성능, 데이터 비용, 리소스 사용량
  • 속도 스코어카드 및 개선 효과 추정 도구: 사이트 속도를 동종 업체와 비교하고 사이트 속도를 개선할 경우 얻을 수 있는 잠재적 수익 기회를 예측합니다.

웹사이트를 처음 보는 사용자가 내 웹사이트를 볼 때 꼭 테스트하세요. 사이트를 시크릿 (비공개) 창에서 열거나 브라우저 도구를 사용하여 캐싱을 사용 중지하고 저장용량을 비웁니다. 이렇게 하면 모든 애셋을 로컬 캐시가 아닌 네트워크에서 검색하므로 최초 로드 성능을 정확하게 파악할 수 있습니다.

실제 테스트보다 가장 좋은 것은 없습니다. 사용자와 동일한 기기 및 연결로 사이트를 시험해 보고 주관적인 경험을 기록해 두세요.

다양한 도구가 혼란스럽게 느껴진다면...

가이드 속도 도구에 관해 생각하는 법을 살펴보세요.

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

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

리팩터링 우선순위는 대상, 콘텐츠, 기능에 따라 다릅니다. 누가 사이트를 방문하나요? 왜, 어떻게 사용하나요? 성능 예산은 얼마인가요? 이러한 질문에 대한 답을 잘 모르겠다면 PWA 교육 리소스인 잠재고객, 내 콘텐츠, 모든 사용자를 위한 디자인의 요구사항 수집 연습을 시도해 보세요.

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

전체 사이트를 점검할 수 없는 경우 페이지 분석을 확인하여 집중할 부분을 찾으세요. 이탈률이 높고, 페이지에 머문 시간이 짧으며, 예기치 않은 종료 페이지는 어디서부터 시작해야 할지 파악하는 데 좋은 지표가 될 수 있습니다. 마찬가지로 호스팅 비용, 광고 클릭수, 전환수와 같은 비즈니스 측정항목도 마찬가지입니다. 이해관계자로부터 중요한 데이터가 무엇인지에 대한 개요를 얻습니다.

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

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

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

의견