[Chorme] 크롬 개발자 모드, 코어 웹 바이탈 최적화 수치 보기

 

개발자 모드가 없었다면 어찌 프런트 개발을 했을까

콘솔도 찍어주고, warning , error에 대한 디테일한 부분까지 보여준다.

또한 로컬 스토리지, 쿠키 등의 정보도 표시해준다.

 

좀 더 맛있게 개발자 모드를 사용 하기 위해 한 가지를 추천한다.

 

렌더링 탭 진입하기

기본적으로 상단에 요소, 소스, 콘솔 등과 표시 되지 않는다. 따라서 렌더링 탭을 확인하려면 우상단 세로로 된 more(...) 아이콘을 클릭해서 열어야한다. 렌더링 탭의 다른 옵션들도 좋으니 한번 정도 클릭해보는 것을 추천한다.

 

 

렌더링탭 / 코어 웹 바이탈

해당 부분에 대해서 약간 살펴보고자 한다. 해당 기능을 체크하면 성능을 표시해주는 상자가 나온다.

 

저 중에서 Largest Contentful Paint, 줄여서 LCP라고도 하는 이 친구는 로딩 성능을 측정하는 지표이다.  

로드 시작을 기점으로 가장 큰 이미지나 텍스트의 렌더링 시간이다.

2.5s 이내의 값이 나와야 좋은 사용자 경험을 제공하는 페이지라고 할 수 있다. 한번 정도 자기프로그램의 LCP를 확인해보기 바란다.

네이버는 많은 정보를 불러옴에도 불구하고 평균적으로 0.8s 이전의 값들이 나온다.  

 

개발중인 페이지가 이미지를 많이 불러오고 있기는 한데 8.80s 이라는 말도 안되는 수치가 나와서 당황.. 

해당 부분들에 대해서 수정이 필요함을 절실하게 느낄수있다

 

개발중인 페이지가 2.5s 이내로

나오는지 체크해보고 넘는다면

리소스를 줄이거나 (이미지 크기 최적화), 스타일 시트의 크기를 줄이는 등의

방법으로 LCP를 줄여보는것을 권한다!! (일단 저부터)