모바일에서 홈페이지가 느린 이유와 실제로 효과 있었던 개선 방법

홈페이지가 늦게 뜨면 방문자는 기다려 주지 않습니다. 특히 휴대폰은 PC보다 통신과 처리 속도가 느려 차이가 크게 납니다. 코드블루 홈페이지도 구글 PageSpeed Insights로 모바일 성능을 측정하면서 여러 번 고쳤는데, 그 과정에서 효과가 컸던 것들을 실제 수치와 함께 공유합니다.

1. 한글 웹폰트: 가장 무거운 파일일 수 있습니다

한글 폰트는 1만 개가 넘는 글자를 담고 있어 파일이 큽니다. 코드블루 홈페이지에 쓰는 Pretendard 가변 폰트 원본은 약 2MB(2,057,688바이트)로, 측정해 보니 페이지에서 가장 무거운 단일 파일이었습니다. 사이트에 실제로 쓰인 글자만 골라 담는 '서브셋'으로 바꾸자 200KB 아래(이 글을 쓰는 시점 약 190KB)로, 90% 넘게 줄었습니다. 새 문구를 추가할 때마다 서브셋을 다시 만들어야 하고 글자가 늘면 파일도 조금씩 커지는 번거로움은 있지만, 개선 작업 중 효과가 가장 컸습니다.

2. 이미지: 크기와 형식만 바꿔도 크게 줄어듭니다

• 실제로 보이는 크기에 맞춰 내려받기: 화면에 55px로 보이는 로고를 750px짜리로 받고 있던 것을 고치자, 로고 한 장에서만 불필요한 전송이 약 14.8KiB 줄었습니다
• WebP 같은 최신 형식 쓰기: 포트폴리오 화면 캡처(1760×880)를 WebP로 저장하면 수십 KB 수준으로 충분합니다
• 화면 아래쪽 이미지는 나중에 불러오기(지연 로딩)

3. 3D·애니메이션은 핵심 내용이 뜬 뒤에

화려한 3D 모델이나 큰 애니메이션 라이브러리를 페이지가 열리자마자 불러오면, 정작 중요한 제목과 버튼이 늦게 나타납니다. 코드블루 홈페이지에 3D 모델을 쓰던 시기에는 측정 결과 3D 관련 파일이 제목을 그리는 데 필요한 폰트와 동시에 내려받아지며 속도를 갉아먹고 있었습니다. 브라우저가 한가해진 뒤에 3D를 불러오도록 순서만 바꿔서 해결했습니다.

4. 첫 화면 제목은 처음부터 보이게

제목이 투명한 상태에서 서서히 나타나는 효과는 보기에는 좋지만, 브라우저 입장에서는 '가장 큰 내용이 늦게 그려진' 것이 되어 속도 점수(LCP)가 나빠집니다. 첫 화면의 핵심 제목은 처음부터 보이게 두고, 움직임은 위치를 살짝 옮기는 정도로만 주는 편이 안전합니다.

5. 속도와 화려함 사이의 균형

속도만 생각하면 아무 효과도 없는 사이트가 가장 빠릅니다. 하지만 업체의 분위기를 전하는 데 움직임이 도움이 되는 경우도 많습니다. 중요한 것은 순서입니다. 핵심 문구와 문의 버튼이 먼저 뜨고, 장식은 그 뒤에 따라오게 하면 둘 다 챙길 수 있습니다.

내 홈페이지가 휴대폰에서 느리게 느껴진다면 무료 진단에서 무엇이 무거운지 같이 확인해 드립니다.