사이트 감사를 위해 실적 측정항목을 수집하기 전에 간단하게 해결할 수 있는 문제와 집중해야 할 영역을 파악하기 위해 몇 가지 검사를 수행할 수 있습니다.
유효성 검사: 아키텍처 및 코드
가능하면 성능을 측정하기 전에 간단한 버그를 수정하고 불필요한 애셋과 코드를 삭제하세요. 단, 문제와 해결 방법의 전후 기록을 보관해야 합니다. 이러한 개선사항은 감사 작업의 일부로 계속 진행될 수 있습니다.
사이트 아키텍처 및 애셋
코드 저장소와 사이트에서 사용되지 않는 기존 페이지, 콘텐츠 또는 기타 애셋과 같이 쉽게 삭제할 수 있는 항목이 있나요? 고아 페이지, 중복 템플릿, 사용하지 않는 이미지, 사용하지 않는 코드 및 라이브러리를 확인합니다.
런타임 오류
브라우저 콘솔에 보고된 오류가 있는지 확인합니다. 없어야 합니다 :).
린팅
HTML, CSS 또는 JavaScript 코드에 오류가 있나요? 워크플로에 린팅을 빌드하면 코드 품질을 유지하고 회귀를 방지하는 데 도움이 됩니다. 코드 편집기 플러그인으로 사용하거나 워크플로 프로세스 및 Travis와 같은 지속적 통합 도구 내에서 명령줄에서 실행할 수 있는 HTMLHint, StyleLint, ESLint를 사용하는 것이 좋습니다.
링크 및 이미지가 깨짐
빌드 시간 및 런타임에 링크가 깨졌는지 테스트하는 도구는 Chrome 확장 프로그램(이 도구가 좋음)과 Broken Link Checker와 같은 노드 도구를 포함하여 다양합니다.
플러그인
Flash 및 Silverlight와 같은 플러그인은 보안 위험이 될 수 있으며, 이러한 플러그인의 지원은 지원 중단되었으며 모바일에서는 작동하지 않습니다. Lighthouse를 사용하여 플러그인을 확인합니다.
다양한 기기 및 컨텍스트로 테스트
실제 사용자를 통해 실제 기기, 여러 브라우저, 다양한 연결 컨텍스트로 사이트를 테스트하는 것만큼 좋은 방법은 없습니다.
이러한 검사 중 일부는 상대적으로 주관적이지만, 인지된 성능에 영향을 미치는 문제를 식별할 수 있습니다. 예를 들어 링크가 깨져 있으면 시간이 낭비되고 '응답이 없음'처럼 느껴집니다. 읽을 수 없는 텍스트는 읽는 속도가 느립니다.
교차 기기 테스트
다양한 표시 영역 및 창 크기를 시도해 봅니다. 휴대기기 1대와 데스크톱 기기 1대를 사용합니다. 가능하면 화면이 작은 저사양 휴대기기에서 사이트를 사용해 보세요. 텍스트를 읽을 수 있나요? 이미지가 손상되었나요? 확대해 주시겠어요? 터치 영역이 충분히 넓나요? 느린가요?
응답하지 않는 기능이 있나요? 결과를 스크린샷으로 찍거나 동영상으로 녹화합니다.
교차 플랫폼 테스트
어떤 플랫폼을 타겟팅하나요? 사용자가 현재와 향후 사용할 브라우저와 운영체제에서 테스트해야 합니다.
연결
연결됨, Wi-Fi, 모바일 데이터 등 여러 대상 네트워크 유형에서 테스트 브라우저 도구를 사용하여 다양한 네트워크 조건을 에뮬레이션할 수 있습니다.
기기
사용자와 동일한 기기에서 사이트를 사용해 보세요. 다음 사진은 두 대의 휴대전화에서 동일한 페이지를 보여줍니다.
큰 화면에서는 텍스트가 작지만 읽을 수 있습니다. 작은 화면에서는 브라우저가 레이아웃을 올바르게 렌더링하지만 확대해도 텍스트를 읽을 수 없습니다. 디스플레이가 흐릿하고 '색조'가 있어(흰색이 흰색으로 보이지 않음) 콘텐츠가 잘 보이지 않습니다.
이러한 간단한 발견은 모호한 성능 데이터보다 훨씬 중요할 수 있습니다.
UI 및 UX 사용해 보기
접근성, 사용성, 가독성
모든 사용자가 사이트의 콘텐츠와 기능에 액세스할 수 있도록 하려면 사용자의 다양성을 이해해야 합니다.
Lighthouse 및 기타 도구는 특정 접근성 문제를 테스트하지만 실제 테스트에 비할 바가 아닙니다. 햇빛이 비치는 야외나 기차 등 다양한 시나리오에서 데이터를 읽고, 탐색하고, 입력해 보세요. 다양한 친구, 가족, 동료에게 사이트를 사용해 보라고 요청하세요. Mac의 VoiceOver 또는 Windows의 NVDA와 같은 스크린 리더를 통해 콘텐츠를 소비해 보세요.
접근성 구현 및 검토에 관한 자세한 내용은 접근성에 관한 Udacity 과정 및 웹 기본사항 도움말 접근성 검토 방법을 참고하세요.
접근성 감사 기록을 보관합니다. 모든 사용자에게 도움이 되는 간단한 개선사항을 적용할 수 있습니다.
기본 UI 및 UX 문제
제대로 작동하지 않는 상호작용, 작은 창 및 뷰포트의 요소 오버플로, 너무 작은 탭 타겟, 읽을 수 없는 콘텐츠, 불안정한 스크롤 등... 사이트에서 여러 페이지를 열고 탐색 및 모든 핵심 기능을 사용해 보세요. 기록을 보관합니다.
이미지, 오디오, 동영상
콘텐츠 오버플로, 잘못된 가로세로 비율, 잘못된 자르기, 품질 문제를 테스트합니다.
주관적 UI 테스트
다음은 모두 관련이 있는 것은 아니지만 간단하게 변경하면 리팩터링이 더 쉬워질 수 있습니다.
- 사이트를 열 때 '여기에서 무엇을 할 수 있나요?'가 바로 표시되나요?
- 콘텐츠를 소비하고 링크를 따라가고 싶은 충동이 있나요?
- 시각적 계층 구조 또는 경로가 있나요? 아니면 모든 요소가 동일한 시각적 비중을 갖나요?
- 레이아웃이 복잡한가요?
- 글꼴이 너무 많나요?
- 삭제할 수 있는 이미지나 기타 콘텐츠가 있나요?
- 콘텐츠 디자인은 인터페이스 디자인만큼 중요합니다. 사이트의 텍스트 및 이미지 콘텐츠가 모바일 및 데스크톱 상황에 적합한가요? 제외할 수 있는 항목이 있나요? 모바일용으로 작성합니다.