실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 웹 성능 꿀팁

PageSpeed Insights 점수 보는 법, 실사용자 데이터와 실험실 점수가 다를 때

PageSpeed Insights로 홈페이지 속도를 재 보면 위쪽에는 "통과", 아래쪽 점수는 빨간색으로 나와서 어느 쪽을 믿어야 할지 헷갈리는 경우가 많습니다.
두 영역은 측정 방식이 완전히 다릅니다. 이 글에서는 실사용자 데이터와 실험실 점수의 차이, 그리고 실제로 무엇부터 고쳐야 하는지 정리합니다.

💡 점수가 잴 때마다 바뀌는 건 고장이 아닙니다

고객사에서 "어제는 72점이었는데 오늘은 61점"이라는 문의를 자주 받습니다. 아래쪽 성능 점수는 구글 서버가 그 순간 한 번 불러 본 결과라서 네트워크 상태, 광고나 채팅 스크립트의 응답 속도에 따라 몇 점씩 오르내립니다. 한 번 잰 숫자에 일희일비하기보다 같은 조건으로 서너 번 재서 흐름을 보는 것이 맞습니다.

1. 위쪽: 실제 사용자 경험 (필드 데이터)

상단의 실제 사용자 경험 영역은 크롬 사용자들이 실제로 사이트를 방문하며 쌓인 기록(크롬 사용자 경험 보고서)입니다. 최근 28일 동안의 데이터를 모아, 방문의 75%가 기준을 넘는지로 판단합니다. 구글 서치 콘솔의 코어 웹 바이탈 보고서도 같은 데이터를 씁니다.

지표보는 것좋음 기준
LCP가장 큰 이미지·문구가 뜨는 시간2.5초 이하
INP클릭·터치 후 화면이 반응하는 시간200ms 이하
CLS로딩 중 화면이 밀리는 정도0.1 이하

방문자가 적은 사이트는 이 영역이 "데이터 없음"으로 나옵니다. 정상이며, 이때는 아래쪽 진단 결과를 참고하면 됩니다.

2. 아래쪽: 성능 점수 (실험실 데이터)

0~100점 점수는 라이트하우스(Lighthouse)가 느린 휴대폰과 느린 모바일 회선을 흉내 내서 한 번 측정한 값입니다. 그래서 사무실 PC로 보면 빠른 사이트도 모바일 점수는 낮게 나오는 경우가 흔합니다. 점수는 다섯 가지 지표에 가중치를 둬서 계산합니다.

/* 라이트하우스 성능 점수 가중치 (v10 기준) */
Total Blocking Time       30%
Largest Contentful Paint  25%
Cumulative Layout Shift   25%
First Contentful Paint    10%
Speed Index               10%

비중이 가장 큰 TBT는 자바스크립트가 화면을 붙잡고 있는 시간입니다. 실무에서 점수가 유독 낮은 사이트를 열어 보면 슬라이더, 채팅 상담, 각종 분석 스크립트가 첫 화면에서 한꺼번에 실행되는 경우가 대부분입니다.

3. 무엇부터 고칠까: 우선순위 정하는 법

검색 노출과 직접 연결되는 것은 위쪽 필드 데이터입니다. 위쪽이 "통과"라면 아래 점수를 90점까지 끌어올리려고 무리하게 기능을 빼지 않아도 됩니다. 반대로 위쪽에서 LCP나 INP가 빨간색이라면 실제 방문자가 느리다고 느끼고 있다는 뜻이니 먼저 손봐야 합니다.

고칠 항목은 아래쪽 "진단" 목록에서 찾되, 줄일 수 있는 시간이 크게 표시된 항목부터 보세요. 메인 배너 이미지 용량, 첫 화면에 필요 없는 스크립트 지연 로딩, 이미지 크기 지정 같은 기본기만 정리해도 대부분 체감 속도가 눈에 띄게 달라집니다. 수정 후에는 필드 데이터가 28일 단위로 쌓이니 결과를 확인하기까지 몇 주 여유를 두셔야 합니다.

"점수보다 먼저 봐야 할 것은 실제 방문자가 겪는 속도입니다."

나눔웹은 유지관리 중인 사이트의 속도를 필드 데이터 기준으로 점검하고, 효과가 큰 항목부터 차례로 정리해 드립니다.


List of Articles
번호 분류 제목 글쓴이
» 웹 성능 PageSpeed Insights 점수 보는 법, 실사용자 데이터와 실험실 점수가 다를 때 new 나눔웹
62 UI/UX 404 에러 페이지 만들기, 방문자를 놓치지 않는 구성과 상태 코드 확인법 new 나눔웹
61 퍼블리싱 카드 목록 반응형 정렬, 미디어쿼리 대신 grid auto-fill과 minmax로 new 나눔웹
60 마케팅 구글 검색 사이트 이름이 엉뚱하게 나올 때, WebSite 구조화 데이터로 지정하는 법 나눔웹
59 모바일 모바일 가로 스크롤이 생길 때, 화면 밖으로 튀어나온 요소 찾아 고치는 순서 나눔웹
58 웹 성능 외부 폰트가 늦게 뜰 때, preconnect와 dns-prefetch로 연결 시간 줄이는 법 나눔웹
57 퍼블리싱 모달 팝업 만들기, dialog 태그로 ESC 닫기와 배경 클릭 닫기까지 처리하는 법 나눔웹
56 마케팅 301 리디렉션 설정법, 페이지 주소를 바꿀 때 검색 노출 지키는 순서 나눔웹
55 UI/UX 화면 애니메이션 줄이기 설정, prefers-reduced-motion으로 대응하는 법 나눔웹
54 웹 성능 유튜브 영상 넣었더니 페이지가 느려질 때, iframe 지연 로딩과 썸네일 대체법 나눔웹
53 마케팅 이미지 alt 태그 작성법, 검색 노출과 접근성까지 같이 챙기는 실무 기준 나눔웹
52 모바일 모바일 viewport 설정법, 화면이 작게 보이거나 확대가 막혔을 때 점검할 것 나눔웹
51 퍼블리싱 긴 URL·이메일 줄바꿈이 안 되고 박스를 뚫을 때, overflow-wrap 쓰는 법 나눔웹
50 마케팅 카톡 공유 썸네일이 예전 그대로일 때, OG 캐시 초기화로 바로 바꾸는 법 나눔웹
49 UI/UX 문의 폼 중복 접수 막는 법, 전송 버튼 연타와 새로고침 재전송 정리 나눔웹
48 웹 성능 브라우저 캐시 설정으로 재방문 속도 높이기, .htaccess 작성법 나눔웹
47 퍼블리싱 z-index 올려도 메뉴가 가려질 때, 쌓임 맥락(stacking context) 확인법 나눔웹
46 마케팅 canonical 태그 설정법, 같은 페이지가 주소 여러 개로 검색될 때 정리하는 순서 나눔웹
45 UI/UX 문의 폼 placeholder를 라벨 대신 쓰면 생기는 문제와 label 배치하는 법 나눔웹
44 마케팅 모바일 전화 문의 버튼 만들기, tel: 링크 작성법과 클릭 수 측정하는 법 나눔웹
Board Pagination Prev 1 2 3 4 Next
/ 4
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4