[모던 리액트 딥다이브] 12장 핵심 웹 지표

사용자가 웹사이트에 접속했을 때 공통적으로 기대하는 사항

• 웹사이트를 방문한 목적을 손쉽게 달성할 수 있어야 함
• 첫 번째 목적을 달성하는 데 걸리는 시간이 짧아야 함
• 웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저해야 함

 

 

웹사이트의 성능

• 1초 내로 로딩되는 사이트는 5초 내로 로딩되는 사이트보다 전자상거래 전환율이 2.5배 더 높음
• 0 ~ 5초의 범위에서, 1초 로딩이 늦어질수록 전환율은 4.42%씩 떨어짐
• 페이지 로드 시간이 0~2초 사이인 페이지에서 가장 높은 전환율을 달성할 수 있음
• 소비자의 70%는 페이지 속도가 온라인 커머스 사이트를 방문하는 데 영향을 미침

 

핵심 웹 지표(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

• 정의
  • 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간
  • 즉, 사용자의 기기가 노출하는 뷰포트 내부에서 가장 큰 영역을 차지하는 요소가 렌더링되는 데 얼마나 걸리는지를 측정하는 지표
  • 큰 이미지 또는 텍스트
    • <img>
    • <src> 내부의 <img>
    • poster 속성을 사용하는 <video> (poster 속성 사용 시 비디오 재생 전 썸네일 이미지를 띄울 수 있음)
    • url()을 통해 불러온 배경 이미지가 있는 요소
    • 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소(<p>, <div> 등)
• 기준 점수
  • 좋은 점수 : 해당 지표가 2.5초 내로 응답이 옴
  • 보통 : 4초 이내로 응답이 옴
  • 나쁨 : 4초 이후
• 개선 방안
  • 텍스트를 사용하기
    • 이미지를 최적화하더라도 추가적인 리소스 다운로드가 필요한 이미지보가 텍스트 노출이 훨씬 더 빠름
  • 이미지 불러오기
    • <img> : 이미지는 브라우저의 프리로드 스캐너에 의해서 먼저 발견되어 빠르게 요청이 발생함
    • <svg> 내부의 <img> : <svg> 내부의 <img> 는 프리로드 스캐너에 의해 발견되지 않아 병렬적으로 다운로드가 일어나지 않아 이러한 방식은 삼가하는 것이 좋음
    • <video> 의 poster : 프리로드 스캐너에 의해 조기에 발견되어 <img>와 같은 성능을 나타냄
    • background-image : url():background-image를 비롯해서 CSS에 있는 리소스는 항상 느림. 브라우저가 해당 리소스를 필요로 하는 DOM을 그릴 준비가 될 때까지 리소스 요청을 뒤로 미루기 때문
• 주의 사항
  • 이미지 무손실 압축 : 웹으로 서비스할 이미지는 가능한 한 무손실 형식으로 압축해 최소한의 용량으로 서비스하는 것이 좋음
  • lazy loading 주의 : lazy loading은 리소스를 중요하지 않음으로 표시하고 필요할 때만 로드하는 전략으로 로딩 속도만 늦출 뿐 지표 점수에는 도움이 되지 않음
  • fadein과 같은 각종 애니메이션 : 애니메이션 처리가 들어가면 이미지가 그냥 뜨는 것보다 늦어짐
  • 클라이언트 빌드하지 말 것 : 서버에서 빌드해온 HTML을 프리로드 스캐너가 바로 읽어서 최대 콘텐츠풀 페인트로 빠르게 가져가는 것이 좋음
  • 최대 콘텐츠풀 콘텐츠 직접 호스팅 : 최대 콘텐츠풀 리소스는 같은 도메인에서 직접 호스팅하는 것이 좋음(다른 출처에서 가져올 경우 네트워크 커넥션부터 다시 수행해야 하기 때문)

- 뷰포트 : 사용자에게 현재 노출되는 화면

- 프리로드 스캐너 : HTML을 파싱하는 단계를 차단하지 않고 이미지와 같이 빠르게 로딩하면 좋은 리소스를 먼저 찾아 로딩하는 브라우저의 기능

 

 

 

최초 입력 지연, FID

• 정의
  • 사용자가 페이지와 처음 상호 작용할 때부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간
  • 모든 입력에 대해 측정하는 것이 아닌, 최초의 입력 하나에 대해서만 판단함
  • 즉, 화면이 최초에 그려지고 난 뒤, 사용자가 웹페이지에서 클릭 등 상호작용을 수행했을 때 메인 스레드가 이 이벤트에 대한 반응을 할 수 있을 때까지 걸리는 시간
• 의미
  • 웹사이트 내부의 이벤트가 반응이 늦어지는 이유?
    • 해당 입력을 처리해야 하는 브라우저의 메인 스레드가 바쁘기 때문 => 대규모 렌더링, 대규모 자바스크립트 파일 분석 및 실행 등 다른 작업을 처리하는 데 리소스를 할애하기 때문
  • 이벤트가 발생하는 시점에 최대한 메인 스레드가 다른 작업을 처리할 수 있도록 여유를 만들어 둬야 사용자에게 빠른 반응성을 보장할 수 있음
• 기준 점수
  • 좋음 : 100ms 이내 응답
  • 보통 : 300ms 이내 응답
  • 나쁨 : 300ms 이후 응답
• 개선 방안
  • 실행에 오래 걸리는 긴 작업 분리
    • 꼭 웹페이지에서 해야 하는 작업인지 확인
    • 긴 작업을 여러 개로 분리
    • 지금 당장 필요하지 않은 내용은 나중에 불러오기
  • 자바스크립트 코드 최소화
    • 코드 우선순위 부여, 낮은 우선순위는 사용자가 필요로 할 때 불러오기
    • 폴리필 주의해서 사용
  • 타사 자바스크립트 코드 실행의 지연
    • <script>의 async와 defer를 이용해 지연 불러오기를 하는 것이 좋음(defer >> async >> 둘다 없음)
      • defer : 해당 스크립트를 다른 리소스와 함께 병렬로 다운로드. 다운로드 중에도 HTML 파싱 등의 메인 스레드 작업은 멈추지 않음. 다운로드가 완료되어도 이 스크립트의 실행은 페이지가 완전히 로딩된 이후 맨 마지막에 실행됨
      • async : 해당 스크립트를 다른 리소스와 함께 병렬로 다운로드. async 리소스의 다운로드가 완료되어 버리면 다른 리소스의 다운로드가 완료되는 것을 기다리지 않고 바로 실행함
      • 둘다 없음 : script를 만나는 순간 다운로드가 우선되며, 다운로드가 완료되면 코드 실행이 우선됨. 다른 작업은 다운로드와 실행이 끝날 때까지 미뤄짐
    • Intersection Observer를 이용해 뷰포트에 들어오는 시점에 불러오기

 

 

RAIL

• 구글에서 정의한 4가지 사용자 경험
• Response : 사용자의 입력에 대한 반응 속도, 50ms 미만으로 이벤트를 처리할 것
• Animation : 애니메이션의 각 프레임을 10ms 이하로 생성할 것
• Idle : 유휴 시간을 극대화해 페이지가 50ms 이내에 사용자 입력에 응답하도록 할 것
• Load : 5초 이내에 콘텐츠를 전달하고 인터랙션을 준비할 것

 

 

누적 레이아웃 이동, CLS

• 정의
  • 페이지의 생명주기 동안 발생하는 모든 예기치 않은 이동에 대한 지표를 계산하는 것
• 의미
  • 최초 렌더링 이후에 실행되는 useEffect가 많을수록, useEffect가 렌더링에 영향을 미칠수록 이 누적 레이아웃 이동에 좋지 못한 점수를 받을 가능서이 커짐
  • 뷰포트 내부의 요소에 대해서만 측정함
  • 사용자 액션으로 인해 발생한 레이아웃 이동은 점수에 포함되지 않음
  • 포함 내용
    • 영향분율 : 레이아웃 이동이 발생한 요소의 전체 높이와 뷰포트 높이의 비율
    • 거리분율 : 레이아웃 이동이 발생한 요소가 뷰포트 대비 얼마나 이동했는지 의미
• 기준 점수
  • 좋음 : 0.1 이하
  • 보통 : 0.25 이하
  • 나쁨 : 0.25 이상
• 개선 방안
  • 삽입이 예상되는 요소를 위한 추가적인 공간 확보
    • 스켈레톤 UI
    • 서버 사이드 렌더링
    • useEffect의 내부에서 요소에 영향을 미치는 작업 최소화
    • useLayoutEffect 훅 사용. 단, 동기적으로 발생해 브라우저의 페인트 작업에 영향을 미치기 때문에 사용자에게 로딩이 오래 걸리는 것과 같이 보일 수 있으므로 신중하게 선택해야 함
  • 폰트 로딩 최적화
    • 폰트로 인해 발생할 수 있는 문제
      • FOUT : HTML문서에서 지정한 폰트가 보이지 않고 대체 기본 폰트로 보이고 있다가 뒤늦게 폰트가 적용되는 현상
      • FOIT :HTML 문서에서 지정한 폰트가 보이지 않고, 기본 폰트도 없어서 텍스트가 없는 채로 있다가 뒤늦게 폰트가 로딩되면서 페이지에 렌더링되는 현상
      • 폰트는 각각 고유의 높이와 너비를 가지고 이씀
    • 해결법
      • <link> 의 preload 사용
      • font-family
        • auto : 브라우저가 폰트를 불러오는 방식 결정
        • block : 폰트가 로딩되기 전까지 렌더링 중단
        • swap : FOUT 방식, 우선 폴백 폰트로 글자를 렌더링한 다음, 웹 폰트의 로딩이 완료되면 웹 포인트를 적용
        • fallback : 100ms 간 텍스트가 보이지 않고, 그 이후에 폴백 폰트로 렌더링함. 그리고 3초 안으로 폰트가 로딩되면 해당 웹 폰트로 전환하고, 그렇지 않다면 폴백 폰트 계속 사용
        • optional : fallback과 유사하지만, 0.1초 이내로 폰트가 다운로드돼 있거나 캐시돼 있지 않다면 폴백 폰트를 사용함. 또한, 브라우저가 네트워크 상태를 파악해 일정 기간 폰트를 다운로드 하지 못하다면 연결을 취소함
      • 적절한 이미지 크기 설정
        • width, height 지정
        • 반응형 이미지를 위한 srcset 속성

 

 

최초 바이트까지의 시간, TTFB

• 브라우저가 웹페이지의 첫 번째 바이트를 수신하는데 걸리는 시간
• 600ms 이상 걸릴 경우 개선이 필요함
• 서버 사이드 렌더링을 하고 있는 애플리케이션에서 주의 깊게 봐야 할 지표

 

 

최초 콘텐츠풀 페인트, FCP

• 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간
• 1.8초 이내명 좋음, 3.0초 이내는 보통, 그 이후 개선이 필요함
• 최초 바이트까지의 시간 개선
• 렌더링을 가로막는 리소스 최소화 => js, CSS
• Above the  Fold에 대한 최적화
• 페이지 리다이렉트 최소화
• DOM 크기 최소화