내 사이트 점검 도구
뭘 고쳐야 할지 감이 안 잡힐 때 무료로 개선 목록을 뽑아 줘요. 크롬 브라우저에 이미 들어 있어서 설치할 것도 결제할 것도 없어요.
쉽게 말하면
위생 점검 나온 사람이 가게를 한 바퀴 돌고 가는 것과 같아요. 그 사람은 물건을 팔아 주지도 않고 손님을 데려오지도 않아요. 대신 나갈 때 종이 한 장을 남겨요. "냉장고 온도계 없음, 손 씻는 곳 비누 없음, 유통기한 표시 흐림." 사장님은 그 종이를 보고 오늘 뭘 살지 정하죠. 라이트하우스가 하는 일이 딱 이거예요. 내 사이트 주소를 넣으면 한 바퀴 돌아보고 고칠 것 목록을 남겨요.
구글이 만들어서 무료로 푼 도구예요. 크롬 브라우저 안에 이미 들어 있고, 별도로 가입하거나 결제할 것이 없어요.
이틀을 썼는데 손님 체감은 그대로일 수 있어요. 원인이 사진이 아니라 다른 데 있었으면 그 이틀은 통째로 헛돈 거예요.
고칠 순서가 정해져요. 위에서부터 세 개만 해도 대부분의 이득을 가져가요. 나머지 아홉 개는 안 해도 되는 날이 많아요.
점수를 매기는 도구라 점수 이야기가 먼저 나오는데, 사장님에게 값이 나가는 건 점수가 아니라 점수 밑에 딸려 나오는 목록이에요. 이 문서의 절반이 그 목록을 읽는 법이에요.
어디서 어떻게 돌리나
돌리는 길이 두 개예요. 둘 다 무료고 결과 화면이 거의 같아요. 컴퓨터 앞이면 첫 번째, 폰이거나 남에게 결과를 보내야 하면 두 번째가 편해요.
- 1크롬으로 내 사이트를 열어요. 연습 주소 말고 손님이 실제로 들어오는 주소예요. 연습용 주소와 진짜 주소가 다르면 결과도 달라져요.
- 2F12 키를 눌러요. 화면 옆이나 아래에 개발자 도구가 열려요. 여기 개발자 도구 설명이 따로 있어요.
- 3Lighthouse 탭을 찾아요. 탭이 안 보이면 탭 줄 오른쪽 끝의 화살표를 눌러 목록에서 골라요.
- 4모바일인지 데스크톱인지 고르고 분석을 눌러요. 손님 대부분이 폰으로 오면 모바일로 재는 게 맞아요. 30초 안팎 걸려요.
- 5결과에서 점수가 아니라 아래 목록을 봐요. 항목마다 "이걸 고치면 얼마나 빨라지는지"가 같이 적혀 있어요.
두 번째 길: 주소만 넣는 웹 화면
구글의 PageSpeed Insights 라는 웹 화면에서도 같은 검사를 돌릴 수 있어요. 내 사이트 주소를 넣고 기다리면 돼요. 결과 화면에 주소가 붙어서 외주 개발자에게 링크로 그대로 보낼 수 있는 것이 장점이에요. 크롬 안에서 돌린 결과는 내 화면에만 남아요.
한 가지만 미리 알아 두세요. 이 검사는 한 번에 한 페이지만 봐요. 첫 화면이 90점이어도 상품 상세 화면은 다를 수 있어요. 손님이 많이 보는 화면 서너 개를 따로 재는 게 맞아요.
네 가지 점수가 각각 무슨 뜻인가
결과 맨 위에 동그란 점수가 네 개 떠요. 네 개가 서로 다른 걸 재고 있어서, 어느 동그라미가 낮은지에 따라 할 일이 완전히 달라져요.
| 동그라미 | 재는 것 | 낮게 나오면 사장님이 잃는 것 |
|---|---|---|
| 성능 | 화면이 뜨는 데 걸리는 시간과 뜨는 도중에 밀리는 정도예요 | 기다리다 나가는 손님이에요. 화면 속도 점수가 이 동그라미의 속살이에요 |
| 접근성 | 글씨 대비, 버튼 이름, 사진 설명 같은 기계가 검사할 수 있는 항목이에요 | 눈이 불편하거나 나이 드신 손님이에요. 누구나 쓸 수 있게 만들기와 이어져요 |
| 권장 사항 | 보안 연결, 낡은 방식 사용 여부 같은 기본기예요 | 주소창에 안전하지 않음이 뜨는 것 같은, 손님이 바로 눈치채는 신뢰 손실이에요 |
| 검색 최적화 | 제목과 설명이 있는지, 검색 로봇이 읽을 수 있는지 같은 기초 위생이에요 | 검색으로 들어올 수 있었던 손님이에요. 다만 여기 만점이 순위를 보장하지는 않아요 |
네 개 중 사장님이 하루 만에 가장 많이 올릴 수 있는 건 접근성과 검색 최적화예요. 사진에 설명 한 줄 붙이기, 화면 제목 채우기처럼 손이 적게 가는 항목이 많거든요.
확인해 보세요
예약 페이지를 재 봤더니 성능은 괜찮은데 접근성 동그라미만 유난히 낮아요. 지금 볼 곳은?
점수 밑 목록을 읽는 법
여기가 이 도구의 진짜 값이에요. 점수 아래에 항목이 죽 나오는데, 항목마다 고치면 몇 초가 줄어드는지가 옆에 붙어 있어요. 위에서부터 큰 것 순서예요.
| 자주 나오는 항목 | 실제로 벌어지고 있는 일 | 사장님이 시킬 말 |
|---|---|---|
| 이미지 크기를 줄이세요 | 폰 화면에 200픽셀로 보이는 사진을 원본 그대로 내려받게 하고 있어요 | "화면에 보이는 크기에 맞춰 사진을 줄여 주세요" 사진 가볍게 만들기 |
| 화면 밖 이미지를 미루세요 | 손님이 스크롤도 안 한 아래쪽 사진까지 처음부터 다 받고 있어요 | "보일 때 부르게 바꿔 주세요" 필요할 때 불러오기 |
| 렌더링 차단 리소스 | 화면을 그리기 전에 먼저 받아야 하는 파일이 많아서 흰 화면이 길어요 | "첫 화면에 필요 없는 건 뒤로 미뤄 주세요" 첫 화면을 막는 것들 |
| 사용하지 않는 코드 | 이 페이지에서 안 쓰는 기능의 코드까지 같이 내려가고 있어요 | "이 화면에 필요한 것만 내려가게 나눠 주세요" 용량 줄이기 |
| 이미지에 대체 텍스트가 없음 | 사진이 무엇인지 적어 둔 글이 비어 있어요 | "사진마다 설명 한 줄을 넣어 주세요" 사진에 설명 붙이기 |
| 배경과 글자 대비가 부족함 | 연한 회색 글씨가 밝은 곳에서 안 읽혀요 | "이 문구 색을 진하게 바꿔 주세요" 색 대비 |
장면 1 · 외주 개발자에게 결과를 보냈더니
“점수는 원래 그 정도 나와요. 신경 안 쓰셔도 됩니다.”
점수만 보내면 이 답이 돌아와요. 사실 틀린 말도 아니에요. 보낼 것은 점수가 아니라 목록 위 세 줄이에요. "이미지 크기 줄이기 2.1초, 화면 밖 이미지 미루기 0.8초, 이 두 개 이번 주에 가능한가요." 숫자가 붙은 항목으로 물으면 대화가 견적으로 넘어가요.
통과 항목도 한 번은 펼쳐 보세요
목록 아래쪽에 이미 통과한 항목이 접혀 있어요. 여기를 한 번 펼쳐 보면 내 사이트가 무엇을 이미 잘하고 있는지 보여요. 새 기능을 붙인 뒤 이 목록에서 뭔가 빠졌다면, 그 기능이 원인일 가능성이 높아요.
잴 때마다 점수가 달라요
이 도구를 처음 쓰는 사장님이 가장 많이 당황하는 지점이에요. 아무것도 안 고쳤는데 다시 재면 점수가 몇 점씩 움직여요. 고장이 아니에요.
| 점수가 흔들린 이유 | 무슨 일이 있었나 | 어떻게 해요 |
|---|---|---|
| 내 컴퓨터가 바빴어요 | 검사는 내 컴퓨터 성능을 빌려 써요. 다른 프로그램이 돌고 있으면 점수가 내려가요 | 무거운 프로그램을 닫고 다시 재요 |
| 브라우저 확장 프로그램 | 설치해 둔 확장이 페이지에 끼어들어서 점수를 갉아먹어요 | 시크릿 창에서 재요. 확장이 안 붙은 상태가 진짜에 가까워요 |
| 모바일로 쟀어요 | 모바일 검사는 일부러 느린 폰과 느린 인터넷을 흉내 내요 | 낮게 나오는 게 정상이에요. 데스크톱 점수와 나란히 비교하지 마세요 |
| 인터넷 상태 | 그 순간 회선이 흔들리면 결과도 흔들려요 | 세 번 재서 가운데 값을 써요. 한 번 잰 숫자로 판단하지 않아요 |
| 실제 손님 숫자와 달라요 | 이건 손님 기록이 아니라 지금 이 자리에서 흉내 낸 시험이에요 | 방향을 보는 데 써요. 진짜 손님 체감은 방문자 통계 쪽에서 봐요 |
점수를 목표로 삼지 마세요
만점을 향해 달리면 손님이 못 느끼는 항목까지 손대게 돼요. 기준은 하나예요. 손님이 기다리다 나가는가. 목록 위쪽 큰 항목 두세 개를 처리하고 나면, 남은 항목은 대개 손님 체감과 상관이 적어요. 그때는 다음 기능을 만드는 게 더 남는 장사예요.
- Q. 만들어지는 중인 사이트도 잴 수 있나요?
- 잴 수 있어요. 다만 내 컴퓨터에서만 도는 주소로 재면 인터넷을 타는 시간이 빠져서 실제보다 좋게 나와요. 판단은 손님이 들어오는 진짜 주소에서 잰 값으로 하세요.
- Q. 점수가 낮으면 검색 순위가 떨어지나요?
- 성능은 검색 순위 요소 중 하나예요. 다만 이 도구의 점수 자체가 순위에 들어가는 건 아니에요. 구글이 보는 건 실제 손님들에게서 모인 기록이고, 이 도구는 그 기록을 미리 짐작해 보는 시험이에요.
- Q. 접근성 점수가 만점이면 법적으로 안전한가요?
- 아니에요. 이 검사는 기계가 판정할 수 있는 항목만 봐요. 키보드만으로 예약이 끝까지 되는지 같은 건 사람이 눌러 봐야 알아요. 만점은 출발선이지 도착선이 아니에요.
- Q. 외주 견적서에 성능 개선이 들어 있어요. 어떻게 검증하나요?
- 작업 전에 한 번 재서 결과를 저장해 두세요. 작업 후에 같은 화면을 같은 조건으로 다시 재면 전후가 숫자로 남아요. 조건이 같아야 뜻이 있어요. 모바일로 쟀으면 뒤에도 모바일로 재요.
- Q. 고칠 항목이 20개나 나왔어요. 다 해야 하나요?
- 안 해도 돼요. 예상 절약 시간이 붙은 항목 위쪽 세 개가 대부분의 이득을 가져가요. 아래쪽 항목은 몇 밀리초짜리도 섞여 있어서, 그걸 하느라 다음 기능을 못 만드는 게 더 큰 손해예요.
오늘 할 일 한 가지
직접 해보기
내 화면 세 개를 재고 목록만 저장해 두세요
만들어 둔 사이트를 열고, 손님이 가장 많이 보는 화면 세 개를 각각 한 번씩 재 보세요. 오늘은 아무것도 안 고쳐도 돼요. 결과에서 위 세 줄만 메모장에 옮겨 두면 그게 다음 주 작업 목록이 되고, 나중에 좋아졌는지 대볼 기준선이 돼요.
만든 사이트 열어 보기더 깊이 (안 읽어도 괜찮아요)
이 검사가 실제로 하는 일 · 주소를 열고 끝나는 게 아니라, 일부러 느린 환경을 흉내 내서 페이지를 다시 불러와요. 모바일 검사는 요즘 나오는 폰보다 느린 기기와 좁은 회선을 가정해요. 그래서 좋은 컴퓨터에서 재도 모바일 점수가 낮게 나오는 거예요. 이 흉내가 있어서 시골 카페의 느린 와이파이에서 열리는 모습을 사무실 책상에서 미리 볼 수 있어요.
시험 결과와 진짜 손님 기록의 차이 · 이 도구가 내는 건 지금 이 자리에서 한 번 재 본 시험 성적이에요. 구글이 검색 순위에 쓰는 건 실제 손님들의 브라우저에서 모인 기록이라 성격이 달라요. 시험 성적은 즉시 나오고 원인을 짚어 주지만, 손님 기록은 몇 주가 지나야 쌓여요. 원인은 시험에서 찾고 개선 여부는 손님 기록에서 확인한다가 순서예요.
비유가 어디서 어긋나나 · 위생 점검원 비유는 여기까지가 맞아요. 어긋나는 지점이 둘 있어요. 하나, 점검원은 가게 전체를 보지만 이 도구는 띄운 한 페이지만 봐요. 둘, 점검원은 통과와 불통과를 가르지만 이 도구의 점수는 여러 항목을 섞어 낸 합산이라 한 항목을 크게 고치면 다른 항목이 그대로여도 점수가 확 뛰어요. 그래서 점수보다 항목 목록을 보라고 하는 거예요.
언제 다시 재나 · 매일 잴 필요는 없어요. 다시 잴 만한 순간은 세 가지예요. 사진이나 영상이 많은 화면을 새로 붙였을 때, 외부 도구(상담 위젯, 통계 스크립트 같은 것)를 하나 더 심었을 때, 그리고 손님이 느리다고 말했을 때예요. 특히 두 번째가 조용해요. 코드는 한 줄인데 무게는 그 도구 전체가 들어와요.
이것만 기억하세요
- ·크롬에 이미 들어 있는 무료 도구예요. F12를 누르고 Lighthouse 탭에서 돌려요
- ·동그란 점수 네 개는 성능, 접근성, 권장 사항, 검색 최적화로 서로 다른 걸 재요
- ·값이 나가는 건 점수가 아니라 밑에 딸린 목록이에요. 예상 절약 시간이 붙은 위 세 줄만 하면 대부분의 이득을 가져가요
- ·잴 때마다 몇 점씩 흔들려요. 시크릿 창에서 세 번 재고 가운데 값을 쓰세요
- ·외주에게는 점수 말고 항목 세 줄을 보내세요. 그때부터 대화가 견적으로 넘어가요