홈페이지 속도 개선, 운영자가 직접 할 수 있는 6가지 방법
홈페이지 속도 개선은 PageSpeed Insights로 현재 상태를 측정한 뒤 이미지 용량, 쓰지 않는 기능, 외부 삽입 콘텐츠처럼 운영자가 직접 손댈 수 있는 부분부터 줄이면 됩니다. 이 글에서는 측정 기준과 운영자가 할 수 있는 6가지, 업체에 맡길 일을 나눠 정리했습니다.
홈페이지 속도는 무엇으로 재나요
홈페이지가 느리면 방문자는 내용을 보기 전에 기다려야 하고, 특히 휴대폰 데이터 환경에서는 그 차이가 더 크게 느껴집니다. 속도를 감으로 판단하면 개선했는지 알 수 없으므로, 같은 도구로 같은 페이지를 재서 숫자로 비교하는 것이 출발점입니다.
Google은 사용자 경험을 보는 핵심 지표로 Core Web Vitals 세 가지를 안내합니다. 아래 표는 세 지표가 각각 무엇을 측정하는지와 "좋음"으로 보는 기준을 비교한 것입니다.
| 지표 | 측정하는 것 | 좋음 기준 |
|---|---|---|
| LCP(최대 콘텐츠풀 페인트) | 첫 화면의 가장 큰 내용이 보이기까지 걸리는 시간 | 2.5초 이내 |
| INP(다음 페인트와의 상호작용) | 클릭·입력 뒤 화면이 반응하기까지 걸리는 시간 | 200밀리초 이하 |
| CLS(누적 레이아웃 이동) | 읽는 도중 화면 요소가 밀리는 정도 | 0.1 이하 |
같은 문서는 모바일과 데스크톱을 따로 보고, 전체 방문의 75번째 백분위수에서 세 지표가 모두 기준을 넘어야 통과로 본다고 설명합니다. 그림은 이 세 지표와 기준을 한 장으로 정리한 것입니다.
PageSpeed Insights 결과 읽는 법
PageSpeed Insights 안내에 따르면 결과는 두 종류입니다. 실제 사용자 데이터는 Chrome 사용자 환경 보고서(CrUX)의 지난 28일 기록이고, 실험실 데이터는 Lighthouse가 정해진 기기와 네트워크 조건에서 페이지를 한 번 불러 본 결과입니다. 실험실 성능 점수는 90점 이상이 좋음, 50~89점이 개선 필요, 50점 미만이 좋지 않음입니다. 점수는 측정할 때마다 조금씩 달라질 수 있으므로 여러 번 재서 흐름을 보는 것이 좋습니다.
운영자가 직접 할 수 있는 6가지
코드나 서버를 건드리지 않아도 관리자 화면에서 할 수 있는 일이 꽤 많습니다. 느린 원인이 운영 중에 쌓인 콘텐츠인 경우가 흔하기 때문입니다.
- 이미지 크기와 용량 줄이기: 카메라 원본을 그대로 올리지 말고 보이는 크기에 맞게 줄이고 압축합니다. 방법은 홈페이지 이미지 용량 줄이는 3단계에 정리했습니다.
- 첫 화면 슬라이드와 배경 영상 줄이기: 큰 사진 여러 장이 돌아가는 슬라이드나 자동 재생 영상은 첫 화면을 무겁게 만듭니다. 꼭 필요한 한 장으로 바꿀 수 있는지 검토합니다.
- 쓰지 않는 플러그인·위젯 정리: 예전 이벤트용 팝업, 더 이상 쓰지 않는 채팅 위젯이나 추적 코드가 남아 있으면 페이지마다 불러옵니다.
- 외부 삽입 콘텐츠는 필요한 페이지에만: 지도, 동영상, SNS 피드는 외부 서버에서 내용을 불러오므로 모든 페이지에 넣지 않고 꼭 필요한 페이지에만 둡니다.
- 웹폰트 종류와 굵기 줄이기: 글꼴 종류와 굵기가 늘어날수록 내려받을 파일이 많아집니다. 실제로 쓰는 굵기만 남기도록 업체에 요청할 수 있습니다.
- 대용량 첨부파일은 링크로: 큰 PDF나 영상을 본문에 바로 띄우기보다 내려받기 링크로 제공하면 페이지가 가벼워집니다.
홈페이지 속도 점검 순서
위 작업을 한꺼번에 하기보다 측정과 조치를 번갈아 하면 무엇이 효과가 있었는지 알 수 있습니다. 아래 순서와 그림은 운영자가 한 달에 한 번 정도 반복하기 좋은 흐름입니다.
- 첫 화면과 방문이 많은 페이지 두세 개를 정해 모바일 기준 점수를 기록합니다.
- 진단 항목에서 크기가 큰 이미지나 오래 걸리는 요소를 확인합니다.
- 운영자가 할 수 있는 조치를 한 가지씩 적용합니다.
- 같은 페이지를 다시 측정해 이전 기록과 비교합니다.
- 남은 문제는 진단 화면을 캡처해 제작·관리 업체에 전달합니다.
업체나 호스팅에 맡겨야 하는 일
서버 응답 시간, 캐시와 압축 설정, 코드 정리, 이미지를 자동으로 여러 크기로 만드는 기능처럼 서버나 소스 코드를 바꿔야 하는 일은 제작·관리 업체의 몫입니다. 진단 결과를 그대로 전달하면 업체가 원인을 좁히기 쉽습니다.
방문자가 늘었는데 서버 응답 자체가 느리다면 호스팅 사양을 함께 검토해야 할 수 있습니다. 호스팅 종류와 고르는 기준은 웹호스팅 선택 기준을 참고하세요.
속도 개선에서 자주 하는 실수
- 100점을 목표로 삼아 꼭 필요한 기능까지 지운다.
- 한 번만 측정하고 결과를 단정한다.
- 사무실 PC에서만 확인하고 휴대폰 환경은 보지 않는다.
- 여러 조치를 한꺼번에 해서 무엇이 효과였는지 모른다.
점수는 개선 방향을 찾는 도구일 뿐, 방문자가 내용을 빨리 보고 불편 없이 쓰는 것이 목표라는 점을 기억하면 균형을 잡기 쉽습니다.
디코랩이 돕는 방식
디코랩은 홈페이지 제작과 함께 운영 중인 사이트의 유지보수·개선, 웹 기술 컨설팅을 합니다. 운영 중인 사이트가 느리다면 측정 결과와 함께 유지보수 접수 게시판에 비밀글로 개선 요청을 남길 수 있습니다. 제작·관리 범위는 디코랩 서비스 소개에서 확인할 수 있습니다.
자주 묻는 질문
PageSpeed Insights 점수가 잴 때마다 달라요.
실험실 점수는 측정 시점의 네트워크와 서버 상태에 영향을 받습니다. 같은 페이지를 여러 번 재서 평균적인 흐름을 보고, 조치 전후를 같은 방식으로 비교하세요.
90점을 넘지 못하면 문제가 있는 건가요?
90점 이상은 좋음 구간이지만 점수 자체가 목표는 아닙니다. 실제 사용자 데이터의 세 지표가 기준 안에 있는지, 휴대폰에서 첫 화면이 빨리 보이는지를 함께 보세요.
속도를 확인하는 데 비용이 드나요?
PageSpeed Insights는 웹 브라우저에서 주소를 입력해 바로 쓸 수 있습니다. Search Console에도 실제 사용자 데이터를 바탕으로 한 Core Web Vitals 보고서가 있습니다.
호스팅만 바꾸면 빨라지나요?
서버 응답이 원인이라면 효과가 있지만, 무거운 이미지나 외부 삽입 콘텐츠가 원인이라면 서버를 바꿔도 크게 달라지지 않습니다. 진단 결과로 원인을 먼저 확인하는 것이 순서입니다.
운영 중인 홈페이지의 속도 원인을 함께 찾고 싶다면 사이트 주소와 측정 결과를 적어 디코랩 프로젝트 문의로 보내 주세요.
댓글0
댓글 작성 권한이 없습니다