# Layout Shift GIF Generator

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=2679](https://news.hada.io/topic?id=2679)
- GeekNews Markdown: [https://news.hada.io/topic/2679.md](https://news.hada.io/topic/2679.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-08-20T10:02:54+09:00
- Updated: 2020-08-20T10:02:54+09:00
- Original source: [defaced.dev](https://defaced.dev/tools/layout-shift-gif-generator/)
- Points: 4
- Comments: 1

## Topic Body

- 모바일/데스크탑 웹페이지의 CLS(Cumulative Layout Shift)를 시각화해서 보여주는 도구

- 구글이 검색결과 랭킹값에도 점점 더 강조 하기 시작한 Core Web Vitals 의 CLS 점수를 체크하기 위함

- 변화를 강조 표시한 Animated GIF로 생성

- Puppeteer를 이용한 JS 오픈소스로 CLI 도구로도 실행 가능

## Comments



### Comment 2634

- Author: xguru
- Created: 2020-08-20T10:03:03+09:00
- Points: 1

Cumulative Layout Shift (CLS) https://news.hada.io/topic?id=1697

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