사전 작업

사이트 감사를 위해 성능 측정항목을 수집하기 전에 간단한 수정사항과 집중할 영역을 파악하기 위해 할 수 있는 몇 가지 검사가 있습니다.

유효성 확인: 아키텍처 및 코드

기술 부채를 상환합니다.

가능하다면 성능을 측정하기 전에 간단한 버그를 수정하고 불필요한 애셋과 코드를 삭제하되, 문제와 수정사항의 전후 기록을 보관해야 합니다. 이러한 개선사항은 여전히 감사 작업의 일부가 될 수 있습니다.

사이트 아키텍처 및 애셋
미사용 기존 페이지, 콘텐츠, 기타 애셋 등 코드 저장소 및 사이트에서 쉽게 삭제할 수 있는 항목이 있나요? 분리된 페이지, 중복 템플릿, 사용하지 않는 이미지, 사용되지 않는 코드 및 라이브러리가 있는지 확인합니다.

런타임 오류
브라우저 콘솔에 보고된 오류가 있는지 확인합니다. 있어서는 안 됩니다. :)

린트 작업
HTML, CSS 또는 자바스크립트 코드에 오류가 있나요? 워크플로에 린트를 빌드하면 코드 품질을 유지하고 회귀를 방지할 수 있습니다. 코드 편집기 플러그인으로 사용하거나 워크플로 프로세스 및 지속적 통합 도구(예: Travis) 내의 명령줄에서 HTMLHint, StyleLintESLint를 사용하는 것이 좋습니다.

깨진 링크 및 이미지
Chrome 확장 프로그램(이 도구 권장)과 Broken Link Checker와 같은 노드 도구를 비롯하여 빌드 시간과 런타임에 깨진 링크를 테스트할 수 있는 다양한 도구가 있습니다.

플러그인
Flash 및 Silverlight와 같은 플러그인은 보안 위험이 될 수 있으며 지원이 지원 중단되었으며 모바일에서 작동하지 않습니다. Lighthouse를 사용하여 플러그인 확인

다양한 기기 및 컨텍스트에서 테스트

실제 사용자가 실제 기기, 여러 브라우저, 다양한 연결 컨텍스트로 사이트를 테스트하도록 하는 것이 가장 좋습니다.

이러한 검사 중 일부는 상대적으로 주관적이지만 인지된 성능에 영향을 미치는 문제를 식별할 수 있습니다. 예를 들어 깨진 링크는 시간을 낭비하고 '응답이 없는' 느낌을 줍니다. 읽을 수 없는 텍스트는 읽기 속도가 느립니다

교차 기기 테스트
다양한 표시 영역 및 창 크기를 시도합니다. 모바일 기기와 데스크톱 기기를 각각 하나 이상 사용하세요. 가능하면 화면이 작은 저사양 휴대기기에서 사이트를 실행해 봅니다. 텍스트를 읽을 수 있나요? 손상된 이미지가 있나요? 확대해 봐? 터치 영역이 충분히 큰가요? 속도가 느린가요? 응답하지 않는 기능이 있나요? 결과 스크린샷 또는 동영상

교차 플랫폼 테스트
어떤 플랫폼을 타겟팅하시나요? 현재와 향후 사용자가 사용하는 브라우저와 운영체제를 테스트해야 합니다.

연결
연결됨, Wi-Fi, 모바일 데이터 등 여러 대상 네트워크 유형에서 테스트합니다. 브라우저 도구를 사용하여 다양한 네트워크 조건을 에뮬레이션할 수 있습니다.

기기
사용자와 동일한 기기에서 사이트를 사용해 보세요. 다음 사진은 서로 다른 두 휴대전화에서 동일한 페이지를 보여줍니다.

고사양 및 저사양 휴대전화에서 실행되는 블로그 게시물 페이지

큰 화면에서는 텍스트가 작지만 읽기 쉽습니다. 작은 화면에서는 브라우저가 레이아웃을 올바르게 렌더링하지만 확대해도 텍스트를 읽을 수 없습니다. 디스플레이가 흐리고 '컬러 캐스트'(흰색이 흰색처럼 보이지 않음)가 발생하므로 콘텐츠의 가독성이 떨어집니다.

이와 같은 단순한 결과가 모호한 실적 데이터보다 훨씬 더 중요할 수 있습니다.

UI 및 UX 사용해 보기

접근성, 사용성 및 가독성
모든 사용자가 사이트의 콘텐츠와 기능에 액세스할 수 있게 하려면 사용자의 다양성을 이해해야 합니다. Lighthouse 및 기타 도구는 특정 접근성 문제를 테스트하지만 실제 테스트보다 우수한 것은 없습니다. 햇빛이 비치는 야외 또는 기차를 타고 다양한 시나리오에서 데이터를 읽고 탐색하고 입력해 보세요. 다양한 친구, 가족, 동료에게 사이트를 사용해 보도록 요청하세요. Mac의 VoiceOver 또는 Windows의 NVDA와 같은 스크린 리더를 통해 콘텐츠를 사용해 보세요.

접근성 구현 및 검토에 관한 자세한 내용은 접근성에 관한 Udacity 과정 및 웹 기초 자료인 접근성 검토를 실행하는 방법을 참고하세요.

접근성 감사 기록을 저장하세요. 이러한 간단한 개선사항을 모든 사용자에게 도움이 될 수 있습니다.

기본 UI 및 UX 문제
제대로 작동하지 않는 상호작용, 작은 창과 표시 영역의 요소 넘침, 너무 작은 탭 대상, 읽을 수 없는 콘텐츠, 버벅거리는 스크롤 등 사이트에서 여러 페이지를 열고 탐색 및 모든 핵심 기능을 사용해 봅니다. 기록을 남겨두세요.

이미지, 오디오, 동영상
콘텐츠 오버플로, 잘못된 가로세로 비율, 불량한 자르기, 품질 문제를 테스트합니다.

주관적 UI 테스트
모두 관련이 있는 것은 아니지만 간단한 변경사항으로 리팩터링을 더 쉽게 할 수 있습니다.

  • 사이트를 열면 '무엇을 할 수 있나요?'라는 메시지가 바로 표시되나요?
  • 콘텐츠를 소비하고 링크를 따라가는 것에 관심이 있으신가요?
  • 시각적 계층 구조나 경로가 있는가? 아니면 모든 것이 동일한 시각적 무게감을 갖는가?
  • 레이아웃이 복잡합니까?
  • 글꼴이 너무 많나요?
  • 삭제할 수 있는 이미지 또는 기타 콘텐츠가 있나요?
  • 콘텐츠 디자인은 인터페이스 디자인만큼 중요합니다. 사이트의 텍스트 및 이미지 콘텐츠가 모바일 및 데스크톱 환경에 적합한가요? 제거할 수 있는 것이 있습니까? 모바일용으로 작성