[Korean FE Article] 배경 이미지가 CLS를 유발할 수 있습니다
글 링크: https://velog.io/@tap_kim/Your-background-images-might-be-causing-CLS
소개
레이아웃 시프트(CLS)에 대해서 많이 들어보셨을 텐데요. 이번엔 개발과 운영 환경에서 어떤 방식으로 CLS를 측정하고 방지할 수 있는지에 대해 글쓴이의 경험을 토대로 트러블 슈팅 과정을 자세하게 소개합니다. 또한 모니터링 도구인 Sentry를 이용하여 CLS를 추적하는 방법까지 알려주고 있습니다.
이번 글은 사소하다고 생각되었던 CLS를 좀 더 관심을 가지고 웹 바이탈 점수를 향상시키기 위한 분들에게 도움이 될 것 같습니다.
목차
CLS는 어떻게 측정되나요?
예상치 못한 누적 레이아웃 변경을 방지하는 방법
개발 중에 CLS를 체크하는 방법
CLS는 눈에보이는 요소에만 해당되지 않습니다.
실제 사용자를 위한 운영 환경에서 CLS를 발견하는 방법
제가 어긴 CLS의 첫 번째 규칙: width, height 속성
가상 요소를 선택한 이유
가상 요소에서 SVG 스타일링의 문제점
사소하지만 중요합니다.