홈 › 성능

정적 사이트 로딩 속도 개선 기본

글: beautifulwind · 2026년 10월 29일 · 성능

페이지가 느리면 내용을 읽기도 전에 방문자가 떠납니다. 정적 사이트는 원래 빠른 편이지만, 이미지 한 장이나 외부 스크립트 하나 때문에 쉽게 느려집니다. 큰 비용 없이 효과가 큰 순서대로 개선 방법을 정리했습니다.

먼저 측정하기

감으로 고치면 엉뚱한 곳에 시간을 쓰게 됩니다. Google의 PageSpeed Insights에 주소를 넣거나 Chrome 개발자 도구의 Lighthouse를 실행하면 Core Web Vitals를 중심으로 한 지표를 볼 수 있습니다.

모바일 결과를 기준으로 보세요. 데스크톱에서는 빠른데 모바일에서만 느린 경우가 훨씬 많습니다.

이미지 최적화

대부분의 페이지에서 용량의 가장 큰 비중은 이미지입니다.

• 표시 크기에 맞게 줄입니다. 화면에 700px로 보이는 이미지를 4000px 원본으로 올리면 수 MB를 낭비합니다.
• WebP나 AVIF 형식을 쓰면 같은 화질에서 JPEG나 PNG보다 용량이 크게 줄어드는 경우가 많습니다.
• 화면 아래쪽 이미지는 지연 로딩합니다. <img loading="lazy"> 속성 하나면 됩니다. 단, 첫 화면에 바로 보이는 대표 이미지에는 쓰지 않습니다. LCP가 오히려 늦어집니다.
• 너비와 높이를 지정합니다. width와 height 속성이 있으면 브라우저가 이미지 자리를 미리 잡아 두어 레이아웃이 흔들리지 않습니다.

스크립트 로딩 순서

<head>에 있는 일반 <script src>는 파일을 내려받아 실행할 때까지 화면 그리기를 멈춥니다.

• 페이지 구조를 다루는 내 스크립트는 defer를 붙이거나 </body> 직전에 둡니다. defer 스크립트는 HTML을 다 읽은 뒤 순서대로 실행됩니다.
• 광고나 분석처럼 다른 코드와 순서가 상관없는 외부 스크립트는 async로 불러옵니다.
• 반대로 다크 모드 초기화처럼 첫 화면 전에 반드시 실행되어야 하는 아주 짧은 코드는 <head>에 인라인으로 두는 것이 맞습니다. 모든 스크립트를 미루는 것이 정답은 아닙니다.

웹 폰트

한글 웹 폰트는 글자 수가 많아 파일이 큽니다. 꼭 필요하지 않다면 운영체제 기본 글꼴(system-ui, Apple SD Gothic Neo, Malgun Gothic)만으로도 충분히 깔끔한 화면을 만들 수 있고, 내려받을 파일이 없으니 가장 빠릅니다. 웹 폰트를 쓴다면 필요한 굵기만 불러오고, font-display: swap으로 폰트를 받는 동안에도 글자가 보이게 합니다.

레이아웃 흔들림 줄이기

글을 읽으려는 순간 위쪽에 무언가 끼어들어 본문이 아래로 밀리는 경험은 매우 불쾌합니다. CLS를 줄이려면 나중에 채워지는 영역의 공간을 미리 확보해야 합니다.

• 이미지와 영상에 크기를 지정합니다.
• 광고나 임베드가 들어갈 자리에 min-height를 잡아 둡니다.
• 기존 콘텐츠 위쪽에 요소를 동적으로 삽입하지 않습니다. 알림 배너가 필요하면 화면에 겹쳐 띄우는 방식이 낫습니다.

외부 서비스 관리

댓글, 광고, 분석, 채팅 위젯은 각각 여러 개의 추가 요청을 만듭니다. 하나하나는 편리하지만 쌓이면 페이지를 무겁게 만듭니다.

• 정말 쓰는 서비스인지 주기적으로 점검하고, 쓰지 않는 코드는 제거합니다.
• 댓글처럼 페이지 맨 아래에 있는 위젯은 사용자가 그 근처까지 스크롤했을 때 불러오는 방식도 고려할 만합니다.
• 광고는 본문보다 많아지지 않게 합니다. 속도 문제뿐 아니라 사용자 경험과 사이트 신뢰도에도 직접 영향을 줍니다.

정리

측정 → 가장 큰 원인 하나 개선 → 다시 측정. 이 순서를 반복하는 것이 가장 효율적입니다. 대부분의 정적 사이트는 이미지 크기 조절과 스크립트 로딩 순서만 바로잡아도 '좋음' 범위에 들어옵니다.