순천 홈페이지 속도 — PageSpeed Insights 결과 읽는 법과 고칠 순서
순천 홈페이지 속도는 감으로 판단하지 말고 PageSpeed Insights(pagespeed.web.dev)에 주소를 넣어 휴대전화 탭부터 확인하는 것이 출발점입니다. 결과 화면 위쪽은 실제 방문자 기록(최근 28일), 아래쪽은 Lighthouse가 한 번 돌려 본 실험 결과입니다. 위쪽에서 기준을 넘는지 보고, 아래쪽 진단 항목에서 원인을 찾아 큰 사진 · 글꼴 · 외부 스크립트 순으로 고치면 됩니다. 이 글의 기준 숫자는 Google 공식 문서에서 확인한 것만 옮겼습니다.
- PageSpeed Insights 결과의 위쪽(실제 사용자 환경)은 Chrome 사용자 경험 보고서의 최근 28일 기록이고, 아래쪽(실험실 데이터)은 Lighthouse가 정해진 조건에서 한 번 측정한 값입니다.
- 좋음 기준은 LCP 2.5초 이하, INP 200밀리초 이하, CLS 0.1 이하이며 페이지 로드의 75번째 백분위수로 판단합니다.
- 방문자가 적은 페이지는 사이트 전체(출처) 데이터로 대신 보여 주고, 그마저 모자라면 실제 사용자 데이터가 표시되지 않습니다.
- Lighthouse 13부터 예전 진단 항목이 '인사이트'로 묶였습니다. 이미지 전송, 렌더링 차단, 글꼴 표시, 서드파티가 사장님이 먼저 볼 항목입니다.
- 첫 화면에 보이는 대표 사진은 지연 로드(lazy)하지 말고, 모든 사진에 가로 · 세로 크기를 적어 두는 것이 web.dev 권장입니다.
1속도는 어디서, 어떤 화면으로 재나요?
주소창에 pagespeed.web.dev 를 열고 홈페이지 주소를 넣으면 휴대전화와 데스크톱 탭이 따로 나옵니다. 손님이 휴대폰으로 들어오는 가게라면 휴대전화 탭을 먼저 봅니다. 결과는 두 덩어리로 나뉘는데, 성격이 전혀 다릅니다.
| 구분 | 실제 사용자 환경(필드 데이터) | 실험실 데이터(Lighthouse) |
|---|---|---|
| 어디서 온 숫자인가 | Chrome 사용자 경험 보고서(CrUX)에 쌓인 실제 방문 기록 | 정해진 기기 · 네트워크 조건에서 한 번 불러 본 결과 |
| 기간 | 최근 28일 | 검사 버튼을 누른 그 순간 |
| 쓸모 | 손님이 실제로 겪는 속도 판단 | 원인을 찾는 디버깅 |
| 주의할 점 | 고친 효과가 바로 반영되지 않음 | 누를 때마다 점수가 조금씩 달라질 수 있음 |
2LCP · INP · CLS, 기준 숫자는 어떻게 읽나요?
세 지표는 '가장 큰 사진이나 글 덩어리가 뜨기까지(LCP)', '버튼을 누른 뒤 화면이 반응하기까지(INP)', '보던 화면이 밀리는 정도(CLS)'입니다. PageSpeed Insights 문서는 각 지표를 세 단계로 나눕니다.
| 지표 | 좋음 | 개선 필요 | 나쁨 |
|---|---|---|---|
| LCP | 2.5초 이하 | 2.5~4초 | 4초 초과 |
| INP | 200ms 이하 | 200~500ms | 500ms 초과 |
| CLS | 0.1 이하 | 0.1~0.25 | 0.25 초과 |
| FCP(첫 글자 · 그림) | 1.8초 이하 | 1.8~3초 | 3초 초과 |
판정은 평균이 아니라 75번째 백분위수입니다. 방문 네 번 가운데 세 번이 기준 안에 들어와야 통과로 봅니다. 실험실 쪽은 손님의 터치가 없으므로 INP 대신 TBT(총 차단 시간)를 보여 줍니다.
3'데이터가 부족하다'고 나오면 고장인가요?
고장이 아닙니다. 공식 설명에 따르면 PageSpeed Insights는 그 페이지 하나의 방문 기록이 충분하면 페이지 단위로, 모자라면 사이트 전체(출처) 기록으로 대신 보여 줍니다. 사이트 전체도 모자라면 실제 사용자 환경 칸이 비어 있습니다. 새로 연 홈페이지나 방문이 적은 가게 홈페이지는 흔히 이 경우입니다.
- 이때는 아래쪽 실험실 결과와 진단 항목으로 원인을 찾습니다.
- 공개되어 있고 검색엔진이 읽을 수 있는 페이지여야 기록이 쌓입니다. 로그인해야 보이는 화면은 대상이 아닙니다.
- 고친 뒤 실제 사용자 기록은 28일 기간이 지나면서 서서히 바뀝니다. 다음 날 바로 좋아지지 않았다고 다시 뜯어고치지 않습니다.
4느린 원인은 진단 항목 어디를 보면 찾을 수 있나요?
Chrome 개발자 블로그의 'Lighthouse 13의 새로운 기능'(2025년 10월 10일)은 예전 성능 진단 항목을 인사이트로 묶었다고 알렸습니다. 점수 계산 방식은 그대로이고, 점수에 들어가지 않는 진단 항목만 바뀌었습니다. 화면에 보이는 한글 이름은 버전마다 다를 수 있어 괄호에 영문 id를 함께 적었습니다.
| 인사이트(영문 id) | 예전에 나뉘어 있던 항목 | 가게 홈페이지에서 흔한 모습(일반 요령) |
|---|---|---|
| 이미지 전송(image-delivery-insight) | 최신 이미지 형식 · 이미지 최적화 · 반응형 이미지 | 휴대폰 사진 원본을 줄이지 않고 그대로 올림 |
| 렌더링 차단(render-blocking-insight) | 렌더링 차단 리소스 | 첫 화면보다 먼저 불러오는 스타일 · 스크립트 파일 |
| 글꼴 표시(font-display-insight) | font-display | 웹 글꼴이 늦게 와서 글자가 한참 안 보임 |
| 서드파티(third-parties-insight) | 서드파티 요약 | 지도 · 채팅 · 방문자 분석 위젯을 여러 개 붙여 둠 |
| 레이아웃 이동 원인(cls-culprits-insight) | 레이아웃 이동 | 크기를 적지 않은 사진 · 배너가 뒤늦게 끼어듦 |
5사장님이 먼저 고칠 수 있는 순서는?
- 첫 화면 대표 사진을 줄입니다. 화면에 보이는 크기에 맞춰 줄여서 올립니다(일반 요령). 이 사진이 LCP 대상인 경우가 많습니다.
- 대표 사진은 지연 로드하지 않습니다. web.dev는 페이지가 열릴 때 화면에 보일 가능성이 있는 이미지, 특히 LCP 이미지는 loading="lazy"를 쓰지 말라고 안내합니다. 아래쪽 사진에만 씁니다.
- 모든 사진에 가로 · 세로 크기를 적습니다. web.dev는 모든 img 태그에 width와 height를 넣으라고 권합니다. 크기를 모르는 사진은 늦게 뜨면서 글을 밀어 냅니다.
- 광고 · 삽입 영상 · 늦게 붙는 배너는 자리를 미리 잡아 둡니다. web.dev가 CLS의 흔한 원인으로 꼽는 것이 크기 없는 이미지, 광고 · iframe, 뒤늦게 끼어드는 콘텐츠, 웹 글꼴입니다.
- 안 쓰는 위젯을 뗍니다. 예전에 붙였다가 잊은 채팅 · 분석 코드가 남아 있는지 서드파티 인사이트 목록과 대조합니다(일반 요령).
- 다시 재고 기록합니다. 고치기 전후 결과 화면을 캡처해 두면 28일 뒤 실제 사용자 기록과 비교하기 쉽습니다.
검사 결과가 너무 복잡하게 느껴진다면 무료 SEO 점검에 주소를 남겨 주세요. 속도 외에 HTTPS · 연락처 같은 전반 점검은 성남 리뉴얼 점검표 글도 함께 보시면 됩니다.
6순천 가게라면 어떤 페이지부터 재 볼까요?
순천만국가정원 누리집의 이용시간 안내를 보면 10월~6월은 매표 09:00~19:00, 관람 09:00~20:00이고 매월 마지막 주 월요일이 휴무입니다. 같은 누리집에는 입장권 예매 · 정원해설사 예약 · 반려견놀이터 예약 같은 온라인 예약 메뉴가 따로 있습니다. 정원 근처에서 영업한다면 손님이 휴대폰으로 열어 볼 영업시간 · 오시는 길 · 예약 페이지부터 속도를 재 보는 것이 순서입니다. 첫 화면만 재고 끝내지 말고 이 세 페이지 주소를 하나씩 넣어 봅니다.
순천은 큰길브리지가 직접 방문하는 지역입니다. 사진이 많아 무거운 홈페이지를 어떻게 줄일지 함께 보고 싶다면 순천 페이지를 보시거나 제작 문의에 홈페이지 주소를 남겨 주세요. 방문 또는 전화로 상담합니다.
자주 묻는 질문
PageSpeed Insights 점수가 검사할 때마다 달라요. 고장인가요?
아래쪽 실험실 점수는 누를 때마다 한 번씩 새로 측정한 값이라 조금씩 달라질 수 있습니다. 실제 손님이 겪는 속도는 위쪽 실제 사용자 환경(최근 28일)을 기준으로 봅니다.
점수가 90점이 안 되면 검색에서 불리한가요?
실험실 점수 자체보다 실제 사용자 기록의 LCP · INP · CLS가 기준을 넘는지가 먼저입니다. 공식 문서는 75번째 백분위수에서 세 지표가 모두 좋음이면 통과로 봅니다.
실제 사용자 환경 칸이 비어 있어요.
방문 기록이 부족하면 페이지 대신 사이트 전체 기록을 보여 주고, 그것도 모자라면 표시되지 않습니다. 이때는 실험실 결과와 진단 항목으로 원인을 찾으면 됩니다.
모든 사진에 지연 로드를 걸면 빨라지지 않나요?
첫 화면에 보이는 사진까지 지연 로드하면 오히려 늦어질 수 있습니다. web.dev는 처음 화면에 보일 이미지, 특히 LCP 이미지는 지연 로드하지 말라고 안내합니다.
