모던 리액트 deep dive 스터디 - 7주차 발표 정리

 

모던 리액트 deep dive 스터디 - 7주차 발표 정리

 

 

 

주제: 13장. 웹페이지의 성능을 측정하는 다양한 방법

 

 

---

 📌 create-react-app

crate-react-app을 통해 프로젝트를 생성하면, reportWebVitals라는 함수를 볼 수 있을 것이다.

 

- 누적 레이아웃 이동 (CLS)

- 최초 입력 지연 (FID)

- 최초 콘텐츠풀 페인트(FCP)

- 최대 콘텐츠 페인팅 (LCP)
- 첫 바이트까지의 시간 (TTFB)

 

이 함수는 위의 것들을 측정하는 용도로 사용된다.

 

이러한 지표는 web-vitals 라이브러리를 통해 웹페이지 성능을 측정하는데, 이는 PerformanceObserver라는 API를 사용하기 때문이다.

 

 

❓PerformanceObserver

 

브라우저에서 웹페이지의 성능을 측정하기위해 사용되는 API

 

 

 

📌 create-next-app

crate-react-app과 비슷한 방식으로 사용

 

NextWebVitalsMetric이라는 메서드로 웹 성능을 측정할 수 있다.

 

 

Next.js에 특화된 사용자 지표

• Next.js-hydration
• Next.js-route-change-to-render
• Next.js-render

 

---

 

📌 구글 라이트하우스

별도의 애플리케이션 코드 수정이나 배포, 수집 없이도 지표를 수집할 수 있다.

 

• 브라우저 확장 프로그램 설치
• 크롬 개발자 도구
• CLI (lighthouse npm 라이브러리)

 

 

 

 

구글 라이트하우스 - 탐색모드

페이지에 접속했을 때부터 페이지 로딩이 완료될 때까지의 성능을 측정하는 모드

 

성능

• Time to Interactive : 페이지에서 사용자가 완전히 인터렉션할 수 있을 때까지 걸리는 시간을 측정
• Speed Index : 페이지가 로드되는 동안 콘텐츠가 얼마나 빨리 시각적으로 표시되는지를 계산
• Total Blocking Time : 긴 작업이 수행될 때마다 메인 스레드가 차단되는데 이 작업들의 시간들을 모은 것을 말한다.

 

접근성

 

장애인 및 고령자 등 신체적으로 불편한 사람들이 일반적으로 사용자와 동등하게 웹페이지를 이용할 수 있도록 보장하는 것

 

 

권장사항

 

웹사이트를 개발할 때 고려해야 할 요소들을 얼마나 지키고 있는지 확인할 수 있음.

 

'CSP가 XSS 공격에 효과적인지 확인'이라는 항목이 있다.

 

XSS : Cross Site Scripting의 약자로 개발자가 아닌 제 3자가 삽입한 스크립트를 통해 공격하는 기법을 말한다.

CSP : Content Security Policy의 약자로 웹 사이트에서 호출할 수 있는 컨텐츠를 제한하는 정책

 

 

 

검색 엔진 최적화

 

검색엔진이 쉽게 웹페이지 정보를 가져가서 공개할 수 있도록 최적화되어 있는지를 확인

 

 

 

---

 

 

구글 라이트하우스 - 기간 모드

실제 웹 페이지를 탐색하는 동안 지표를 측정하는 모드

 

 

 

흔적

 

View Trace로 웹 성능을 축적한 기간을 성능 탭에서 보여준다.

 

상세하게 시간의 흐름에 따라 어떻게 웹페이지가 로딩되었는지 보여줌.

 

 

트리맵

 

페이지를 불러올 때 함께 로딩한 모든 리소스를 함께 모아서 볼 수 있음.

 

 

 

---

 

구글 라이트하우스 - 스냅샷

 

탐색 모드와 매우 유사하지만 현재 페이지 상태를 기준으로 분석한다는 점이 다르다.

 

특정 페이지 특정 상태를 기준으로 분석하며, 검색엔진의 최적화, 접근성, 성능 등을 분석할 수 있다.

 

 

---

 

WebPageTest

웹사이트 성능을 분석하는 도구로 가장 널리 알려진 도구

 

Site Performance : 웹사이트의 성능을 분석을 위한 도구

 

 

 

 

테스트해보고 싶은 url을 넣고 유형을 선택한뒤 테스트를 진행하면된다.

 

 

 

테스트 결과

 

 

 

 

🔍 Opportunities & Experiments

 

 

 

• is it Quick : 웹사이트가 충분히 빠른지를 평가
• is it Usable : 웹사이트의 사용성과 시각적인 요소를 확인한다.
• is it Resilient : 보안 취약성을 점검한다.

 

이외에도 많은 정보들에 대한 테스트 정보를 확인할 수 있다.

 

 

🔍 Flimstrip

 

 

 

웹사이트를 마치 필름을 보는 것처럼 시간의 흐름에 따라 어떻게 웹사이트가 그려졌는지, 또 이때 어떤 리소스가 불러와졌는지 볼 수 있는 메뉴

 

 

🔍 Details

 

Flimstrip에서 보여준 내용을 자세하게 보여주는 영역

 

 

 

🔍 Web Vitals

 

 

 

최대 콘텐츠풀 페인트(LCP), 누적 레이아웃 이동(CLS), 총 블로킹 시간(TBT)에 대해 자세히 확인할 수 잇다.

 

 

 

 

🔍 Optimizations

 

 

 

 

🔍 Content

 

웹사이트에서 제공하는 콘텐츠의 종류별 크기와 로딩 과정을 확인할 수 있다.

 

🔍 Domains

Content 메뉴에서 보여준 애셋들이 어느 도메인에서 왓는지를 도메인별로 묶어서 확인할 수 있다.

 

🔍 Console Log

사용자가 웹페이지에 접속했을 때 console.log로 무엇이 기록됐는지 확인할 수  있다.

 

🔍 Detected Technologies

웹사이트를 개발하는 데 사용된 기술을 확인할 수 있다.

 

🔍 Main-thread Processing

메인 스레드가 어떤 작업을 처리했는지 확인 할 수 있다.

 

실제로 어떠한 작업을 하고 있었는지도 상세하게 확인할 수 있음.