코어 웹 바이탈

사이트가 느리다는 말로는 아무것도 고치지 못합니다. 느리다는 기준이 사람마다 다르고, 만든 사람의 컴퓨터에서는 대개 빠릅니다. 사무실 인터넷과 새 노트북에서 1초에 뜨는 화면이 지하철에서 3년 된 휴대폰으로는 4초가 걸립니다.

이 차이가 돈으로 드러나는 자리가 광고입니다. 클릭당 값을 치르고 사람을 데려왔는데 화면이 뜨기 전에 나가 버리면 광고비는 이미 나간 상태입니다. 열 명을 데려와 넷이 그렇게 빠져나가면 실제로 만나는 사람은 여섯 명인데 값은 열 명분입니다.

검색 순위를 정하는 재료로 이 값이 쓰이게 되면서 화면 속도가 개발팀의 관심사에서 마케팅의 일로 넘어왔습니다. 코어 웹 바이탈은 그 속도를 누구나 같은 방식으로 재도록 세 숫자로 못 박은 것입니다.

세 가지를 따로 재고, 셋 다 기준을 넘겨야 통과입니다.

1. LCP는 화면에서 가장 큰 콘텐츠가 그려지기까지 걸린 시간입니다. 2.5초 이하를 좋은 값으로 봅니다. 대개 가장 큰 것은 첫 화면의 이미지나 제목입니다.
2. INP는 사용자가 무언가를 누른 뒤 화면이 반응하기까지 걸린 시간입니다. 200밀리초 이하가 기준입니다.
3. CLS는 이미 그려진 요소가 갑자기 밀리는 정도입니다. 0.1 이하로 둡니다. 늦게 도착한 이미지나 광고가 위에 끼어들어 누르려던 버튼이 아래로 밀리는 일이 여기서 잡힙니다.

값을 고르는 방식이 중요합니다. 평균이 아니라 실제 사용자에게서 걷은 값의 75번째 백분위를 씁니다. 100명 가운데 75명이 그보다 좋은 경험을 했다는 뜻입니다. 평균을 쓰면 빠른 기기에서 나온 값이 느린 기기의 값을 가려서, 넷이 4초를 겪고 있어도 숫자가 멀쩡해 보입니다.

측정 자리도 둘로 갈립니다. 내 컴퓨터에서 도구를 돌려 얻은 값과 실제 방문자 기기에서 걷은 값이 다르고, 판정에 쓰이는 것은 뒤쪽입니다. 그래서 고친 뒤에도 숫자가 움직이는 데 몇 주가 걸립니다. 앞쪽은 고칠 곳을 찾는 데, 뒤쪽은 나아졌는지 확인하는 데 씁니다.

"LCP가 4.1초예요. 광고 랜딩 페이지부터 고치죠."

돈을 써서 데려온 사람이 가장 먼저 닿는 화면을 먼저 손대자는 제안입니다.

"제 컴퓨터에서는 1.2초인데 현장 값은 3.8초입니다."

측정 자리가 달라 판정이 갈린다는 뜻입니다.

"이미지 크기만 줄여도 LCP가 1초 내려갑니다."

가장 큰 콘텐츠가 이미지일 때 가장 싸게 고칠 수 있는 자리라는 말입니다.

페이지덱에서 현우가 광고를 늘리기 전에 이 값을 먼저 봤습니다. 랜딩 페이지의 LCP가 4.1초였고, 첫 화면 이미지가 원본 그대로 실려 있었습니다.

태오가 이미지를 화면 크기에 맞게 줄이고 글꼴 내려받는 순서를 바꿔 LCP를 2.3초로 내렸습니다. 현장 값이 따라 내려온 것은 3주 뒤였습니다.