jfmam 개발 블로그

개요 LCP와 CLS에 용어에 대해 이해하고 브라우저 렌더링을 최적화 시키는 방법에 대해 알아보자 CLS란? 사용자 경험을 측정하는 대표지표로 개발자 도구(lighthouse)를 통해 검사 할 수 있다. cumulative layout shift라는 의미로 페이지거 랜더링 되고 나서 새로운 DOM이 추가 되는 등에 의한 요인으로 페이지 콘텐츠가 흔들리는 경우 발생하게 된다. 이러한 문제는 사용자가 예를 들어 버튼을 누르려다가 밀리면서 다른 버튼을 누르게 되는 등 사용자 경험을 떨어뜨리기 때문에 CLS를 방지하는 것은 중요하다. CLS 발생 요인 DOM이 추가 되는 경우: DOM이 추가 되면서 사용자가 다른 버튼을 누르게 되는 경우 FOUT, FOIT: 스타일 되지 않는 폰트가 나오다가 스타일이 뒤늦게 일..