왜 무엇이고?
프로그레시브 웹 앱 기술이 사이트에서 얻을 수 있는 이점에 대해 들어보셨을 것입니다. 곧바로 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를 사용하여 다음을 확인합니다.
- HTTPS: 모든 사이트는 HTTPS를 통해 모든 애셋을 전송해야 합니다.
- 서버 설정: 브라우저가 리소스를 캐시할 수 있도록 웹 서버 또는 CDN은 압축을 올바르게 사용하고 HTTP/2를 사용하며 적절한 헤더를 포함해야 합니다.
- 페이지 하단으로 이동하거나 async 또는 defer 속성을 지정할 수 있는 스크립트 요소입니다.
- 삭제할 수 있는 JavaScript 및 라이브러리입니다.
- 사용되지 않는 CSS 및 사용되지 않는 JavaScript.
- 더 높은 압축 또는 더 작은 픽셀 크기로 저장할 수 있는 이미지입니다.
- 다른 형식을 사용하면 더 작게 저장되는 이미지 파일(예: PNG로 저장된 사진)
대상, 이해관계자, 맥락
리팩터링 우선순위는 대상, 콘텐츠, 기능에 따라 다릅니다. 사이트 방문자 사용하는 이유와 방법 성능 예산은 얼마인가요? 이러한 질문에 대한 답을 잘 모르겠으면 PWA 교육 리소스인 잠재고객, 콘텐츠 및 모든 사용자를 위한 디자인에서 요구사항 수집 실습을 시도해 보세요.
이해관계자는 누구이며 그들의 우선순위는 무엇입니까? 이는 감사 데이터를 구조화하고 발표하고 공유하는 방식에 영향을 미칩니다
사이트 전체를 감사할 수 없다면 페이지 분석을 확인하여 어디에 집중해야 할지 알아보세요. 높은 이탈률, 낮은 페이지에 머문 시간, 예기치 않은 종료 페이지는 어디서부터 시작해야 할지를 알 수 있는 좋은 지표입니다. 마찬가지로 호스팅 비용, 광고 클릭수, 전환수와 같은 비즈니스 측정항목도 마찬가지입니다. 이해관계자들에게 중요한 데이터에 대한 개요를 들어보세요.
테스트, 기록, 수정, 반복
변경하기 전에 사이트 상태를 기록하여 문제를 파악하고 개선 또는 회귀의 시작점을 설정할 수 있습니다. 이를 통해 개발 노력의 타당성을 입증하고 보상을 제공할 수 있는 데이터를 얻을 수 있습니다
홈페이지뿐만 아니라 사이트 내에서 여러 페이지 유형을 테스트해야 합니다. 단일 페이지 앱의 경우 첫 번째 로드 환경뿐만 아니라 다양한 구성요소, 경로, UX 흐름을 테스트하세요.