13.1 애플리케이션에서 확인하기
13.1.1 create-react-app
reportWebVitals()
reportWebVitals 함수는 웹에서 성능을 측정하기 위한 함수다.
누적 레이아웃 이동(CLS), 최초 입력 지연(FID), 최초 콘텐츠풀 페인트(FCP), 최대 콘텐츠 페인팅(LCP), 첫 바이트까지의 시간(TTFB)을 측정하는 용도로 사용된다.
해당 값들은 PerformanceObserver 라는 API 를 사용해서 측정하기 때문에 브라우저가 해당 API를 지원하지 않는다면 reportWebVitals함수를 통해 성능을 측정하기 어렵다.
13.1.2 create-next-app
NextWebVitalsMetric
Next.js는 성능 측정을 할 수 있는 메서드로 NextWebVitalsMetric을 제공한다.
이 메서드는 핵심 웹 지표 외에도 다음과 같은 Next.js에 특화된 사용자 지표도 제공한다.
Next.js-hydration : 페이지가 서버 사이드에서 렌더링되어 하이드레이션하는 데 걸린 시간
Next.js-route-change-to-render : 페이지가 경로를 변경한 후 페이지를 렌더링을 시작하는 데 걸리는 시간
Next.js-render : 경로 변경이 완료된 후 페이지를 렌더링하는 데 걸린 시간
13.2 구글 라이트 하우스
애프리케이션 코드 수정이나 배포, 수집 없이도 지표를 수집할 수 있는 방법이 있는데 이는 바로 구글 라이트하우스다.
13.2.1 탐색 모드
일반적으로 페이지에 접속했을 때부터 페이지 로딩이 완료될 때까지 성능을 측정하는 모드다.
페이지를 처음부터 다시 불러와서 페이지 로딩이 끝날 때까지 각각의 지표를 수집한다.
성능
웹페이지의 성능과 관련된 지표를 확인할 수 있는 영역이다.
최초 콘텐츠풀 페인트(FCP), 최대 콘텐츠풀 페인트(LCP), 누적 레이아웃 이동(CLS) 외에도 세 가지 추가적인 지표가 있다.
Time to Interactive : 페이지에서 사용자가 완전히 상호작용을 할 수 있을때까지의 시간측정 ( 상호작용 이란 아래와 같다 )
최초 콘텐츠풀 페인트로 측정되는 페이지 내 콘텐츠가 표시되는 시점
보여지는 페이지 요소의 대부분에 이벤트 핸들러가 부착되는 시점
페이지가 유저의 상호작용에 50ms 내로 응답하는 시점
Speed Index : 페이지가 로드되는 동안 콘텐츠가 얼마나 빨리 시각적으로 표시되는지를 계산한다. 브라우저에서 로드되는 페이지를 실시간으로 캡쳐하고 , Speedline 라이브러리를 사용해 캡처된 이미지를 분석해 speed index를 계산한다.
Total Blocking Time : 메인 스레드에서 긴 작업(50ms이상)이 수행될 때마다 메인스레드가 차단된것으로 간주한다. 이런 차단시간을 모아서 각각의 50ms 을 뺀 시간을 총 차단시간이라고 한다.
접근성
웹 접근성을 말하며 장애인 고령자 등 신체적으로 불편한 사람들이 일반적인 사용자와 동등하게 웹페이지를 이용할 수 있도록 보장하는 것을 말한다.
권장사항
웹사이트를 개발할 때 고려해야 할 요소들을 얼마나 지키고 있는지 확인할 수 있다.
CSP가 XSS 공격에 효과적인지 확인
XSS (Cross Site Scripting)란 개발자가 아닌 제3자가 삽입한 스크립트를 통해 공격하는 기법을 말한다.
CSP(Content Security Policy)란 웹사이트에서 호출할 수 있는 컨텐츠를 제한하는 정책을 말한다.
감지된 JavaScript라이브러리를 말한다.
HTTPS 사용 확인
페이지 로드 시 위치정보 권한 요청 방지하기
페이지 로드시 사용자의 물리적 위치를 알 수 있는 메서드들을 실행하는지 확인한다.
페이지 로드시 알림권한 요청 방지하기
사용자 동의 없이 페이지 로드 시 웹페이지 알림을 요청하는 함수를 실행하는지 확인.
알려진 보안 취약점이 있는 라이브러리 사용하지 않는지 확인
사용자가 비밀번호 입력란에 붙여넣을 수 있도록 허용
이미지를 올바른 가로세로 비율로 표시
이미지의 적절한 해상도 확인
페이지에 HTML Doctype 존재 유무 확인
문자집합 제대로 정의했는지 확인
지원 중단 API 사용여부 확인
콘솔에 로그인된 브라우저 오류 확인
Chrome devtools의 이슈패널 확인
페이지의 소스맵 확인
font-display : 사용하는 폰트가 미리 로드됨
검색 엔진 최적화
구글과 같은 검색엔진이 쉽게 웹페이지 정보를 가져가서 공개할 수 있도록 최적화 되어있는지 확인하는 것을 의미한다.
robots.txt가 유효한지, 이미지와 링크에 설명 문자가 존재하는지, <meta>나 <title>등으로 페이지의 정보를 빠르게 확인할 수 있는지를 확인한다.
13.2.2 기간 모드
실제 웹페이지를 탐색하는 동안 지표를 측정하는 것이다.
기간모드 시작을 누른 뒤 성능 측정을 원하는 작업 수행 후, 기간 모드를 종료하면 그 사이에 일어난 작업들에 대한 지표를 확인할 수 있다.
해당 모드는 탐색모드와 다르게 앞에서 볼 수 없었던 내용 두 가지를 확인할 수 있는데 ‘흔적’과 ‘트랩’이다.
흔적
View Trace를 번역한 것으로 시간의 흐름에 따라 어떻게 웹페이지가 로딩됐는지를 보여준다.
트리맵
페이지를 불러올 때 함께 로딩한 모든 리소스를 함께 모아서 볼 수 있는 곳이다.
웹페이지 전체 자바스크립트 리소스 중 어떤 파일이 전체 데이터 로딩 중 어느 정도를 차지했는지 비율로, 실제 크기로 확인이 가능하다.
13.2.3 스냅샷
탐색모등와 유사하지만 현재 페이지 상태를 기준으로 분석한다.
현재 상태에서 검색 엔진의 최적화, 접근성, 성능 등을 분석할 수 있다.
페이지 로딩이 아닌 특정 페이지 특정 상태를 기준으로 분석하고 싶다면 스냅샷 모드를 사용하면 된다.
13.3 WebPageTest
웹사이트 성능을 분석하는 도구로 가장 널리 알려진 도구다.
무료 기능도 있지만 유료로 제공하는 분석 도구도 있을 만큼 웹사이트 성능을 분석할 수 있는 심도있는 기능이 많다.
또한 미국, 인도, 캐나다, 독일 등 하눅과 거리가 먼 서버를 기준으로 테스트 하기 때문에 앞에 명시된 크롬 개발자 도구에서 테스트했을 때보다 성능 지표가 좋지 않을 가능성이 매우 높다.
WebPageTest에서 제공하는 분석도구는 아래 다섯가지로 나뉜다.
Site Performance : 웹사이트의 성능을 분석하기 위한 도구
Core Web Vitals : 웹사이트의 핵심 웹 지표를 확인하기 위한 도구
Lighthouse : 구글 라이트하우스 도구
Visual Comparison : 2개 이상의 사이트를 동시에 실행해 시간 흐름에 따른 로딩 비교
Traceroute : 네트워크 경로를 확인하는 도구
사이트에 접속 후 Site Performance 를 선택한 뒤 측정하고자하는 사이트 입력 후 분석을 하면 된다. Start Test를 누르면 테스트가 시작되며, 다소간의 시간이 흐른 후 테스트가 완료된다.
13.3.1 Performance Summary
테스트가 완료되면 전체적인 결과를 요약해서 볼 수 있는 페이지다.
테스트는 세번 이뤄지기 때문에 서로 다른 세개의 결과를 확인할 수 있고 측정 결과는 세 가지 영역으로 나눠져 있다.
Opportunities & Experiments
Is it Quick : 웹사이트가 빠른지 평가
Is it Usable : 웹사이트의 사용성과 시각적인 요소를 확인
Is it Resilient : 보안 취약성을 점검
Observed Metrics : 측정할 수 있는 다양한 시간 지표에 대해 나타낸다.
주황색 실선 : 웹사이트의 모습이 변경된 경우
주황색 점선 : 웹사이트의 모습이 변경 됐고, 레이아웃 이동도 일어난 경우
빨간색 실선 : 웹사이트의 모습이 변경된 경우
빨간색 점선 : 최대 콘텐츠풀 페인트와 동시에 레이아웃의 이동도 일어난 경우
Individual Runs : 세번 테스트를 하는 동안 평균값이 아닌 각각의 값을 보여준다.
13.3.2 Opportunities & Experiments
상세지표
최초 바이트까지의 시간(TTFB)을 점검한다.
렌더링을 블로킹하는 자바스크립트가 있는지 확인한다.
렌더링을 블로킹하는 css가 있는지 확인한다.
최초 콘텐츠풀 페인트가 2.5초 이내인지 확인한다.
주요 영역 내에 lazy loading되는 이미지가 있는지 확인한다.
주요 영영 외에 lazy loading되는 이미지가 있는지 확인한다.
문자 노출을 지연시키는 폰트를 불러오는지 확인한다.
실제로 사용하지 않는 리소스를 rel=preload 하지 않는지 확인한다.
HTTP 리다이렉트되는 리소스가 없어야 한다.
최초로 다운받은 HTML과 최종 결과물 HTML 사이에 크기 차이가 적어야 한다.
Is it Usable
이미지 비율 부재로 인한 레이아웃 이동가능성 여부를 확인한다.
어떤 이유든 메인 스레드가 장시간 멈춰있어서는 안된다.
meta : viewport가 적절하게 삽입돼 있어야 한다.
접근성 이슈가 있는지 확인한다.
최초로 다운받은 HTML과 최종 결과물 HTML사이에 크기 차이가 적어야 한다.
Is it Resilient
렌더링을 막는 제3자 라이브러리 요청이 없어야 한다.
자바스크립트 라이브러리에 보안위혐이 존재하는지 확인해 주는 도구 Snyk에서 검출된 보안 위협이 없어야 한다.
모든 요청을 HTTP가 아닌 HTTPS를 거쳐야 한다.
최초로 다운로드한 HTML과 최종결과물 HTML 사이에 크기 차이가 적어야 한다.
13.3.3 Filmstrip
웹사이트를 마치 필름을 보는 것처럼 시간의 흐름에 따라 어떻게 웹사이트가 그려졌는지, ,어떤 리소스가 불러와졌는지 볼 수 있는 메뉴다.
13.3.4 Details
Filmstrip 에서 보여준 내용을 자세하게 보여주는 영역이다.
13.3.5 Web Vitals
최대 콘텐츠풀 페인트(LCP), 누적 레이아웃 이동(CLS), 총 블로킹 시간(TBT)에 대한 자세한 내용을 확인할 수 있다.
13.3.6 Optimizations
최적화와 관련된 메뉴로, 리소스들이 얼마나 최적화돼 있는지 나타낸다.
Keep Alive 설정으로 서버와의 연결을 계속 유지하고 있는지
Gzip 으로 리소스를 압축했는지
이미지를 적절하게 압축했는지
Progressive JPEG으로 이미지를 렌더링하고 있는지
리소스 캐시 정책이 올바르게 수립돼 있는지
리소스가 CDN(Content Delivery Network)을 거치고 있는지
13.3.7 Content
웹사이트에서 제공하는 콘텐츠, 에셋을 종류별로 묶어 통계를 보여준다.
에셋 종류별 크기와 로딩 과정을 확인할 수 있으며, 시간의 흐름에 따라 렌더링을 거치면서 또 어떻게 에셋을 불러오는지도 확인할 수 있다.
13.3.8 Domains
Content 메뉴에서 보여준 에셋들이 어느 도메인에서 왔는지를 도메인별로 묶어서 확인할 수 있다.
13.3.9 Console Log
웹페이지에 접속했을때 console.log로 무엇이 기록됐는지 확인할 수 있다.
13.3.10 Detected Technologies
웹사이트를 개발하는 데 사용된 기술을 확인할 수 있는 메뉴다.
13.3.11 Main-thread Processing
메인스레드가 어떤 작업을 처리했는지 확인할 수 있다.
이곳에서는 리소스를 기다리는 idle time, 즉 유휴시간은 집계에 포함하지 않는다.
13.3.12 Lighthouse Report
구글 라이트하우스 리포트를 확인할 수 있다.
13.4 크롬 개발자도구
13.4.1 성능 통계
웹사이트의 성능을 자세하게 확인할 수 있는 도구다.
Page Load를 선택해 웹사이트 로딩 시작부터 끝까지를 확인하거나, 혹은 Start Recording을 눌러서 원하는 액션을 수행하면서 웹사이트 성능을 측정할 수 있다.
Throttling을 사용해 고의로 네트워크와 CPU 속도를 지연시켜 일반적인 모바일 사용자의 열악한 환경을 재현할 수 있다.
Insights
성능을 측정하는 동안 발생한 이벤트 중 눈여겨봐야 할 내용을 시간의 흐름에 따라 모아서 보여준다.
메인메뉴
메인 영역에서는 성능을 측정하는 기간 동안 무슨일이 일어나는지 확인할 수 있는 다양한 기능을 제공한다.
13.4.2 성능
성능 분석에 사용하기 위해 만들어진 탭이다.
Performance Insights탭에 비해 내용이 어렵고 복잡하지만 그만큼 더 자세한 정보를 조금 더 세밀하게 볼 수 있다는 장점이 있다. 하지만 일반적인 성능분석과 측정은 Performance Insights 탭의 정보만으로도 충분하므로 더 자세하게 알고 싶은 경우에 참고하면 좋다.