12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

--- title: '12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표' created: 2024-05-28 updated: 2024-05-28 tags: - 'Frontend' - 'Study' - 'Book' --- # 중요한 부분 정리 ## 웹사이트와 성능 - 사용자가 웹사이트에 접속했을 때 공통적으로 기대하는 사항에는 무엇이 있을까? 1. 웹사이트를 방문한 목적을 쉽게 달성할 수 있어야 하고, 2. 첫 번째 목적을 달성하는 데 걸리는 시간이 짧아야 하며, 3. 웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저해야 한다. ## 핵심 웹 지표란? - 핵심 웹 지표(Core Web Vital)란 구글에서 만든 지표로, 웹 사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어다. - 구글에서 핵심 웹 지표로 꼽는 지표는 다음과 같다. - 최대 콘텐츠풀 페인트(LCP: Largest Contentful Paint) - 최초 입력 지연(FID: First Input Delay) - 누적 레이아웃 이동(CLS: Cumulative Layout Shift) - 다음 두 지표는 핵심까지는 아니지만, 특정 문제를 진단하는 데 사용될 수 있다고 언급했다. - 최초 바이트까지의 시간(TTFB: Time To First Byte) - 최초 콘텐츠풀 시간(FCP: First Contentful Paint) ## 최대 콘텐츠풀 페인트(LCP) - 최대 콘텐츠풀 페인트(LCP: Largest Contentful Paint)란 '페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간'을 말한다. - 사용자의 기기가 노출하는 뷰포트 내부에서 가장 큰 영역을 차지하는 요소가 렌더링되는 데 얼마나 걸리는지를 측정하는 지표다. - 사용자에게 페이지의 정보를 화면에 전달하는 속도를 객관적으로 판단하기 위한 지표로 만들어졌다. ### 개선 방안 - 텍스트는 언제나 옳다. - 추가적인 리소스가 다운로드가 필요한 이미지보다 텍스트 노출이 빠르다. - 이미지는 어떻게 불러올 것인가? - `<img>`: 이미지는 브라우저의 프리로드 스캐너에 의해서 먼저 발견되어 빠르게 요청이 일어난다. 프리로드 스캐너란 HTML을 파싱하는 단계를 차단하지 않고 이미지와 같이 빠르게 미리 로딩하면 좋은 리소스를 먼저 찾아 로딩하는 브라우저의 기능이다. `<img>` 내부의 리소스는 이처럼 HTML 파싱이 미처 완료되지 않더라도 프리로드 스캐너가 병렬적으로 리소스를 다운로드하므로 최대 콘텐츠풀 페인트 요소를 불러오기에 적절한 방법이다 ## 최초 입력 지연(FID) - 웹사이트의 반응성을 측정하는 지표가 최초 입력 지연(FID: First Input Delay)이다. - 최초 입력 지연의 정의는 다음과 같다. - 사용자가 페이지와 처음 상호 작용할 때(예: 링크를 클릭하거나 버튼을 탭하거나 사용자 지정 JavaScript 기반 컨트롤을 사용할 때)부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정합니다. - 최초 입력 지연은 사용자가 얼마나 빠르게 웹페이지와의 상호작용에 대한 응답을 받을 수 있는지 측정하는 지표다. - 모든 입력에 대해 측정하는 것이 아니며, 최초의 입력 하나에 대해서만 그 응답 지연이 얼마나 걸리는지 판단한다. - 웹사이트 내부의 이벤트가 반응이 늦어지는 이유는 무엇일까? - 입력을 처리해야 하는 브라우저의 메인 스레드가 바쁘기 때문이다. - 대규모 렌더링이 일어나고 있거나, 대규모 자바스크립트 파일을 분석하고 실행하는 등 다른 작업을 처리하는 데 리소스를 할애하고 있기 때문이다. - 한 가지 더 최초 입력 지연을 이해하기 위해 알아야 하는 것은 바로 '사용자의 입력'이다. - 다양한 이벤트 중에서도 반응성에 해당하는 클릭, 터치, 타이핑 등 사용자의 개별 입력 작업에 초점을 맞추고 측정한다. - 정리하자면, 최초 입력 지연이란 화면이 최초에 그려지고 난 뒤, 사용자가 웹페이지에서 클릭 등 상호작용을 수행했을 때 메인 스레드가 이 이벤트에 대한 반응을 할 수 있을 때까지 걸리는 시간을 의미한다. 그리고 이 시간은 메인 스레드가 처리해야 하는 다른 작업이 많을수록 느려진다. ### 개선 방안 - 실행에 오래 걸리는 긴 작업을 분리 - 메인 스레드를 오래 점유하는 긴 작업은 비단 최초 입력 지연뿐만 아니라 웹페이지 전반에 악영향을 미친다. - 자바스크립트 코드 최소화 - 번들러가 코드를 만들어주는 과정에서 어느 정도 필요 없는 코드를 제거해 준다고 할지라도 여전히 경우에 따라 웹페이지가 불러오는 데 사용되지 않는 필요 없는 코드가 존재할 수 있다. - 타사 자바스크립트 코드 실행의 지연 - 타사 스크립트는 대부분 웹페이지 로드에 중요한 자원이 아니므로 `<script>`의 async와 defer를 이용해 지연 불러오기를 하는 것이 좋다. ## 누적 레이아웃 이동(CLS) - 페이지의 생명주기 동안 발생하는 모든 예기치 않은 이동에 대한 지표를 계산하는 것이 바로 누적 레이아웃 이동(CLS: Cumulative Layout Shift)이라고 한다. 다른 지표와 마찬가지로 이 지표가 낮을 수록, 즉 사용자가 겪는 예상치 못한 레이아웃 이동이 적을수록 더 좋은 웹사이트다. ### 개선 방안 - 삽입이 예상되는 요소를 위한 추가적인 공간 확보 - useLayoutEffect - 스켈레톤 UI - 서버 사이드 렌더링 - 폰트 로딩 최적화 - 최대한 중요한 폰트의 다운로드를 우선순위에 밀어넣고, 이 우선순위를 활용했음에도 빠르게 로딩하는 데 실패했다면 다음을 기역하고 폰트를 노출하는 것이다. - 적절한 이미지 크기 설정 - width, height 지정 ### 핵심 웹 지표는 아니지만 성능 확인에 중요한 지표들 - 최초 바이트까지의 시간(Time To First Byte, TTFB) - 최초 바이트까지의 시간은 브라우저가 웹페이지의 첫 번째 바이트를 수신하는 데 걸리는 시간을 의미한다. 즉, 페이지를 요청했을 때 요청이 완전히 완료되는 데 걸리는 시간을 측정하는 것이 아니라 최초의 응답이 오는 바이트까지가 얼마나 걸리는지를 측정하는 지표다. - 최초 콘텐츠풀 페인트(First Contentful Paint, FCP) - 최초 콘텐츠풀 페인트란 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정한다. 조금 더 쉽게 설명하자면 웹사이트에 접속한 순간부터 페이지에 뭐라도 뜨기 시작한 시점까지의 시간을 의미한다. 여기서 의미하는 '뭐라도 뜨뜨기 시작한'에 해당하는 요소는 텍스트, 이미지, svg 등을 의미한다. ## 정리 - 웹 페이지 성능을 개선하기로 마음먹었다면 앞서 언급한 3가지 주요 지표와 추가로 언급한 2가지 지표 정도만 살펴본다면 충분히 사용자에게 좋은 경험을 안겨줄 수 있다. ## 참고자료 - https://web.dev/articles/cls?hl=ko