muhandojeon · hyesungoh · Feb 22, 2024 · Feb 17, 2024
diff --git a/13장/오혜성.md b/13장/오혜성.md
@@ -0,0 +1,117 @@
+# 웹페이지의 성능을 측정하는 다양한 방법
+
+## 애플리케이션에서 확인하기
+
+* reportWebVitals
+  + 자바스크립트 수준의 라이브러리가 브라우저의 웹페이지 성능을 측정할 수 있는 이유는?
+    - PerformanceObserver API를 사용하기 때문
+    - 🤘 https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
+
+* sendBeacon API
+
+> 페이지를 떠날 때 기록을 해야하는 요구사항이 있었던 적이 있는데요 ..
+> 그때 알아봤던 자료들 공유 드립니당
+> https://developer.mozilla.org/ko/docs/Web/API/Navigator/sendBeacon
+> https://github.com/yeonjuan/dev-blog/blob/master/Browser/send-an-http-request-on-page-exit.md
+
+* Next.js의 경우 `NextWebVitalsMetric`을 제공
+  + 🤘 https://nextjs.org/learn-pages-router/seo/monitor/custom-reporting
+  + Next.js 특화 지표도 제공함
+    - Next.js-hydartion: 하이드레이션하는 데 걸린 시간
+    - Next.js-route-change-to-render: 경로 변경 후 페이지 렌더링을 시작하는 데 걸린 시간
+    - Next.js-render: 경로 변경 완료 이후 페이지를 렌더링하는 데 걸린 시간
+
+## 구글 라이트하우스
+
+* 구글에서 제공하는 웹페이지 성능 측정 도구로, 오픈소스로 운영되고 있음
+
+* 실행 방법
+  + 브라우저 확장 프로그램
+  + 크롬 개발자 도구
+  + CLI
+
+### 라이트하우스 - 탐색 모드
+
+* 페이지 접속부터 로딩이 완료될 때까지의 성능을 측정하는 모드
+
+* Total Blocking Time
+  + 메인 스레드에서 실행하는 작업이 50ms 이상을 긴 작업이라 간주함
+  + 이런 작업들을 모아 TBT라고 함
+  + 총 차단 시간은 긴 작업들을 모아서 각각의 작업들에 50ms를 뺀 다음에 모두 합해 계산함
+  + 🤘 https://web.dev/tbt/
+
+* 접근성
+  + 비밀번호 입력란에 붙여넣기가 가능해야 함
+  + `<!DOCTYPE html>`이 있어야 함
+    - 과거 웹 표준이 정착되기 전에는 넷스케이프 브라우저와 인터넷 익스플로러용 두 가지 버전이 필요했음
+    - 이후 표준이 정해지면서 혼란이 멈추었고, 이 표준을 준수해 웹페이지가 작성됐다고 의미하는 것이 Doctype
+    - 선언되지 않았다면 표준을 준수하지 않은 것으로 간주해, 호환 모드로 렌더링하게 되는데 이는 불필요한 작업
+
+### 라이트하우스 - 기간 모드
+
+* 기간 모드는 실제 웹페이지를 탐색하는 동안 지표를 측정하는 것
+
+### 라이트하우스 - 스냅샷
+
+* 스냅샷 모드는 탐색 모드와 유사하지만 현재 페이지 상태를 기준으로 분석함
+  + 현재 상태에서 검색엔진의 최적화, 접근성, 성능을 분석할 수 있음
+
+## WebPageTest
+
+* https://www.webpagetest.org/
+
+* 한국과 거리가 먼 서버를 기준으로 테스트하기 때문에 크롬 개발자 도구보다 성능 지표가 안좋을 가능성이 매우 높음
+
+### Performance Summary
+
+* is it quick
+  + TTFB, LCP를 확인함
+
+* is it usable
+  + CLS, TTI, 접근성 이슈, 클라이언트 HTML 렌더링 등을 점검
+
+* is it resilient
+  + 보안 취약성을 점검
+
+### Filmstrip
+
+* 리소스들 중 주황색 X가 있는 것은 렌더링을 블로킹하는 리소스라는 뜻
+  + async, defer 옵션이 안붙은 script인지 확인하자
+
+* svg 파일들을 개별 요청하는 것은 css 스프라이트 기법을 활용해 개선할 수 있음
+  + 🤘 https://github.com/twolfson/spritesmith
+    - 이런 라이브러리가 있네용
+
+### Optimizations
+
+* 최적화에 대한 지표를 보여줌
+  + Keep-Alive, Gzip, 이미지 압축, CDN 사용 여부 등
+
+### Domains
+
+* 어느 도메인에서 어떤 리소스를 얼마나 가져오는지 확인할 수 있음
+
+* 웹사이트의 성격에 따라 다르지만 중요 리소스는 웹사이트와 같은 곳에서 요청할 수록 도메인 연결에 소요되는 비용을 줄일 수 있어서 좋음
+
+## 크롬 개발자 도구
+
+### 성능 통계 (Performance Insights) 탭
+
+* Insights
+  + 성능 측정 기간 동안 눈여겨봐야 할 내용을 시간의 흐름에 따라 보여줌
+  + Long Task: 메인 스레드에서 실행되는 데 오랜 시간으로 분류된 긴 작업들
+    - 함수를 특정하여 문제점을 찾을 수 있음
+  + Render blocking CSS: 어떤 리소스가 렌더링을 막고 있는지 확인할 수 있음
+  + Forced style recalculation: 스타일이 한번 계산된 이후 어떤 이유로 다시 스타일이 계산되었는지 확인할 수 있음
+
+### 성능 (Performance) 탭
+
+* 소요 시간과 기본
+  + 시간의 흐름에 따라 메인 스레드의 작업은 어떻게 이뤄졌는지
+  + 자바스크립트 힙 영역은 어떻게 변화하는지 확인할 수 있음
+    - 그래프의 아래를 따라가 개발자가 작성한 코드를 확인할 수 있음
+
+## 정리
+
+* 성능을 개선하고 병목 지점을 찾는 것은 개발 이상으로 어려운 일
+  + 반복적으로 꾸준히 탐색해야만 할 수 있는 업무