홈페이지 속도 개선, 전문직 사이트가 느린 이유 4가지

결론부터 말씀드립니다.

전문직 홈페이지가 느린 이유는 대부분 네 가지 중 하나입니다. 압축하지 않은 큰 이미지, 하나둘 붙여 넣은 외부 스크립트, 기능을 다 싣고 다니는 빌더 구조, 그리고 여러 벌의 웹폰트입니다. 휴대폰으로 들어온 방문자는 화면이 뜨기 전에 뒤로 가기를 누릅니다. 속도는 디자인 취향이 아니라 상담 문의 앞에 놓인 문턱입니다.

홈페이지 속도 개선

Q. 이미지가 왜 가장 흔한 원인인가요?

원장님이나 대표님 프로필, 시설 사진을 카메라 원본 그대로 올리는 경우가 많기 때문입니다.

원본 사진은 화면에 보이는 크기보다 몇 배 큽니다. 휴대폰은 그걸 다 내려받은 뒤에야 화면을 그립니다.

점검 순서입니다.

메인 화면 첫 이미지의 파일 크기를 확인합니다.
화면 너비에 맞는 크기로 줄여 다시 올립니다.
가능하면 WebP 같은 가벼운 형식으로 바꿉니다.
화면 아래쪽 이미지는 스크롤할 때 불러오도록 설정합니다.

메인 화면 맨 위에 큰 슬라이드 배너를 여러 장 돌리는 구성도 흔한 원인입니다. 첫 장만 보이는데 다섯 장을 모두 내려받는 경우가 많기 때문입니다. 배너가 꼭 필요하다면 한 장으로 줄이는 것만으로도 첫 화면이 가벼워집니다.

Q. 외부 스크립트는 무엇을 말하나요?

채팅 상담 창, 방문자 분석 도구, 광고 추적 코드, 지도, 영상 같은 것들입니다.

하나씩 보면 가볍지만 몇 년 운영하다 보면 쓰지 않는 코드까지 그대로 남습니다. 예를 들어 예전에 잠깐 쓰던 광고 추적 코드가 아직 모든 페이지에서 실행되고 있다면, 방문자는 아무 이득 없이 기다리는 셈입니다.

정리 방법은 단순합니다.

현재 붙어 있는 외부 코드 목록을 받습니다.
지금 실제로 쓰는 것만 남깁니다.
지도와 영상은 클릭할 때 불러오도록 바꿉니다.

외부 코드를 붙일 때는 누가, 언제, 왜 붙였는지 기록해 두십시오. 이 기록이 있어야 나중에 정리할 때 지워도 되는 코드를 가려낼 수 있습니다.

Q. 빌더로 만든 사이트는 왜 느려지나요?

빌더는 누구나 쓸 수 있도록 기능을 넉넉하게 싣고 있습니다. 쓰지 않는 기능의 코드까지 페이지마다 함께 불러오는 구조가 흔합니다.

빌더가 나쁘다는 뜻은 아닙니다. 다만 화면을 꾸밀수록 무거워지고, 구조 자체를 손대기 어렵다는 한계가 있습니다. 맞춤 개발은 필요한 기능만 넣고 페이지를 미리 만들어 두는 방식이라 같은 화면이어도 가볍게 만들 수 있습니다.

두 방식의 차이는 홈페이지 제작, 아임웹·카페24·워드프레스 vs 맞춤 개발에 비교해 두었습니다.

Q. 웹폰트는 얼마나 영향을 주나요?

생각보다 큽니다. 한글 폰트는 글자 수가 많아 파일이 무겁습니다.

굵기별로 서너 벌을 불러오고, 제목용 폰트를 따로 하나 더 쓰면 첫 화면이 늦게 뜹니다. 글자가 한참 비어 있다가 갑자기 나타나는 현상도 여기서 생깁니다.

정리 기준입니다.

실제로 쓰는 굵기만 남깁니다.
쓰지 않는 폰트 파일은 지웁니다.
폰트가 오기 전에도 기본 글꼴로 글자가 보이게 설정합니다.

속도 점검은 사무실 와이파이보다 휴대폰 데이터 환경에서 해 보시는 편이 정확합니다. 방문자 상당수가 이동 중에 휴대폰으로 들어오기 때문입니다.

이 네 가지를 정리한 뒤 구글 PageSpeed Insights로 모바일 결과를 다시 확인하시면 됩니다.

FAQ

Q. 속도 점수는 몇 점이면 충분한가요?

A. 점수는 측정할 때마다 조금씩 흔들립니다. 숫자 하나보다 휴대폰에서 첫 화면이 바로 보이는지, 버튼이 바로 눌리는지를 함께 보시는 편이 정확합니다.

Q. 속도가 검색 순위에도 영향을 주나요?

A. 구글은 페이지 경험을 평가 요소의 하나로 공개하고 있습니다. 다만 순위보다 먼저 이탈하는 방문자를 줄이는 쪽의 의미가 큽니다.

Q. 기존 사이트를 고칠지 새로 만들지는 어떻게 정하나요?

A. 이미지와 스크립트 정리로 해결되면 고쳐 쓰시면 됩니다. 구조 자체가 무거워 손댈 수 없다면 그때 새로 만드는 쪽을 검토하십시오.

지금 홈페이지가 느린 이유가 궁금하시면 주소를 온마연구소로 보내 주십시오. 네 가지 중 어디에 걸려 있는지 먼저 짚어 드리겠습니다.