만베거
newminkyung
Core Web Vital

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

  • 많은 개발자들이 성능에 대해 크게 관심을 갖지 않는 이유
    • 대부분 개발자의 기기는 성능이 뛰어남
    • 성능 개선 작업은 어려움
    • 작업 대비 눈에 띄는 성능 향상을 기대하기 어려움
    • 많은 업무와 끊이지 않는 버그..

핵심 웹 지표 (Core Web Vital)

  • 구글에서 정한 웹 콘텐츠 이용자의 사용 경험에 영향을 미치는 다양한 측정 가능한 값 들 중 3가지

LCP (Largest Contentful Paint)

LCP 개선하기 참고

FID (First Input Delay)

  • 얼마나 빠르게 웹페이지와 상호작용에 대한 응답을 받을 수 있는지

    • 상호작용: 클릭, 터치, 타이핑 등

  • 이벤트 반응이 느려지는 이유

    • 렌더링 발생 또는
    • 자바스크립트 파일을 분석, 실행 중일 때 느려짐

  • 최초 이벤트 발생부터 해당 이벤트의 핸들러가 실행되는 순간까지 사이의 기간만 측정

    • 이벤트 핸들러가 완료되는 데 걸리는 시간은 Event Timing API를 통해 측정 가능

RAIL

구글은 사용자 경험을 크게 4가지로 정의

  • Response: 입력에 대한 반응 속도, 50ms
  • Animation: 애니메이션의 프레임 속도, 10ms
  • Idle: 유휴 시간을 활용해 페이지가 50ms 이내에 사용자 입력에 반응할 수 있도록 함
  • Load: 5s 이내에 콘텐츠를 전달하고 인터랙션을 준비

개선 방안

  • 실행시간이 긴 작업을 분리

    • 서버에 옮겨서 처리
    • 긴 작업을 여러개로 분리해서 처리

  • 자바스크립트 코드 최소화

    • 트리쉐이킹을 통해 사용하지 않은 코드 삭제
    • 크롬 개발자 도구의 커버리지 활용 가능
    • image

  • 써드 파티 스크립트

    • 써드파티 예시: GA, Firebase 등
    • script 태그의 async, defer 속성을 이용
      • defer: 다른 리소스와 함께 병렬로 다운로드. 다운로드가 완료됐다 하더라도 페이지가 완전히 로딩된 이후에 맨 마지막에 실행
      • async: 다른 리소스와 함께 병렬로 다운로드. 다운로드가 완료되면 즉시 실행
      • 둘 다 없는 경우: script를 만나는 순간 다운로드. 다운로드가 완료되면 코드 실행이 우선됨. 다른 작업은 다운로드와 실행이 끝날 때까지 미뤄짐

CLS (Cumulative Layout Shift)

  • 페이지의 생명주기 동안 발생하는 모든 예기치 않은 이동

유튜브의 경우 최초 서버 사이드에서 가져온 HTML에서는 어떤 영상이 나올지 결정돼 있지 않은 채로 렌더링 됨

개선 방안

  • 요소 등의 삽입이 예상되는 요소를 위한 추가적인 공간 확보

    • 서버 사이드 렌더링
    • 스켈레톤 UI
    • useEffect 사용이 불가피하다면 layoutEffect 사용 검토
      • 하지만 동기적으로 동작해, 렌더링 성능에 영향을 줄 수 있음

  • 폰트 로딩 최적화

    • 기본 폰트로 먼저 렌더링되거나, 노출하지 못해서 누적 레이아웃 이동이 발생할 수 있음
    • <link> preload 사용
    • font-display: optional
      • optional: 100ms간 텍스트가 보이지 않고 이후 폴백 폰트로 렌더링함

  • 이미지 크기 설정

    • height: auto는 원본 이미지 비율을 쉽게 보여줄 수 있지만, 레이아웃 이동이 발생할 수 있음
    • img의 width, height 속성을 사용해서 비율 지정
    • 만약 뷰포트 너비에 맞춰 다른 이미지를 제공하고 싶다면, srcset을 이용

TTFB (Time to First Byte)

  • 최초 바이트까지의 시간

개선 방안

  • 서버 사이드 렌더링을 한다면 로직을 최적화
  • 주된 사용자의 국적과 가깝게 서버 위치시키기
  • 서버 사이드 렌더링 시 stream 기반 api 사용

FCP (First Contentful Paint)

  • 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠 일부가 화면에 렌더링될 때까지의 시간

개선 방안

  • TTFB 개선
  • 렌더링을 가로막는 리소스 최소화
  • 리다이렉트 최소화
  • DOM 크기 최소화
    • 구글 기준에 따르면
      • DOM 노드는 1500개 미만
      • 깊이는 32단계
      • 부모 노드는 자식 노드를 60개 정도만
    • 이보다 크고 복잡하다면 브라우저가 이를 파악하고 렌더링하는 데 시간이 오래 걸림
19 2Flutter