블로그 페이지 속도 느려지는 원인과 개선 순서
페이지가 늦게 뜨면 방문자는 내용을 보기 전에 나갑니다. 속도 문제의 대부분은 이미지와 외부 스크립트에서 생기고, 둘 다 직접 손보실 수 있는 영역입니다. 무엇이 시간을 잡아먹는지 측정한 뒤 순서대로 고치시면 됩니다.
목차
- 왜 속도가 중요한가요?
- 무엇이 시간을 잡아먹나요?
- 무엇부터 측정해야 하나요?
- 이미지를 어떻게 줄이나요?
- 외부 스크립트는 어떻게 하나요?
- 어떤 순서로 하면 되나요?
- 자주 묻는 질문
- 정리
왜 속도가 중요한가요?
기다리는 시간이 길어질수록 사람이 떠나기 때문입니다. 검색 결과에서 눌러 들어온 방문자는 아직 그 글에 대한 기대가 크지 않은 상태여서, 화면이 비어 있는 몇 초를 견디지 않고 뒤로 돌아갑니다.
| 항목 | 무엇에 관여하나 |
|---|---|
| 이탈률 | 느리면 보기 전에 나갑니다 |
| 검색 평가 | 사용자 경험 신호에 포함됩니다 |
| 광고 노출 | 늦게 뜨면 보지 못합니다 |
| 재방문 | 느린 사이트는 다시 오지 않습니다 |
세 번째가 수익과 직결됩니다. 페이지가 늦게 뜨면 방문자가 광고 영역까지 내려오기 전에 이탈하므로, 노출 자체가 발생하지 않습니다.
두 번째를 오해하지 마시기 바랍니다. 속도가 순위를 직접 올려주는 것은 아니고, 다른 조건이 비슷할 때 참고되는 신호에 가깝습니다.
무엇이 시간을 잡아먹나요?
원인이 몇 가지로 좁혀집니다. 대부분 이미지와 외부에서 불러오는 코드에서 발생하며, 나머지는 그 위에 얹히는 요소입니다.
- 이미지 용량 — 가장 큰 비중
- 외부 스크립트 — 광고, 분석, 위젯
- 폰트 — 외부에서 불러오는 글꼴
- 스킨 구조 — 불필요한 코드
첫 번째가 압도적입니다. 사진 한 장이 3MB인데 그런 이미지가 6장 들어 있으면 본문 글자보다 이미지가 수백 배 무겁습니다.
두 번째가 통제하기 어려운 부분입니다. 외부 서버에서 불러오는 코드는 그쪽이 느리면 함께 늦어지므로, 꼭 필요한 것만 남기시는 편이 낫습니다.
무엇부터 측정해야 하나요?
감으로 고치시면 엉뚱한 곳을 손보게 됩니다. 측정 도구가 무엇이 몇 초를 쓰는지 항목별로 알려주므로, 그 순서대로 처리하시면 됩니다.
- 속도 측정 도구 실행 — 주소를 넣습니다
- 모바일과 PC 각각 — 결과가 다릅니다
- 큰 항목부터 확인 — 시간을 많이 쓰는 것
- 개선 제안 목록 — 도구가 함께 제시합니다
- 고친 뒤 재측정 — 변화 확인
두 번째를 빠뜨리지 마시기 바랍니다. 방문자의 다수가 모바일로 들어오는 경우가 많은데, 모바일 점수가 PC보다 훨씬 낮게 나오는 것이 보통입니다.
세 번째가 순서를 정합니다. 0.1초짜리 항목을 열 개 고치는 것보다 3초짜리 하나를 잡는 편이 효과가 큽니다.
이미지를 어떻게 줄이나요?
가장 효과가 큰 작업입니다. 해상도와 형식 두 가지만 손보셔도 전체 용량이 절반 아래로 떨어지는 경우가 많습니다.
- 해상도 조정 — 표시될 크기에 맞춥니다
- 형식 변경 — 사진은 JPG나 WebP로
- 압축 — 화질을 조금 낮춥니다
- 지연 로딩 — 화면에 들어올 때 불러옵니다
첫 번째가 근본 대책입니다. 본문 폭이 800픽셀인데 4,000픽셀짜리 사진을 올리시면 쓰지 않는 픽셀을 내려받는 셈이므로, 올리기 전에 줄이셔야 합니다.
네 번째가 긴 글에서 값을 합니다. 아래쪽 이미지를 처음부터 불러오지 않고 스크롤이 닿을 때 가져오는 방식이라, 첫 화면이 뜨는 시간이 크게 줄어듭니다.
외부 스크립트는 어떻게 하나요?
전부 없앨 수는 없습니다. 광고나 분석 도구는 필요하므로, 개수를 줄이고 불러오는 방식을 조정하는 쪽으로 접근하셔야 합니다.
- 목록 확인 — 지금 무엇이 붙어 있는지
- 안 쓰는 것 제거 — 예전에 넣고 잊은 것
- 비동기 로딩 — 본문 표시를 막지 않게
- 위젯 정리 — 방문자 카운터 등
두 번째에서 의외로 많이 나옵니다. 예전에 시험 삼아 붙였다가 지우지 않은 코드가 남아 매번 외부 서버를 부르는 경우가 흔합니다.
네 번째가 오래된 블로그에서 자주 보입니다. 사이드바에 붙은 위젯들이 각각 외부 요청을 만들므로, 실제로 보는 사람이 없다면 정리하시는 편이 낫습니다.
어떤 순서로 하면 되나요?
효과가 큰 것부터 하시면 적은 품으로 체감이 달라집니다. 아래 순서대로 진행하시면 대체로 앞의 두 단계에서 대부분이 해결됩니다.
- 이미지 정리 — 해상도와 형식
- 안 쓰는 스크립트 제거 — 목록 점검
- 지연 로딩 적용 — 긴 글에 효과
- 폰트 줄이기 — 종류와 굵기 수
- 재측정 — 숫자로 확인
네 번째를 모르고 지나치기 쉽습니다. 글꼴을 여러 종류에 굵기까지 나눠 쓰시면 그만큼 파일을 내려받으므로, 필요한 것만 남기시는 편이 낫습니다.
다섯 번째로 마무리하시기 바랍니다. 고쳤다고 생각했는데 숫자가 그대로인 경우가 있으므로, 반드시 다시 측정해 확인하셔야 합니다.
이미지 형식은 이미지 파일 형식 JPG PNG WebP 골라 쓰는 기준에, 저작권 확인은 저작권 걱정 없는 이미지 구하는 경로 네 가지에 정리했습니다.
검색 쪽은 구글 서치콘솔 색인 요청하고 누락 원인 찾는 법과 구조화 데이터 넣어 검색 결과 풍부하게 만들기를 보시기 바랍니다.
방문자 분석은 블로그 방문자 분석 도구 붙이고 지표 읽는 법에, 수익화는 애드센스 신청 전에 미리 점검하는 항목 총정리에 정리했습니다.
웹 표준 자료는 한국인터넷진흥원에서 보실 수 있습니다.
자주 묻는 질문
속도가 검색 순위를 올려주나요?
직접 올려주지는 않습니다. 다른 조건이 비슷할 때 참고되는 신호에 가깝습니다.
무엇이 가장 무겁나요?
대체로 이미지입니다. 해상도와 형식만 손보셔도 절반 아래로 떨어지는 경우가 많습니다.
모바일과 PC 점수가 다릅니다
정상입니다. 모바일이 더 낮게 나오는 것이 보통이므로 그쪽을 기준으로 보시기 바랍니다.
광고를 빼야 하나요?
뺄 필요는 없습니다. 안 쓰는 스크립트를 정리하고 비동기로 불러오게 조정하시면 됩니다.
고쳤는데 점수가 그대로입니다
큰 항목을 안 건드리셨을 수 있습니다. 측정 결과에서 시간을 많이 쓰는 항목부터 확인하시기 바랍니다.
정리
- 속도는 이탈률과 광고 노출에 직접 관여합니다
- 원인의 대부분은 이미지와 외부 스크립트입니다
- 감이 아니라 측정 도구로 항목을 확인합니다
- 모바일 기준으로 보시는 편이 실제에 가깝습니다
- 이미지는 해상도부터 줄입니다
- 고친 뒤에는 반드시 재측정합니다
다음으로 하실 일은 블로그 글 하나를 열어 이미지 한 장의 용량을 확인하시는 것입니다. 1MB를 넘는다면 그것이 가장 먼저 손볼 자리입니다.
글쓴이 션잇 · IT 전문가. 업무 자동화와 AI 도구를 다룬다
댓글