Welcome to My IT World

(학습정리 자료)   Front-End 테스트에 대한 학습정리  Lighthouse 학습정리  크롬개발자 도구 학습정리

검사 결과

화면

Lighthouse 결과

접근성 검사 상세

성능 검사 점수 상세

성능 검사 추천 및 진단

성능 패널

검사결과 분석

성능 부문 개선사항

[로고이미지 width, height 지정 필요]

왜 로고이미지 width, height가 필요한 걸까?

• 화면의 랜더링 과정에서, 레이아웃 계산은 한 번만 일어나지 않는다.
• 레이아웃 과정에서 요소들은 다른 요소들의 배치에도 영향을 받고 재계산 과정이 일어나므로, 보통 랜더링 절차 중 많은 비용이 든다.
• 이미지의 경우, 이미지가 다운로드되기 시작하고 브라우저가 크기를 결정할 수 있을 때만 이미지에 대한 공간을 할당할 수 있기 때문에, 이미지가 로드되면 각 이미지가 화면에 나타날 때 페이지의 재배치가 발생한다.
• Cumulative Layout Shift(누적 레이아웃 이동, CLS) 의 발생원인
  • 크기가 정해지지 않은 이미지
  • 크기가 정해지지 않은 광고, 임베드 및 iframe
  • 동적으로 주입된 콘텐츠
  • FOIT/FOUT을 유발하는 웹 글꼴
  • DOM을 업데이트하기 전에 네트워크 응답을 대기하는 작업
• 참고자료1, 참고자료2

개선방향

이미지 요소에 width및 height크기 속성을 포함시켜주자!

접근성 부문 개선사항

[버튼 이름 설정]

왜 버튼에 이름이 필요할까?

• Screen reader(컴퓨터의 화면 낭독 소프트웨어)를 위해서이다.
• Screen reader 사용자들은 접근가능한 이름이 없는 role="link", role="button", role="menuitem" 요소의 목적을 구분할 수 없다.
• 버튼에는 화면 판독기 사용자를 위한 대상, 목적, 기능 또는 작업을 명확하게 설명하는 식별 가능한 텍스트가 필요하다.

개선방향

아래의 button-name 규칙을 참고하여, 버튼에 네이밍을 해주자!

• button-name 규칙
  각 button요소와 요소 role="button"에 다음 특성 중 하나가 있는지 확인한다.
  
  • 화면 판독기 사용자가 식별할 수 있는 내부 텍스트
  • 비어 있지 않은 aria-label속성
  • aria-labelledby 을 이용하여, 스크린 리더 사용자가 식별할 수 있는 텍스트가 있는 요소를 가리킴
  • role="presentation"또는 role="none"(ARIA 1.1) 단, tab order가 아님(tabindex="-1")
  5가지 markup pattern 예시

  <button id="al" aria-label="Name"></button>

  <button id="alb" aria-labelledby="labeldiv"></button>
  <div id="labeldiv">Button label</div>

  <button id="combo" aria-label="Aria Name">Name</button>

  <button id="buttonTitle" title="Title"></button>

• <button id="text">Name</button>

• 참고자료