# Lighthouse 로 Web Vitals 최적화 하기

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=4261](https://news.hada.io/topic?id=4261)
- GeekNews Markdown: [https://news.hada.io/topic/4261.md](https://news.hada.io/topic/4261.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-05-15T09:22:01+09:00
- Updated: 2021-05-15T09:22:01+09:00
- Original source: [web.dev](https://web.dev/optimize-vitals-lighthouse/)
- Points: 8
- Comments: 2

## Topic Body

- Core Web Vitals 측정

- Largest Contentful Paint 개체 찾기

- LCP 개선을 위해 프리로드 하기

- Cumulative Layout Shift 영향주는 개체 찾기

ㅤ→ 사이즈 없는 이미지들

ㅤ→ 광고들

ㅤ→ non-composited 애니메이션들

- First Input Delay / Total Blocking Time / Long Tasks 디버깅 하기

## Comments



### Comment 5195

- Author: alstjr7375
- Created: 2021-05-15T19:15:26+09:00
- Points: 2

관련 이미지 최적화 방법

https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

요약하는 트윗

https://twitter.com/addyosmani/status/1388031656355794945

### Comment 5189

- Author: xguru
- Created: 2021-05-15T09:23:01+09:00
- Points: 2

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

- Core Web Vitals

ㅤ→ LCP : Largest Contentful Paint

ㅤ→ FID : First Input Delay

ㅤ→ CLS : Cumulative Layout Shift

Lighthouse 6.0 릴리즈 https://news.hada.io/topic?id=2122

ㅤ→ LCP,CLS,TBT 메트릭 추가

Cumulative Layout Shift (CLS) 란 무엇인가? https://news.hada.io/topic?id=1697

ㅤ→ 이미지/광고의 느린 로딩, 비동기 동작, 동적 DOM변경등으로 웹 페이지의 레이아웃이 얼마나 변하는 지를 측정

ㅤ→ 사용자가 잘못된 클릭을 유발하게 되는 시각적 불안정성을 체크하는 사용자 중심 성능 지표