Front End 성능 높이기

Jump to bottom

HG.Seo edited this page Dec 7, 2022 · 23 revisions

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

중간검사 결과

Lighthouse 검사결과

검사결과 분석

성능 부문 개선사항

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

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

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

개선방향

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

[비중이 큰 script 요소 비용 절감 필요]

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

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

개선방향

홈 바로가기 기능이나 페이지 선택 등을 통해 같은 프로필 박스들이 여러번 랜더링될 가능성이 있으므로, React Memoization기능을 활용해서 최적화를 할 수 있을 것으로 판단된다.
단, 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>
```
참고자료