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

나눔웹 웹 성능 꿀팁

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
번호 분류 제목 글쓴이
63 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
62 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
61 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
60 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
59 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
58 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
57 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
56 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
55 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
54 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
53 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
52 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
51 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
50 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
49 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
48 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
47 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
46 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
45 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
44 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 3 4 Next
/ 4
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4