홈페이지가 느릴 때 확인하는 순서

홈페이지가 느릴 때 원인은 대개 이미지·서체·불러오는 도구 셋 중 하나입니다. 다만 손대기 전에 「어디가 느린가」를 먼저 갈라야 합니다. 흰 화면이 오래 가는 것과 그림만 늦게 뜨는 것은 원인이 완전히 다릅니다. 아래 순서대로 가면 30분 안에 무엇이 무거운지 숫자로 나옵니다.

어떤 느림인지부터 가릅니다

화면을 보면서 느려지는 지점을 적습니다. 「느립니다」 한 줄로는 아무도 손을 못 댑니다. 흰 화면이 몇 초인지, 그림이 언제 나타나는지를 초 단위로 세어 둡니다.

증상	대체로 이런 원인	먼저 볼 곳
흰 화면이 오래 간다	첫 문서가 늦게 옵니다	서버 응답 시간
글자는 떴는데 그림이 늦다	이미지 용량과 장수	첫 화면 이미지 파일
글자가 늦게 나타나거나 모양이 바뀐다	서체 파일이 늦게 옵니다	올려 둔 서체 개수
다 뜬 뒤에도 스크롤이 버벅인다	움직이는 요소나 자동재생 영상	첫 화면의 동영상
특정 페이지만 느리다	그 페이지에만 있는 요소	그 페이지의 이미지·표
나만 느리다	회선이나 브라우저에 남은 것	다른 기기·다른 회선

맨 아래 줄부터 지웁니다. 휴대폰 데이터로 한 번, 다른 사람 기기에서 한 번 열어 봅니다. 거기서 빠르면 사이트가 아니라 보는 쪽 문제이므로 더 파고들 필요가 없습니다.

혼자서 어디까지 확인할 수 있나요

브라우저에 들어 있는 개발자 도구만으로 무엇이 무거운지 다 보입니다. 페이지에서 마우스 오른쪽 버튼을 눌러 검사를 고르면 열립니다. 네트워크 탭을 열고 새로고침하면 파일이 하나씩 오는 목록이 뜹니다.

목록을 용량이 큰 순서로 정렬합니다. 맨 위 다섯 개가 그 페이지를 느리게 만드는 것들입니다. 대개 이미지 두세 장과 서체 파일이 올라와 있습니다. 아래 값은 대체로 무리가 없는 선이고, 회선과 화면에 따라 달라지므로 남과 비교하기보다 자기 사이트의 지난 값과 비교하는 편이 낫습니다.

확인 항목	대체로 무리 없는 값	넘으면 볼 것
페이지 하나의 총 용량	2~3MB 안쪽	가장 큰 파일 5개
이미지 한 장	300~500KB 안쪽	원본을 줄이지 않고 올렸는지
불러오는 파일 개수	50~80개 안쪽	붙여 둔 외부 도구 수
첫 문서가 오는 시간	1초 안쪽	서버 사양과 요금제
첫 화면이 보이는 시간	2~3초 안쪽	첫 화면 이미지와 서체

재는 페이지는 네 개면 충분합니다. 첫 화면 · 목록 · 상세 · 문의입니다. 페이지마다 들어 있는 것이 달라 느린 이유도 다릅니다. 네 개 값을 적어 두면 어느 쪽이 유난히 무거운지 한눈에 보입니다.

원인은 어떤 순서로 좁히나요

흔한 순서대로 놓았습니다. 위 세 줄에서 대부분 끝납니다.

원인	확인 방법	고치는 법
이미지 원본을 그대로 올림	한 장이 1MB 를 넘습니다	보이는 폭의 2배로 줄여 다시 내보냅니다
화면 밖 이미지까지 처음에 다 부름	스크롤하지 않아도 모든 이미지가 목록에 뜹니다	내려갈 때 불러오도록 지연 로딩을 켭니다
서체 파일이 많음	서체 파일이 네 개 이상 옵니다	굵기를 2~3개로 줄이고 쓰는 글자만 남깁니다
외부 도구를 여러 개 붙임	다른 주소에서 오는 파일이 여럿입니다	안 쓰는 것을 빼고 나머지는 나중에 부릅니다
첫 화면에 자동재생 영상	영상 파일이 수 MB 로 잡힙니다	정지 이미지로 바꾸거나 길이를 줄입니다
서버 응답이 늦음	이미지 없이도 첫 문서가 1초를 넘습니다	캐시를 켜고 요금제와 지역을 확인합니다
설치한 기능이 쌓임	쓰지 않는 기능이 목록에 남아 있습니다	하나씩 끄면서 다시 재 봅니다

지연 로딩 — 화면에 보이는 것부터 먼저 부르고 아래 것은 내려갈 때 부르는 방식입니다. 대부분의 자체몰 만드는 도구에 설정 항목으로 들어 있습니다.

이미지를 다시 내보낼 때는 형식도 함께 봅니다. 사진이 대부분이면 JPG, 글자와 단색 면이 많으면 PNG 가 무난하고, WEBP 로 저장하면 같은 화질에서 용량이 더 줄어듭니다. 다만 아주 오래된 기기에서 안 열릴 수 있으니, 올리는 도구가 형식을 자동으로 갈아 주는지 한 번 확인합니다.

고친 뒤에는 무엇으로 확인하나요

재는 조건을 고정하지 않으면 좋아졌는지 알 수 없습니다. 같은 기기·같은 회선·같은 페이지에서, 브라우저에 남은 것을 비운 상태로 3번 재서 가운데 값을 씁니다.

하나 고칠 때마다 재지 말고 이미지면 이미지끼리 묶어 고친 뒤 한 번 잽니다. 아래 네 칸을 표에 남기면 다음 사람이 같은 자리를 다시 파지 않습니다.

고친 날	바꾼 것	총 용량	첫 화면 시간
3월 4일	첫 화면 이미지 3장 다시 내보냄	4.2MB → 1.8MB	4.1초 → 2.4초
3월 11일	안 쓰는 외부 도구 2개 제거	1.8MB → 1.6MB	2.4초 → 2.0초

위 숫자는 표를 어떻게 채우는지 보이려고 가정해 적은 값입니다. 자기 사이트의 실제 값으로 채우면 됩니다.

다시 느려지지 않게 하려면

느려지는 것은 대개 한 번에 오지 않고 조금씩 쌓입니다. 올릴 때 지키는 규칙 세 줄이면 됩니다.

• 이미지는 올리기 전에 폭을 맞추고 한 장 500KB 안쪽으로 내보냅니다
• 도구를 하나 붙이면 안 쓰는 것 하나를 뺍니다
• 한 달에 한 번 첫 화면 총 용량을 재서 표에 적습니다

세 줄을 홈페이지 관리 문서 첫 장에 적어 둡니다. 담당자가 바뀌어도 같은 기준으로 올리게 됩니다. 행사 배너나 팝업처럼 잠깐 쓰는 것은 내리는 날짜도 함께 적어 두면 쌓이지 않습니다.

오늘 할 일

첫 화면을 열고 개발자 도구의 네트워크 탭에서 용량 큰 순으로 정렬합니다. 맨 위 3개의 이름과 용량을 적고, 그중 이미지가 있으면 폭을 맞춰 다시 내보내 올립니다. 여기까지가 30분이고 대개 첫 화면 시간이 눈에 띄게 줄어듭니다.