화면 속도 점수
구글이 보내는 속도 경고의 기준이에요. 실제 손님 브라우저에서 잰 세 가지 숫자로, 속도가 검색 순위와 이탈률에 직접 붙어요.
쉽게 말하면
손님이 가게 문을 밀고 들어온 뒤의 3초를 생각해 보세요. 구글은 그 3초를 세 군데서 봐요. 진열대에 물건이 다 놓여서 무슨 가게인지 알아보기까지 걸린 시간, 집으려는 순간 매대가 옆으로 밀려서 엉뚱한 걸 잡게 되는 일, 계산대에서 카드를 내밀었는데 점원이 멍하니 있는 시간이에요. 이 세 가지에 붙인 이름이 화면 속도 점수예요.
이 세 가지를 묶어 부르는 정식 이름이 코어 웹 바이탈이에요. 구글이 정한 기준이고, 서치 콘솔이라는 무료 도구에서 내 사이트 점수를 볼 수 있어요.
빠른 화면 만들기가 "왜 빨라야 하나"를 다룬다면, 이 문서는 "남이 매긴 점수를 어떻게 읽나"를 다뤄요. 점수가 낮다고 사이트가 고장 난 건 아니에요. 다만 손님이 기다려 주지 않는다는 뜻이에요.
속도만으로 순위가 뒤집히지는 않아요
구글은 화면 경험을 순위에 쓴다고 밝히면서, 동시에 좋은 내용을 이기지는 못한다고도 말해요. 즉 내용이 비슷한 두 페이지가 있을 때 속도가 갈라요. 속도를 고쳐서 없던 손님이 생기는 게 아니라, 들어왔다가 나가던 손님이 남는 거예요.
세 가지가 각각 재는 것
이름은 영어 약자라 낯설지만, 재는 것은 셋 다 손님이 몸으로 겪는 일이에요. 오른쪽 칸의 합격선은 구글이 공개한 값이에요.
| 점수 이름 | 손님에게는 이렇게 보여요 | 구글이 말하는 합격선 | 낮을 때 흔한 원인 |
|---|---|---|---|
| LCP | 화면에서 가장 큰 덩어리(대개 첫 사진이나 큰 제목)가 뜨기까지 걸린 시간이에요 | 2.5초 이하 | 원본 크기 그대로 올린 사진, 느린 서버 응답 |
| INP | 버튼을 눌렀을 때 화면이 반응하기까지 걸린 시간이에요 | 200밀리초 이하 | 누르는 순간 무거운 계산이 돌아 화면이 붙잡혀 있는 것 |
| CLS | 읽는 중에 글과 버튼이 아래로 툭 밀리는 정도예요. 시간이 아니라 밀린 양이에요 | 0.1 이하 | 크기를 안 정해 둔 사진, 뒤늦게 뜨는 배너와 동의 창 |
| FID | 첫 클릭에 반응하기까지의 시간이던 옛 지표예요 | 2024년 3월에 INP로 교체됐어요 | 옛 글에 아직 이 이름이 나와서 헷갈릴 수 있어요 |
셋 중 하나만 빨간색이어도 통과가 아니에요
구글은 한 주소를 좋음으로 셀 때 세 가지를 모두 합격선 안에서 봐요. 그래서 사진을 줄여 LCP를 잡아 놓고도 경고가 안 사라지는 일이 생겨요. 남은 하나가 대개 CLS예요. 밀림은 사진 용량과 상관이 없어요.
이 숫자는 어디서 오나
점검 버튼을 눌러서 나오는 숫자가 아니에요. 내 사이트에 실제로 들어온 크롬 손님들의 브라우저가 잰 값이에요. 그래서 내 폰에서 아무리 빨라도 점수는 나쁠 수 있어요.
- 1손님이 크롬으로 내 페이지를 열어요. 그 브라우저가 세 숫자를 조용히 재요.
- 2구글이 그 값을 28일치로 모아요. 어제 고쳤다고 오늘 점수가 바뀌지 않는 이유예요.
- 3평균이 아니라 상위 75퍼센트 지점을 봐요. 손님 4명 중 3명이 겪은 시간이 기준이에요. 느린 한 명을 무시하지 않겠다는 뜻이에요.
- 4서치 콘솔에 좋음·개선 필요·나쁨으로 묶여서 떠요. 주소 하나씩이 아니라 비슷한 화면끼리 묶여 나와요.
- 5손님이 적으면 아예 안 떠요. 잰 사람이 부족하면 데이터 부족으로 비어 있어요. 점수가 안 보이는 게 고장은 아니에요.
확인해 보세요
오늘 사진을 전부 줄여서 올렸어요. 내일 서치 콘솔 점수는 어떻게 될까요?
헷갈리기 쉬운 것 두 가지
첫째는 점검 도구 점수와 이 점수가 같다는 오해예요. 둘은 다른 것을 재요. 점검 도구는 지금 한 번 열어 본 결과이고, 화면 속도 점수는 지난 28일 손님들이 겪은 결과예요.
고칠 거리를 찾을 때 값이 나가요. 다만 이 점수가 90점이어도 서치 콘솔에는 개선 필요가 떠 있을 수 있어요.
느린 통신망과 낡은 폰까지 섞여 있어요. 내 폰에서 빠른데 여기가 나쁘면, 내 폰이 좋은 폰인 거예요.
둘째는 CLS를 속도로 아는 오해예요. CLS는 시간이 아니라 밀린 양이에요. 사이트가 아무리 빨라도 사진 자리를 미리 비워 두지 않으면 점수가 나빠요. 이건 서버를 좋은 걸로 바꿔도 안 고쳐져요.
점수를 깎는 흔한 원인
원인은 대개 다섯 개 안에 있어요. 왼쪽이 사장님이 실제로 하는 일이고, 가운데가 그때 깎이는 점수예요.
| 내가 한 일 | 깎이는 점수 | 손볼 방향 |
|---|---|---|
| 폰으로 찍은 사진을 그대로 올렸어요 | LCP | 화면에 보이는 크기로 줄여서 올려요. 사진 가볍게 만들기가 이 이야기예요 |
| 첫 화면 아래쪽 사진까지 한꺼번에 불러요 | LCP | 보일 때 부르게 미뤄요. 필요할 때 불러오기 |
| 쿠키 동의 창이나 상단 배너가 뒤늦게 떠요 | CLS | 뜰 자리를 처음부터 비워 둬요. 나중에 끼어들면 아래 내용이 밀려요 |
| 글씨체를 웹폰트로 바꿨어요 | CLS | 폰트가 늦게 오면 글자가 한 번 갈아입으면서 줄이 밀려요. 대체 글씨체를 비슷한 크기로 지정해요 |
| 채팅 위젯과 통계 도구를 여러 개 붙였어요 | INP | 누를 때마다 뒤에서 계산이 돌아 반응이 늦어요. 안 쓰는 것부터 떼요 |
장면 · 외주 개발자가 점검 결과를 보내며 말했다
“페이지스피드 돌려 보니 성능 92점이에요. 속도는 문제없습니다.”
물어야 할 건 하나예요. "서치 콘솔의 화면 속도 점수도 좋음인가요." 점검 도구는 조건이 좋은 상태로 한 번 연 결과라 실제 손님 값과 자주 갈라져요. 특히 CLS는 손님이 스크롤하고 배너가 뜨는 실제 상황에서만 드러나요. 92점과 경고가 같이 있는 상태는 흔해요.
경고를 받았을 때 순서
- 1어느 화면이 나쁜지부터 봐요. 서치 콘솔은 비슷한 화면을 묶어 보여줘요. 상품 상세가 나쁜지 첫 화면이 나쁜지에 따라 고칠 곳이 달라요.
- 2세 가지 중 무엇이 걸렸는지 확인해요. LCP면 사진과 서버, CLS면 자리 비우기, INP면 붙여 둔 도구예요. 셋의 처방이 서로 겹치지 않아요.
- 3가장 무거운 사진 하나부터 줄여요. 대개 첫 화면의 큰 사진 한 장이 LCP를 혼자 정해요. 전부 손대기 전에 그 한 장을 먼저 봐요.
- 4고친 뒤 점검 도구로 재서 방향만 확인해요. 숫자가 내려갔으면 맞게 간 거예요.
- 5서치 콘솔은 몇 주 뒤에 다시 열어요. 28일치가 새 값으로 채워질 때까지 기다리는 구간이에요. 이때 조급해서 여기저기 더 건드리면 무엇이 효과였는지 못 가려요.
직접 해보기
지금 만드는 화면에 이 한 줄을 붙여 보세요
만드는 중이라면 고치는 것보다 처음부터 막는 게 싸요. 스튜디오에서 작업 중인 것이 있으면 이 문장을 그대로 보내 보세요. "사진과 배너에 자리를 미리 잡아 두고, 첫 화면 사진은 보이는 크기로 줄여 주세요. 화면이 뜬 뒤에 내용이 아래로 밀리지 않게 해 주세요." 밀림은 나중에 잡기가 가장 귀찮은 항목이에요.
스튜디오에서 적어 보기자주 묻는 것
- Q. 점수가 나쁘면 검색에서 밀려나나요?
- 그렇게 단순하지 않아요. 화면 경험은 순위 신호 중 하나이고, 구글은 내용이 먼저라고 말해요. 비슷한 페이지들 사이에서 갈리는 정도로 보면 돼요. 다만 검색과 별개로 이탈률에는 바로 붙어요. 느린 화면은 손님이 그냥 뒤로 눌러요.
- Q. 서치 콘솔에 점수가 아예 안 떠요. 뭘 잘못한 건가요?
- 대개 손님이 아직 적어서예요. 값을 잴 방문이 부족하면 데이터 부족으로 비어 있어요. 이때는 점검 도구로 한 번씩 재면서 큰 사진과 밀림만 잡아 두면 충분해요.
- Q. 휴대폰과 컴퓨터 점수가 따로 나오는데 어느 쪽을 봐야 하나요?
- 휴대폰 쪽을 먼저 봐요. 손님 대부분이 폰으로 들어오고, 통신망과 기기 성능 때문에 폰 점수가 늘 더 나빠요. 컴퓨터만 좋음인 상태는 사실상 통과가 아니에요.
- Q. 동영상이나 지도를 넣으면 점수가 나빠지나요?
- 넣는 방식에 달렸어요. 처음부터 통째로 불러오면 LCP와 INP가 같이 나빠져요. 대신 자리만 잡아 두고 손님이 누를 때 불러오면 점수를 크게 지킬 수 있어요.
- Q. 이 점수를 올리려고 디자인을 덜어내야 하나요?
- 그럴 필요 없어요. 세 지표가 벌주는 건 화려함이 아니라 준비 없이 나중에 끼어드는 것이에요. 자리를 미리 잡고 크기를 정해 두면 사진이 많아도 좋음이 나와요.
하나 더
사이트는 빠른데 CLS만 계속 나빠요. 가장 먼저 볼 곳은?
더 깊이 (안 읽어도 괜찮아요)
왜 평균이 아니라 상위 75퍼센트인가 · 평균을 쓰면 빠른 손님 여럿이 느린 손님 몇을 가려 버려요. 4명 중 3명이 겪은 시간을 기준으로 삼으면, 낡은 폰과 느린 통신망으로 들어온 손님이 숫자에 남아요. 그래서 내 최신 폰에서 재는 값은 이 점수와 자주 어긋나요. 점수를 못 믿겠다는 느낌이 들 때는 대개 내 기기가 손님 평균보다 좋은 거예요.
가장 큰 덩어리가 무엇이냐가 LCP를 정한다 · LCP는 화면에서 눈에 가장 크게 보이는 요소 하나를 골라 그게 뜬 시각을 재요. 배경 사진일 때도 있고 큰 제목 글자일 때도 있어요. 그래서 사진을 열 장 줄이는 것보다 그 한 장을 찾아 줄이는 것이 훨씬 효과가 커요. 점검 도구가 어느 요소를 골랐는지 알려 주니, 손대기 전에 그 이름부터 확인해요.
INP가 FID를 대신하게 된 이유 · 옛 지표는 첫 클릭 하나만 봤어요. 그래서 첫인상은 좋은데 장바구니에서 계속 버벅이는 사이트가 합격으로 나왔어요. INP는 손님이 머무는 동안의 모든 누름을 보고 그중 나쁜 쪽을 대표값으로 삼아요. 붙여 둔 도구가 많은 사이트에서 점수가 갑자기 나빠졌다면 이 교체 때문일 수 있어요.
이것만 기억하세요
- ·화면 속도 점수는 세 가지예요. 크게 뜨는 시간(LCP), 눌렀을 때 반응(INP), 화면이 밀리는 양(CLS)이에요
- ·합격선은 2.5초, 200밀리초, 0.1이고 셋을 모두 넘겨야 좋음으로 세어져요
- ·이 숫자는 실제 손님 브라우저가 잰 28일치라, 오늘 고쳐도 점수는 몇 주 뒤에 움직여요
- ·점검 도구 점수와 다른 것이에요. 90점을 받고도 경고가 떠 있을 수 있어요
- ·가장 싸게 버는 두 가지는 첫 화면 큰 사진 한 장 줄이기와 배너 자리 미리 잡아 두기예요