Web Vitals

han·2023년 12월 3일
0

기존에 작성했던 내용을 그대로 옮겨온 거라 틀리거나 달라진 내용이 있을 수 있음. 발견 시 수정합니다

Web Vitals

1. Web Vitals이란

훌륭한 사용자 경험을 제공하는 데 필수적인 품질 지표에 대한 지침. 다음은 구글에서 제시하는 지침들의 종류다.

  • 모바일 친화성: 모바일 환경에서도 편하게 웹 사이트를 이용할 수 있어야 한다.

    휴대기기용 사이트를 구축할 때 알아야 하는 3가지 주요 사항

    고객이 쉽게 사용할 수 있게 만듭니다모바일 고객이 일반적인 작업을 얼마나 간편하게 완료할 수 있는지 확인하여 웹사이트의 효율성을 측정합니다.모든 기기에 일관성 있는 모바일 템플릿, 테마, 디자인을 선택합니다(예: 반응형 웹 디자인 사용)

    고급 검색엔진 최적화 - 모바일 친화성 시작하기

  • HTTPS: 페이지가 HTTPS를 통해 안전하게 제공되어야 한다.

HTTP 프로토콜의 경우 네트워크 상에서 전달되는 정보가 암호화되어 있지 않아 패킷의 내용이 그대로 노출되는 보안 문제가 있다. 이러한 단점을 보완하기 위해 등장한 것이 HTTPS 프로토콜이다.

여기서 패킷이란 네트워크 상에서 정보를 전달하기 위한 데이터 블록이다. HTTP의 경우 패킷이 암호화되어 있지 않아 다음과 같은 문제가 발생한다.

HTTPS Vs. HTTP: What Is A Secure Website, And Is It A Ranking Factor?

  • 방해가 되는 전면 광고 가이드라인: 사용자가 손쉽게 콘텐츠에 접근할 수 있어야 한다.

    방해가 되는 광고의 예시

예외적으로 허용되는 광고의 예시

  1. 쿠키 사용을 위한 전면 광고
  2. 연령 확인을 위한 전면 광고
  3. 화면 공간을 적절하게 사용한 배너

Google 검색 센터 블로그 - 콘텐츠 접근성을 떨어뜨리는 전면 광고의 예

  • Core Web Vitals(LCP, FID, CLS)

이중 Core Web Vitals은 ‘사용자에게 얼마나 빨리 콘텐츠를 제공하는가’, ‘사용자의 요구에 얼마나 빨리 응답하는가 ‘, ‘웹 사이트는 시각적으로 얼마나 안정되어 있는가’ 세 가지 요소로 구성되어 있다. 핵심은 이러한 요소들의 정량화된 측정이다.

Web Vitals을 준수한 최적화된 페이지일수록 검색엔진최적화(SEO)에서 좋은 점수를 받아 상위에 노출될 수 있다.

2. Core Web Vitals

  1. LCP(Largest Contentful Paint): 페이지의 로드 속도를 측정하는 항목
  • Good: 페이지가 처음 로딩된 후 2.5초 이내에 표시
  1. FID(First Input Dela): 사용자의 요구에 따른 응답성을 측정하는 항목
  • Good: 사용자의 요청이 발생한 후 100ms 이내에 응답
  1. CLS(Cumulative Layout Shift): 시각적 안정성을 측정하는 항목
  • Good: 페이지 컨텐츠의 예기치 않은 레이아웃 변화량이 0.1 이내

페이지에 갑자기 바뀌는 부분이 생기는 온라인 기사를 읽으신 경험이 있으신가요? 아무런 경고 없이 텍스트가 움직이며 읽던 부분을 놓치게 되거나, 더 심한 경우 링크나 버튼을 탭하기 직전 갑작스레 링크가 움직이는 바람에 다른 걸 클릭할 수도 있습니다.

구글의 Web dev 사이트에서는 갑작스러운 레이아웃 변화로 인해 사용자 경험을 저해하는 사례를 소개하고 있다.

예기치 않은 레이아웃 변화는 일반적으로 리소스가 비동기식으로 로드되거나 DOM 요소가 기존 콘텐츠 위의 페이지에 동적으로 추가되기 때문에 발생한다.

이러한 레이아웃의 변화는 사용자 경험을 저해할 뿐만 아니라, DOM 요소의 크기와 위치를 재계산하는 Reflow를 발생시키므로 성능 문제로 이어진다.

Limit reflow on the browser

3. Core Web Vital의 측정

1. PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/)

2. Chrome User Experience Report

사용 통계 보고를 활성화한 사용자로부터 웹 전반의 주요 사용자 경험 측정항목에 대한 실제 데이터를 집계하여 제공한다.

  • 사이트의 성능을 빠르게 평가할 수 있게 해주지만 정확한 진단이나 모니터링, 회귀에 대한 신속한 대응에 필수적인 상세한 페이지 뷰당 원격 분석은 제공하지 않는다

3. Search Console(Core Web Vitals Report)

LCP, FID, CLS를 기반으로 상태, 측정항목 유형, URL 그룹(유사한 웹페이지 그룹)으로 그룹화된 URL 성능을 제공한다.

4. Web-vitals JavaScript (https://github.com/GoogleChrome/web-vitals)

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

해당 Github를 방문하면 API를 호출하는 방법과 Google Analytics로 결과를 전송하여 확인하는 방법이 설명되어 있다.

5. LightHouse

lighthouse는 크롬에서 제공하는 웹사이트의 성능을 측정하는 도구다. 모바일, 데스크탑을 모두 지원하며 여러가지 지표들이 있지만 Performance를 중점적으로 다룬다.

lighthouse는 크롬의 개발자도구를 통해 간편하게 접근이 가능하다. (다만 측정 환경의 영향이 크니 간단하게 살펴보는 용도로만 쓰는 것이 좋을 듯)

4. Web Vital 점수 향상을 위한 방법

Lazy Loading(LCP 및 FID 개선)

lazy loading이란 이미지가 실제로 화면에 보여질 필요가 있을 때 로딩하도록 하는 기술이다. 웹 페이지 내에서 로딩하지 않고 로딩 시점을 뒤로 미뤄 웹 성능과 리소스 활용도를 증가시킨다.

성능 향상페이지 초기 로딩 시 필요로 한 이미지의 수를 줄일 수있다.비용 감소 : 네트워크로부터 전송될 바이트의 감소는 전송 비용을 줄인다.

1. lazy loading html 내에서 다루기

이미지는 두 가지 방법으로 로드 가능하다. html 내 <img> 태그 와 css 속성의 <background>이다.

<img data-src="https://ik.imagekit.io/demo/default-image.jpg" />

먼저 브라우저가 src 속성을 가지면 이미지를 무조건 로드시킨다. 이미지 태그의 data-src라는 속성에 이미지 url 을 지정했다면 src는 비워져 있기 때문에 브라우저는 해당 이미지를 로드하지 않게 된다.

이미지가 언제 로딩될 것인가는 JavaSript의 이벤트로 해결 가능하다.

google Chrome 브라우저 버전(chrome 76)에서는 native lazy loading를 지원해준다. 해당 방식이 지원되면서 개발자는 로드시킬 이미지에 loading만 추가해주면 된다.

물론 적용되지 않는 브라우저가 많으므로 이 방법만으로는 불안전하다.

2. lazy loading css 내에서 다루기

#bg-image.lazy {
   background-image: none;
   background-color: #F1F1FA;
}
#bg-image {
  background-image: url("https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-600,h-400");
  max-width: 600px;
  height: 400px;
}

bg-image를 id로 가진 요소는 background-image를 가진다. 거기에 lazy라는 클래스를 요소로 추가하게 된다면 background 이미지의 속성은 none이 된다.

이벤트 리스너는 이미지가 viewport로 들어오는 것을 감지하고 lazy 클래스를 삭제하면서 background image 를 로드할 수 있도록 도와준다.

3. 라이브러리 사용

실무에서 사용하는 방법으론 라이브러리 사용이 가장 보편적이지 않을까. 말 그대로 관련 라이브러리를 활용하는 방법(자세한 설명은 생략)

속성 크기 설정(CLS 향상)

  • 글꼴 : 한 페이지 내에 담긴 여러 유형의 font는 차례대로 CLS 점수를 하락시킨다. 가능한 최소 글꼴 유형과 크기를 고수해야 한다. 선택하는 font 유형이 많을 수록 웹 페이지를 로드시키는데 오래 걸린다.
  • 미디어 크기 설정 : 이미지 및 비디오의 HTML 크기 속성을 포함시킨다. 크기를 설정해준다면 브라우저가 페이지를 로드하는 동안 파일이 위치할 정확한 공간을 알 수 있다.

Web Vital 참고 자료

Web Vital 소개:건강한 사이트를 위한 필수적인 측정항목

Debug Web Vitals in the field

핵심 Web Vital 점수를 향상시키는 7가지 최고의 방법

profile
취미로 쓰기

0개의 댓글