# 실제 웹사이트에서 Web Vitals 디버깅하기 [번역]

> Clean Markdown view of GeekNews topic #4161. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=4161](https://news.hada.io/topic?id=4161)
- GeekNews Markdown: [https://news.hada.io/topic/4161.md](https://news.hada.io/topic/4161.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-04-29T11:48:40+09:00
- Updated: 2021-04-29T11:48:40+09:00
- Original source: [blog.outsider.ne.kr](https://blog.outsider.ne.kr/1548)
- Points: 6
- Comments: 2

## Topic Body

- 속성(attribution)과 디버깅을 위한 API

ㅤ→ CLS

ㅤ→ 레이아웃 이동 속성 가져오기

ㅤ→ LCP

ㅤ→ LCP 후보 요소 찾기

ㅤ→ FID

ㅤ→ FID 대상 요소 찾아내기

- web-vitals JavaScript 라이브러리의 사용방법

- 데이터를 보고하고 시각화하기

- Web Vitals 보고 도구

## Comments



### Comment 5043

- Author: bncgood
- Created: 2021-04-29T21:34:14+09:00
- Points: 1

구글에서 실제 검색 결과에 반영하는 것은 6월 중순이라고 변경하여 공지 하였습니다.

https://developers.google.com/search/blog/2021/04/more-details-page-experience?hl=ko

### Comment 5041

- Author: xguru
- Created: 2021-04-29T11:48:48+09:00
- Points: 1

구글, 검색결과 순위에 페이지 경험(Page Experience) 지표 도입 https://news.hada.io/topic?id=2197

- Core Web Vitals

ㅤ→ LCP : Largest Contentful Paint

ㅤ→ FID : First Input Delay

ㅤ→ CLS : Cumulative Layout Shift

구글 시트로 Core Web Vitals 매일 자동 측정하기 https://news.hada.io/topic?id=2726