🧸 웹 성능 결정 요소
- 로딩 성능 - 각 리소스를 불러오는 성능
- 이미지 사이즈 최적화 / Code Split / 텍스트 압축
- 렌더링 성능 - 불러온 리소스들을 화면에 보여주는 성능
- Bottleneck 코드 최적화
📌 LightHouse
Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구
📊 LightHouse 성능 지표
- First Contentful Paint(FCP) -> 10%의 가중치
- 사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간
- Speed Index -> 10%의 가중치
- 웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간
- Time To Interactive(TTI) -> 10%의 가중치
- 웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간 -> 단순히 시각적으로 보여지는 것 뿐만 아니라, 사용자가 페이지와 소통이 가능한 상태까지 렌더링 되어야한다.
- Max Potential First Input Delay
- 웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간
- Total Blocking Time(TBT) -> 30%의 가중치
- 웹 페이지가 사용자 입력에 응답하지 못하도록 차단된 총 시간
- = 로딩 중 메인 스레드가 긴 시간동안 중단되어 응답을 받을 수 없을 정도로 걸린 시간
- Largest Contentful Paint(LCP) -> 25%의 가중치
- 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간
- Cumulative Layout Shift(CLS) -> 15%의 가중치
- 이미지/광고의 느린 로딩, 비동기 동작, 동적 DOM 변경 등으로 웹 페이지의 레이아웃이 얼마나 변하는 지 측정한 값
- 사용자가 잘못된 클릭을 하도록 유발하는 시각적 불안정성을 체크하는 지표
🔍 Lighthouse 결과 항목 분석
1. Performance
Lighthouse는 화면에 콘텐츠가 얼마나 빨리 표시되고 사용자는 얼마나 빠르게 해당 콘텐츠를 인식하는 지에 초점
즉, 실제 성능을 측정
- Lighthouse 6
| Audit | Weight |
| First Contentful Paint | 15% |
| Speed Index | 15% |
| Largest Contentful Paint | 25% |
| Time to Interactive | 15% |
| Total Blocking Time | 25% |
| Cumulative Layout Shift | 5% |
2. Accessibility
Lighthouse는 웹 애플리케이션의 접근성을 검사한다. <img> 태그에 alt 속성이 있는지, <html> 태그에 lang 속성이 있는지, 배경색과 전경색의 대비가 충분한지와 같은 항목을 확인한다.
3. Best Practices
Lighthouse는 웹 페이지가 웹에 대한 표준 모범 사례를 따르고 있는지 확인한다. 웹 애플리케이션을 가동할 때 콘솔에 오류가 출력되진 않는지, 더는 사용하지 않는 API를 호출하고 있지 않은지, HTTPS를 통해 해당 페이지에 접근할 수 있는지와 같은 항목을 확인한다.
4. SEO
Lighthouse는 웹 페이지가 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 확인한다. 각 사용자가 자신의 디바이스를 이용하여 웹 페이지에 접근하였을 때 그들이 콘텐츠를 읽는 데에 무리가 없는 글꼴 크기를 사용하는지, 웹 페이지의 robots.txt 파일이 유효한지, 올바른 상태 코드를 사용하는 지와 같은 일부 SEO 모범 사례를 확인한다.
5. Progressive Web App(PWA)
웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다.
- Opportunities: 리소스 관점 : 페이지를 더욱 빨리 로드하는 데 잠재적으로 도움이되는 제안
- Diagnostics: 렌더링 성능 최적화 관련 : 로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여줌.
- Past Audit: 이미 잘 적응하고 있는 항목
- Runtime Seting: 검사 환경 요약
'리액트' 카테고리의 다른 글
| [리액트] React query parameter(=query string)으로 검색기능 구현하기 (0) | 2023.06.30 |
|---|---|
| [리액트] 로그아웃 후 재 로그인 시 이전 알림이 새로운 알림으로 수신되는 문제 해결하기 (0) | 2023.06.28 |
| [리액트] 실시간 알림 SSE(Server-Sent Events) 헤더에 토큰 담아 보내기 (0) | 2023.06.27 |
| [리액트] React에서 Server-Sent Events(SSE)를 통한 실시간 알림 구현하기 (0) | 2023.06.27 |
| [리액트]중복 검색 요청 방지를 위한 debouncing 적용 (0) | 2023.06.27 |
댓글