페이지 속도를 나타내는 핵심 성능 보고서, LCP/FID/CLS 값 확인해보기

구글의 Web Vital은 웹 페이지의 경험을 나타내는 여러 가지 지표를 의미합니다. 페이지가 얼마나 빨리 열리는지, 웹 페이지의 사용성은 어떤지를 측정합니다. 구글이 많은 지표를 만들긴 했는데요, 그 중에서 중요한 세 가지 지표를 Core Web Vitals라고 합니다. 우리말로는 "핵심 성능 보고서"라고 부르기도 합니다.

 

(c) Google (출처)

 

• LCP (Largest Contentful Paint): 페이지가 얼마나 빨리 로딩되는지 측정합니다. 화면을 가장 많이 차지하는 콘텐츠가 로딩되는 시점을 측정합니다.
• FID (First Input Delay): 응답성을 측정합니다. 링크를 누르는 등, 사용자가 페이지와 처음 상호 작용할 때 얼마나 시간이 걸리는지 측정합니다.
• CLS (Cumulative Layout Shift): 시각적 안정성을 측정합니다. 페이지가 로딩되면서 이미지나 텍스트 위치가 바뀌는 정도를 의미합니다. 버튼을 누르려고 했는데 갑자기 이미지가 로딩되면서 버튼이 밑으로 내려간 경험이 있으실텐데요, 이렇게 되면 CLS가 증가합니다.
  

 

즉, 페이지가 얼마나 빨리 열리고, 버튼/링크를 누르면 빠릿하게 응답하고, 의도치 않게 페이지의 구성 요소 위치가 바뀌지 않는 페이지일수록 좋은 페이지입니다. 로딩이 너무 느리면 페이지가 열리기 전에 창을 닫아버리는 경우가 많기에, 웹 페이지 속도를 높이는 것은 중요합니다.

Google Chrome 브라우저는 각 페이지가다 LCP, FID, CLS를 수집하여 Chrome USer Experence Report(크롬 유저 경험 보고서)에다가 기록합니다. 이 데이터는 공개되어 있으며, 누구나 확인할 수 있습니다. 확인하는 방법은 여러 개가 있는데, 조금 있다가 밑에서 설명드리겠습니다.

Core Web Vitals에 대한 자세한 내용은 Google Developers Korea Blog에 올라간 Web Vitals 소개: 건강한 사이트를 위한 필수적인 측정항목 글에 소개되어 있습니다.

Google Search I/O 2021에서 LCP, FID, CLS를 소개하는 세션이 있었습니다. 한국어 자막도 있으니, 위 영상 보시는 것도 추천드립니다.

Web Vitals가 왜 중요한가

결론부터 말씀드리면, 위에서 말씀드린 LCP, FID, CLS로 구성된 "핵심 성능 보고서"가 2021년 6월부터 구글 검색 랭킹에 사용되기 때문입니다. 로딩 속도가 느린 사이트는 검색 노출이 감소할 위험이 있습니다.

Google 검색에서 사용하는 정보 중 페이지 환경 신호라는 것이 있습니다. (Google의 Google 검색결과의 페이지 환경 이해 도움말) 페이지 환경 신호에 포함되는 내용은 아래와 같이 있습니다.

 

• 핵심 성능 보고서: 위에서 설명한 Core Web Vitals입니다. (LCP, FID, CLS)
• 모바일 친화 여부: 모바일 친화성 테스트 페이지로 확인 가능
• 세이프 브라우징: 보안 문제 보고서를 통해 확인 가능
• HTTPS: 웹 페이지가 https로 제공되어야 합니다.
• 방해가 되는 전면 광고 없음
  

위와 같은 신호는 2021년 6월부터 검색 순위를 매길 때 사용하게 됩니다. 위 5개 사항은 Google Search Console의 페이지 경험 보고서를 통해 확인할 수 있게끔 했습니다. 이 중 "핵심 성능 보고서"를 제외한 나머지 사항은 이미 구글 검색에 반영이 되어 있습니다. "핵심 성능 보고서"의 구글 검색 반영에 대한 정보는 아래 링크에 정리해 두었습니다.

참고: 2021년 6월부터 Google 검색에서 페이지 속도가 검색 순위에 반영될 예정

확인하는 방법

 

블로그 운영자라면 Core Web Vitals 값을 확인하고, 문제가 있으면 수정해야 합니다. 확인하는 방법 두 가지를 소개하겠습니다.

• Google Page Insights: 페이지 단위 조회. 웹 페이지를 어떻게 수정해야 할지 알려줌.
• CrUX 대시보드: 사이트 별도 세부적인 수치를 확인할 수 있음.
  

 

Google PageSpeed Insights

사이트 링크: https://developers.google.com/speed/pagespeed/insights/

모바일, 데스크톱에서 페이지의 성능을 측정하는 보고서입니다. 기술적인 내용은 잘 모르겠지만, 핵심 성능 보고서(Core Web Vitals) 수치를 좋음/보통/나쁨 비율하고 3사분위(75%) 수치를 보여줍니다. 이 수치는 "필드 데이터" 에 나와 있습니다. 핵심 성능 보고서인 FID/LCP/CLS 에다가 First Contentful Paint (FCP) 값도 있는데, 이 값은 화면에 뭐라도 나오는 시점을 의미합니다. 버튼 하나가 나오든, 글자 하나만 나와도 상관 없습니다.

스크롤을 조금 더 내리면 실험실 데이터와 추천이 있습니다. 실험실 데이터는 구글 서버에서 측정한, 페이지 로딩 속도를 측정하는 각종 수치들입니다. 이 수치를 종합에서 위에 나온 "49점"이라는 숫자가 나옵니다. 각종 수치의 의미들은 Google PageSpeed Insights에서 확인해 주세요. 그 밑에는 '추천'과 '진단'이 있는데, 페이지롤 더 빠르게 로딩할 때 도움이 되는 정보들이 있습니다. 이 내용을 참고하셔서 페이지 속도를 올리시면 됩니다.

애드센스 광고가 있는 블로그는 모바일 점수가 높게 나올 수가 없습니다. 광고만 빼면 80점, 90점 나오는 페이지도 광고만 넣으면 50점으로 추락해 버립니다. 기준이 좀 엄격한 것 같기도 하구요. 실험실 데이터보다는 필드 데이터 쪽이 실제 성능을 더 잘 나타냅니다.

모바일 기준으로 스크롤 없이 이미지가 보이는 경우 LCP 시간이 조금 늘어나는 것 같습니다. 이미지 위치를 스크롤해야 볼 수 있는 위치로 조절해 주시면, LCP 시간을 조금 (0.x초 정도) 줄일 수 있습니다.

페이지의 성능, 그리고 어떻게 페이지를 고쳐야 하는지 조언을 해 준다는 장점이 있습니다. 하지만, 필드 데이터 정보를 세세히 확인할 수 없다는 단점이 있습니다.

 

CrUX 대시보드

아실 분들은 아시겠지만 Google Analytics는 Google Marketing Platform에 속해 있습니다. 여기에는 데이터 스튜디오나 태그 관리자 등 유용한 도구가 있습니다. 이 중 데이터 스튜디오는 Google Analytics를 비롯하여 다양한 데이터를 분석하는데 사용할 수 있습니다. 데이터 스튜디오를 이용해 CrUX 대시보드를 만들면, 핵심 성능 보고서(LCP/FID/CLS) 값을 손쉽게 확인할 수 있습니다.

구글의 웹 블로그인 web.dev의 "Using the CrUX Dashborad on Data Studio" 글에서 CrUX 대시보드 만드는 법을 설명해 놓았는데요, 이 글을 바탕으로 한번 만들어 보겠습니다.

Google Analytics가 가입된 구글 계정에 로그인한 뒤, https://g.co/chromeuxdash 에 접속합니다. 그 다음 "USE IT FOR FREE"를 누릅니다. 그렇게 되면 아래와 같은 화면이 나옵니다.

 Enter origin URL에 본인의 블로그 URL을 입력합니다. 저 같은 경우엔 "https://www.jtwish.com"이 되겠네요. 입력칸 밑에 있는, 새 보고서용 보고서 템플릿 사용이 체크되어 있는지 다시 한번 확인합니다. 스크린샷에 짤리긴 했는데, 우측 상단의 연결 버튼을 누릅니다.

만약 위와 같은 화면이 뜨지 않는다면 https://datastudio.google.com/datasources/create/ 에 접속한 뒤 Chrome UX Report를 찾아서 선택하시면 됩니다.

 

그 다음에 새로운 화면이 뜨게 되는데요, 여기서 "보고서 작성" 버튼을 누릅니다. 우측 상단에 있습니다. 그 다음 "보고서 생성" 버튼을 누르면, 새 창이 뜨면서 보고서 편집 창이 뜹니다.

 

 이제 마지막 단계입니다. 우측 상단의 보기 버튼을 누릅니다. 

 

위와 같이 Core Web Vitals, 즉 핵심 성능 보고서 수치들이 나오게 됩니다. 위 화면은 제 블로그의 보고서인데요, CLS 수치를 제외하면 양호한 수준인 것 같습니다. 우측 상단에 있는 Month, Device를 선택해서 원하는 날짜(월 단위)와 장치(모바일/데스크톱)별로도 수치를 확인할 수 있습니다.

 

좌측을 보시면 더 많은 보고서를 확인하실 수 있습니다. 나머지 보고서들은 월별로 수치가 어떻게 변했는지 확인이 가능합니다.

생성된 보고서는 Google 데이터 스튜디오 페이지에 들어가서 "CrUX Dashboard v2"를 찾으시면 됩니다.

Largest Contentful Paint 보고서를 확인해 보았습니다. 2020년 12월부터 21년 2월까지 블로그 속도 개선을 위해 블로그 테마를 변경했었는데요, Good의 비율이 12월의 83%에서 4월의 92%로 는 것 보면 효과가 있었던 것 같습니다.

• [공지] 신규 블로그 스킨 변경했습니다
• [공지] 블로그 테마를 한번 더 변경했습니다
  

데이터는 다음 달의 두 번째 화요일에 업데이트된다곤 하는데, 조금 늦어져서 수요일에 업데이트 되는 경우도 있습니다. 예를 들어 2021년 5월 데이터는 6월 두 번째 화요일인 8일에 나옵니다. 다만 실제로는 9일에 나왔습니다. 시간대 차이도 있고, 조금 늦어질 수도 있어서 그런 것 같네요.

 

CLS 값이 계속 높게 잡히는 것이 고민이긴 하네요. 애드센스의 자동 광고가 원인으로 의심되기는 합니다.

CrUX 대시보드에 재밌는 정보는 더 많습니다. Device Distribution을 보시면 모바일/태블릿/데스크톱의 비율을 볼 수도 있습니다. Connection Distribution을 보시면 2G/3G/4G 사용자 비율도 확인할 수 있구요. 2G/3G/4G 기준은 속도입니다. 따라서 Wi-Fi 같은 것도 4G로 잡히게 됩니다.