들어가며
- 페이지 속도와 모바일 친화성이 왜 랭킹 요소가 되는지 이해한다.
- 무료 도구로 자기 페이지 점수를 확인하고 개선 지점을 찾는다.
좋은 콘텐츠인데 왜 속도까지 신경 써야 하나
19강부터 25강까지는 콘텐츠 자체와 검색엔진에게 발견되게 만드는 방법을 다뤘습니다. 그런데 발견되고 색인까지 됐어도, 페이지를 열었을 때 로딩이 느리거나 모바일 화면에서 글자가 깨져 보이면 방문자는 몇 초 안에 뒤로 가기를 누릅니다. 검색엔진은 이런 이탈 신호와 실제 로딩 속도 데이터를 랭킹에 반영합니다.
이유는 단순합니다. 검색엔진의 목표는 검색한 사람을 만족시키는 것이고, 아무리 내용이 좋아도 열리지 않거나 보기 불편한 페이지는 그 목표에 부합하지 않기 때문입니다. 특히 모바일 검색 비중이 절반을 넘는 경우가 많은 지금은, 모바일 화면에서의 경험이 데스크톱 화면보다 더 중요하게 다뤄집니다.
속도가 늦어지는 대표 원인
- 이미지 용량이 크다: 원본 그대로 올린 고화질 사진 한 장이 페이지 로딩 시간의 절반 이상을 차지하는 경우가 흔합니다.
- 불필요한 스크립트가 많다: 여러 배너·위젯·추적 코드가 겹겹이 쌓이면 페이지가 완전히 표시되기까지 시간이 늘어납니다.
- 서버 응답이 느리다: 저가형 호스팅이나 트래픽이 몰리는 시간대에 서버 자체가 늦게 응답하는 경우입니다.
- 모바일 전용 최적화가 안 되어 있다: 데스크톱 화면을 그대로 축소해 보여주는 구조라 글자가 작거나 버튼 간격이 좁아 누르기 어렵습니다.
무료로 점수를 확인하는 법
직접 코드를 뜯어보지 않아도 무료 도구로 현재 상태를 숫자로 확인할 수 있습니다. 대표적인 도구가 구글의 PageSpeed Insights입니다.
- PageSpeed Insights 페이지에 접속해 확인하고 싶은 페이지 주소를 입력합니다.
- 모바일과 데스크톱 점수가 각각 나옵니다. 모바일 점수를 우선 확인합니다.
- 점수와 함께 "개선할 수 있는 항목" 목록이 나옵니다. 이미지 용량 줄이기, 사용하지 않는 자바스크립트 제거 등 구체적인 항목이 표시됩니다.
- 항목 옆에 걸리는 예상 절감 시간이 함께 표시되므로, 절감 시간이 큰 항목부터 우선 처리합니다.
점수 자체를 100점 만점으로 맞추는 것이 목표는 아닙니다. 점수가 낮게 나온 이유를 구체적으로 확인하고, 개선 가능한 부분(예: 이미지 용량)부터 손대는 것이 현실적입니다. 서버나 플랫폼 구조 자체를 바꿔야 하는 항목은 개발팀 또는 호스팅사와 상의가 필요할 수 있습니다.
모바일 친화성 확인하는 법
모바일에서 실제로 사이트를 열어보는 것이 가장 확실한 확인 방법입니다. 아래 항목을 직접 눌러보며 점검합니다.
- 글자 크기가 확대하지 않고도 읽을 수 있는 크기인가
- 버튼이나 링크 사이 간격이 손가락으로 누르기에 충분한가
- 가로 스크롤이 생기지 않는가(콘텐츠가 화면 폭을 벗어나지 않는가)
- 팝업이 화면 전체를 가려 뒤로 가기 버튼조차 안 보이는 경우는 없는가
우선순위를 정하는 법
PageSpeed Insights 결과와 모바일 직접 확인 결과를 합쳐, 아래 순서로 우선순위를 정하면 됩니다.
| 우선순위 |
기준 |
예시 |
| 1순위 |
절감 시간이 크고 직접 고칠 수 있는 항목 |
이미지 용량 압축, 불필요한 팝업 제거 |
| 2순위 |
절감 시간은 크지만 개발자·호스팅사 상의가 필요한 항목 |
서버 응답 속도 개선 |
| 3순위 |
절감 시간이 작은 항목 |
사소한 스크립트 최적화 |
바로 쓰는 템플릿: 페이지 속도 점검 기록
[페이지 주소]
1. PageSpeed Insights 결과
- 확인일:
- 모바일 점수:
- 데스크톱 점수:
- 개선 제안 항목 상위 3개:
1)
2)
3)
2. 모바일 직접 확인
- 글자 크기 적절한가: (예/아니오)
- 버튼 간격 충분한가: (예/아니오)
- 가로 스크롤 발생하는가: (예/아니오)
- 팝업이 방해되는가: (예/아니오)
3. 우선순위 정리
- 지금 바로 고칠 수 있는 것:
- 개발자·호스팅사 상의가 필요한 것:
즉시 확인
- 검색엔진이 페이지 속도와 모바일 친화성을 랭킹에 반영하는 이유는 무엇인가요?
- PageSpeed Insights 점수가 낮게 나왔을 때 가장 먼저 할 일은 무엇인가요?
- 페이지 속도를 늦추는 대표적인 원인 두 가지를 말해보세요.
정답·해설
- 검색엔진의 목표는 검색한 사람을 만족시키는 것이며, 느리거나 보기 불편한 페이지는 아무리 내용이 좋아도 그 목표에 부합하지 않기 때문입니다.
- 점수 자체를 올리는 데 집중하기보다, 함께 제공되는 개선 제안 항목 중 절감 시간이 큰 것부터 확인해 직접 고칠 수 있는지 판단합니다.
- 이미지 용량이 큰 경우와 불필요한 스크립트·위젯이 많이 쌓여 있는 경우가 대표적입니다.
다음 레슨
27강. 12code 통합분석기로 개선안 도출하기에서 6강에서 진단했던 리포트를 다시 열어, 지금까지 배운 내용을 근거로 구체적인 개선 항목을 뽑는 실습을 진행합니다.
핵심 정리
- 페이지 속도와 모바일 친화성은 방문자 이탈과 직결되어 검색엔진 랭킹에 영향을 줍니다.
- PageSpeed Insights 같은 무료 도구로 점수와 구체적인 개선 제안 항목을 확인할 수 있습니다.
- 절감 시간이 크고 직접 고칠 수 있는 항목(이미지 용량 등)부터 우선 처리하고, 구조적인 항목은 개발자·호스팅사와 상의합니다.
→ 이 강의 퀴즈 풀어보기 (챌린지)
