Front End 성능 높이기

Front-End 테스트 관련 학습정리

• Front-End 테스트에 대한 학습정리(블로그에 작성)
  
• Lighthouse 학습정리(블로그에 작성)
  
• 크롬개발자 도구 학습정리(블로그에 작성)
  

중간검사 결과

• Lighthouse 검사결과

검사결과 분석

성능 부문 개선사항

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

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

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

개선방향

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

---

[메인화면에서 비중이 큰 script 요소 비용 절감 필요]

화면 랜더링 요소 중에서 비중이 높은 요소를 줄이면 개선에 효과적이지 않을까?

• Summary 부분을 보면, script의 비중이 높다.
• 특히 프로필 박스를 만드는 과정에서 스크립트 평가나 함수호출이 길게 일어나는 것을 고려할 때, 프로필박스를 생성하는 JS코드에서 시간이 오래 걸리는 것으로 사료된다.
• 최대 페인트 요소가 프로필 박스 내부 코드뷰어인 것으로 보아, 특히 코드뷰어 부분에서 시간이 오래 걸리는 것으로 판단된다.

개선방향

• React Memoization 기능(useMemo 등)을 활용해서, 같은 코드의 경우에는 memoization 기능을 활용하게 함으로써 성능을 향상시킬 수 있을 것이다.

---

접근성 부문 개선사항

[버튼 이름 설정]

왜 버튼에 이름이 필요한가?

• 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="text">Name</button>

  <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>

• 참고자료

개선결과

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

• 약간의 성능개선 효과가 있었음
  

[**메인화면에서 비중이 큰 script 요소 비용 절감 필요]**
- 서비스 특성 상 코드로 개인을 어필하는 것이기 때문에 같은 코드는 거의 없을 것으로 사료됨 - 오히려 Memoization 기능의 경우 종속성 비교나 메모 기능 자체에서 오는 성능저하가 있을 수 있을 것으로 판단되어 도입하지 않기로 최종 결정하였다.

**[버튼 이름 설정]**
- 접근성을 거의 100에 가까운 수준으로 끌어올림
(메인화면과 로그인 화면에서 모자란 3점은 색상대비에 대한 내용으로 미관/디자인 상의 문제였음)