이유와 내용은 무엇인가요?
프로그레시브 웹 앱 기법이 사이트에 미치는 모든 좋은 영향에 대해 들어보셨을 겁니다. 바로 시작하여 PWA 기능을 추가하고 싶을 수 있습니다. 가능합니다. 하지만 먼저 'PWA 지원'을 구현하는 것이 훨씬 좋습니다.
아무리 PWA의 마법을 사용해도 JavaScript 차단이나 이미지 확장과 같은 문제는 해결되지 않습니다. PWA에는 탄탄한 기반이 필요합니다.
웹사이트 상태를 확인하려면 어떻게 해야 하나요? 첫 번째 단계는 사이트 감사를 실시하는 것입니다. 사이트 감사는 효과가 있는 부분과 개선이 필요한 부분 및 개선 방법을 객관적으로 검토하는 것입니다.
사이트 또는 앱을 감사하면 복원력 있고 성능이 우수한 환경을 구축하고 최소한의 승인으로 구현할 수 있는 빠른 실적을 얻을 수 있습니다. 감사를 통해 데이터 기반 개발의 기준점도 얻을 수 있습니다. 변경사항으로 인해 상황이 개선되었나요? 내 사이트는 경쟁업체와 비교해 어느 정도인가요? 노력의 우선순위를 정할 수 있는 측정항목과 개선사항이 있으면 자랑할 수 있는 구체적인 근거를 얻을 수 있습니다.
5분밖에 시간이 없다면…
홈페이지에서 Lighthouse를 실행하고 보고서 데이터를 저장합니다. 성능, 접근성, 보안, SEO를 개선하기 위한 정량화된 기준점과 할 일 목록을 확인할 수 있습니다.
30분밖에 시간이 없다면…
Lighthouse는 여전히 가장 좋은 시작점이지만, 조금만 더 시간을 내면 다른 도구의 결과도 기록할 수 있습니다.
- Chrome DevTools 보안 패널: 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 흐름을 테스트합니다.