적은 예산으로 페이지 속도 개선하기: 가장 중요한 최적화

가장 중요한 최적화

Core Web Vitals 컨설턴트로 일하면서 페이지 속도 개선과 관련해 다양한 요청을 받습니다. 물론 예산이 넉넉하지 않은 경우도 있습니다. 이럴 때는 시간을 훨씬 더 효율적으로 써야 합니다. 공수는 적게 들고 효과는 확실해서, Core Web Vitals를 실제로 개선하는 최적화만 진행해야 합니다.

최종 검토: Arjen Karel (2026년 3월)

수치만 봐도 분명합니다. 2025 Web Almanac에 따르면 모바일 오리진 중 세 가지 Core Web Vitals 기준을 모두 통과한 곳은 48%에 불과합니다. 모바일 페이지 용량 중앙값은 2.6 MB이며, 이 중 JavaScript가 632 KB를 차지합니다(251 KB는 전혀 사용되지 않는 코드입니다). 큰 예산을 들이지 않고도 충분히 해결할 수 있는 문제입니다.

Core Web Vitals TIP: 제 On-Call Consultancy는 전문가의 도움을 가장 합리적인 비용으로 받는 방법입니다. 2시간 세션(300유로)을 예약하시면 Core Web Vitals 문제를 진단하고, 가장 시급한 문제를 해결한 뒤, 남은 작업에 대한 명확한 전략을 제시해 드립니다. 상담 전에 미리 준비하므로 시간을 낭비하지 않습니다.

세션 예약하기!

1. 문제부터 파악하세요

적은 예산으로 웹 성능을 최적화할 때는 최대한 효율적으로 작업해야 합니다. 그러려면 진짜 문제가 무엇인지부터 알아야 합니다.

무료 도구인 PageSpeed Insights를 사용해 CrUX 데이터를 조회할 수 있습니다. Google이 실제로 활용하는 데이터 소스는 CrUX뿐이므로, 중요한 것은 오직 CrUX 데이터뿐입니다.

CrUX 점수 아래에는 Lighthouse 감사 결과가 표시됩니다.

Lighthouse 감사에 대해 분명히 짚고 넘어가겠습니다. 지금 단계에서는 Lighthouse를 신경 쓸 필요가 없습니다. 왜일까요? Core Web Vitals를 측정하는 도구가 아니기 때문입니다. 물론 Lighthouse는 훌륭한 테스트 도구이고 제안 사항을 자유롭게 살펴보는 것도 좋습니다. 하지만 예산이 한정된 상황에서 중요한 것은 Core Web Vitals 통과입니다. 지금 당장은 synthetic 테스트 통과에 매달릴 때가 아닙니다!

다시 CrUX 데이터로 돌아와서, 예산이 한정되어 있다면 다음 가이드라인을 따르세요. 반드시 이 순서대로 Core Web Vitals를 점검하고 다음 문제부터 해결하세요!

• Time to First Byte가 기준 미달이라면 이것부터 먼저 해결하세요!
• First Contentful Paint가 기준 미달이라면 render blocking 리소스를 해결하세요(스크립트 지연 로드 및 스타일 최적화).
• Largest Contentful Paint가 기준 미달이라면 해당 LCP에 필요한 리소스의 우선순위를 지정하세요(폰트나 이미지 등).
• CLS가 기준 미달이라면 모든 이미지에 width와 height를 추가하고, CSS transition을 찾아 제거하며, 늦게 렌더링되는 요소(광고, 상품 필터 등)의 공간을 미리 확보하세요.
• Interaction to Next Paint가 기준 미달이라면 잘못된 타이밍에 JavaScript를 너무 많이 실행하고 있을 가능성이 큽니다. 불필요한 스크립트와 플러그인을 제거하고, CoreDash 같은 RUM 도구를 사용해 가장 느린 스크립트를 찾아내세요.

2. 이미지를 최적화하세요

2025 Web Almanac에 따르면 모바일 페이지 용량 중앙값에서 이미지가 911 KB를 차지합니다. 전체 페이지 용량의 3분의 1이 넘는 수치입니다. 게다가 동일한 품질에서 WebP를 쓰면 용량을 더 줄일 수 있는데도 LCP 이미지의 57%는 여전히 JPG로 제공됩니다. 예산이 적다면 이미지 최적화야말로 최소한의 노력으로 가장 큰 효과를 내는 방법입니다.

무료로 이미지를 WebP로 변환하세요

이미지를 WebP처럼 더 빠르고 현대적인 최신 포맷으로 변환해 주는 무료 도구, 솔루션, 플러그인은 많습니다. 예를 들어 WordPress를 사용한다면 훌륭한 무료 플러그인인 WebP Express를 추천합니다.

lazy loading을 적용하세요

lazy loading은 이미지가 표시되는 viewport에 가까워질 때까지 로드하지 않도록 브라우저에 신호를 보냅니다. 한 페이지에 이미지가 15개 있고 첫 화면에 보이는 이미지가 3개뿐이라면, viewport 밖에 있는 이미지에 안심하고 loading="lazy"를 추가해도 됩니다.

해결 방법은 두 가지입니다. 첫째는 CMS에서 lazy loading을 활성화하는 것입니다. 이렇게 하면 모든 이미지에 lazy loading이 적용됩니다. 그런 다음 관련 문서를 참고하여 첫 화면에 바로 보이는 중요한 이미지에서는 lazy loading을 제외하세요. 둘째는 스크롤해야 보이는(below-the-fold) 이미지에 직접 loading="lazy"를 추가하는 방법입니다. 자세한 방법은 화면 밖 이미지를 지연 로드하는 방법을 확인하세요.

<img loading="lazy" src="image.jpg" width="800" height="600">

이미지에 fetchpriority를 설정하세요

이미지 태그에 fetchpriority="high"를 추가하면 브라우저에 이 이미지가 다른 이미지보다 중요하므로 먼저 다운로드해야 한다는 신호를 보냅니다. 이미지 preload나 103 Early Hints 같은 더 나은 방법도 있지만, fetchpriority 설정은 간단하고 빠르며 효과적입니다! 페이지에서 가장 중요한 이미지를 찾은 뒤, 템플릿을 열어 해당 이미지에 fetchpriority="high"를 추가하기만 하면 됩니다.

<img fetchpriority="high" src="image.jpg" width="800" height="600">

3. 브라우저 캐싱 설정을 바로잡으세요

저가형 호스팅을 사용하고 있다면 웹 서버가 최적으로 설정되어 있지 않을 가능성이 큽니다. 현장에서 자주 마주치는 문제 중 하나가 바로 잘못 구성된 브라우저 캐싱입니다. 적절한 캐시 헤더가 없으면 재방문자가 동일한 이미지, 스크립트, 스타일시트를 매번 다시 다운로드하게 됩니다. 대역폭 낭비이자 시간 낭비입니다.

Apache 웹 서버를 사용 중이라면 웹사이트 루트 디렉터리에 .htaccess 파일을 만들고 다음 코드를 추가하세요.

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|js|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

.htaccess 파일을 편집하는 김에 GZIP 압축도 함께 활성화하세요. 텍스트 기반 리소스(HTML, CSS, JavaScript)를 브라우저로 전송하기 전에 압축해 주는 기능입니다. 대부분의 사이트에서 전송 크기를 60~80% 줄일 수 있습니다.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
</IfModule>

NGINX 같은 다른 웹 서버를 사용 중이라면 호스팅 업체에 문의하여 이 글의 내용을 적용해 달라고 요청하세요!

4. Cloudflare 도입을 고려하세요 (무료 플랜도 효과적입니다)

Cloudflare는 무료 플랜에서도 핵심적인 성능 기능을 다양하게 제공합니다. 저가형 호스팅을 쓰고 있다면 DNS를 Cloudflare로 전환하는 것만으로도 최소한의 노력으로 가장 큰 성능 개선 효과를 볼 수 있습니다. 자세한 설정 방법은 Cloudflare 설정 완벽 가이드를 참고하세요.

무료 플랜에서 제공하는 기능

1. 빠른 DNS. Cloudflare의 DNS 서버는 무료이며, 저가형 호스팅 업체의 DNS 서버보다 대체로 성능이 뛰어납니다. 2025 Web Almanac의 CrUX 데이터에 따르면 모바일 오리진 중 양호한 TTFB를 기록한 곳은 44%에 불과합니다. 느린 DNS가 주요 원인인 경우가 많은데, Cloudflare로 전환하면 이 문제가 즉시 해결됩니다.
2. HTTP/3 및 Brotli. Cloudflare는 최신 프로토콜과 가장 빠른 압축 방식을 사용합니다. 복잡하게 설명할 필요 없이, 네트워크 속도가 최소 10%는 빨라집니다.
3. 일관된 브라우저 캐싱. Cloudflare는 정적 리소스 캐싱 처리가 매우 탁월합니다. 기본 설정만으로도 현재 웹 서버 설정보다 훨씬 나은 성능을 냅니다.
4. 정적 리소스 Edge 캐싱. Cloudflare는 이미지, 스크립트, CSS 파일 같은 정적 리소스를 캐싱하여 엣지 네트워크에서 최종 사용자에게 직접 전송합니다. 오리진 서버까지 왕복(round trip)할 필요가 없어집니다.
5. Rocket Loader. Rocket Loader는 스크립트 로드를 지연시키고 이 과정에서 발생하는 복잡한 문제를 알아서 처리합니다. 다소 투박한 방식이지만, 스크립트를 직접 지연 처리하기 어려운 환경이라면 Largest Contentful Paint 같은 페인트 지표를 개선하는 데 도움이 됩니다. 참고: Rocket Loader는 지원 중단된 브라우저 API를 사용하므로 PageSpeed Insights에서 경고가 발생할 수 있습니다. 경고가 나타난다면 스크립트를 직접 지연 처리하는 방식을 고려하세요.

Pro 플랜에서 제공하는 기능

무료 Cloudflare 플랜을 쓰는 고객을 볼 때마다 제가 가장 먼저 건네는 조언은 "Pro 플랜으로 업그레이드하세요!"입니다. 더 빠른 사이트를 위해 월 25달러 정도를 투자할 여유가 있다면 충분히 고려해 볼 가치가 있습니다.

1. 모든 무료 기능 포함. 당연히 Pro 플랜에는 모든 무료 기능이 기본으로 포함됩니다.
2. WordPress용 Cloudflare APO. WordPress용 APO는 로그인하지 않은 방문자의 페이지를 엣지 네트워크에 캐싱하는 완벽한 솔루션입니다. Time to First Byte를 획기적으로 단축할 수 있습니다.
3. 무손실 및 손실 이미지 최적화. Cloudflare Pro 버전을 사용하는 주된 이유 중 하나는 이미지 최적화 기능입니다. Cloudflare는 이미지를 WebP 포맷으로 변환해 캐싱한 뒤, 해당 포맷을 지원하는 방문자에게만 전송합니다.

5. 가능한 한 자체 호스팅하세요

정적 리소스를 자체 호스팅(self-host)하는 것도 간단하면서 효과적인 최적화 방법입니다. 수많은 사이트가 정적 리소스를 외부 CDN에서 불러오고 있습니다. 예를 들어 jQuery는 https://code.jquery.com/에서, Bootstrap은 https://cdn.jsdelivr.net에서, 폰트는 https://fonts.googleapis.com에서 호스팅하는 식입니다. 왜 그렇게 하는지는 충분히 이해합니다. 이러한 CDN은 간편하고 빠른 것처럼 보이지만, 실제로는 사이트를 느려지게 만드는 잘못된 선택입니다.

이러한 파일에 공용 CDN을 사용하는 방식은 브라우저가 여러 웹사이트 간에 캐시 파일을 공유할 수 있었던 시절에나 통했던 개념입니다. 그 시절은 이미 지났습니다. 이제 신규 방문자는 정적 파일을 매번 새로 다운로드해야 하며, 파일마다 새로운 서버와 새 연결을 맺어야 합니다. 새로운 서버마다 연결을 새로 생성하는 과정에서 상당한 시간이 소요됩니다.

해결책은 해당 서드파티 파일을 자체 호스팅하는 것입니다. 방법은 간단합니다. 파일을 다운로드하여 본인 서버에 올린 뒤, 파일 참조 경로를 변경하기만 하면 됩니다. 폰트에 관한 구체적인 방법은 Google Fonts 자체 호스팅 가이드를 참고하세요.

6. 스크립트 실행을 지연시키세요

페이지 <head>에 위치한 블로킹 스크립트는 심각한 병목을 유발할 수 있습니다. 이런 스크립트로 인해 페이지 로딩이 최대 20초까지 지연되기도 합니다! 2025 Web Almanac에 따르면 모바일 페이지 중 render blocking 리소스 감사를 통과한 곳은 15%에 불과했습니다. 이 문제가 얼마나 널리 퍼져 있는지 명확히 보여줍니다.

스크립트 실행을 지연시키는 작업은 전혀 어렵지 않습니다. script 태그에 defer만 추가하면 끝납니다. 가능하다면 반드시 적용하세요! 템플릿을 열고 다음과 같이 스크립트를 수정하면 됩니다.

<!-- 기존 블로킹 스크립트 태그 -->
<script src="script.js"></script>

<!-- defer를 적용한 새 스크립트 태그 -->
<script defer src="script.js"></script>

하지만 주의할 점이 있습니다! script 태그에 defer를 추가하면 온갖 문제와 의존성 오류가 발생할 수 있습니다. 예산이 한정되어 있다면 이런 문제가 발생했을 때 해결해 줄 JavaScript 전문가를 고용할 여유도 없을 것입니다. 그러니 먼저 스크립트에 defer를 적용해 보고 오류가 발생하는지 확인하세요(Chrome에서 Ctrl+Shift+I를 누르고 콘솔 탭을 확인하세요). 테스트 후 아무런 문제가 없다면 정말 운이 좋은 편입니다! 문제가 발생한다면 다음 해결책 중 하나를 활용해야 합니다. 전체적인 내용은 JavaScript를 지연 처리하는 16가지 방법을 참고하세요.

Rocket Loader를 활용하세요

앞서 설명했듯이 Cloudflare 무료 버전에서도 Rocket Loader를 사용할 수 있습니다. Rocket Loader는 페이지의 모든 스크립트 로드를 지연시킵니다. 결코 완벽한 방식은 아니지만, 대부분의 경우 꽤 훌륭하게 작동합니다.

플러그인을 활용하세요

대부분의 CMS 기반 사이트는 방대한 플러그인 저장소를 갖추고 있습니다. JavaScript 실행을 지연시키고 스크립트 지연 로드로 인해 발생할 수 있는 복잡한 문제를 알아서 해결해 주는 플러그인이 많이 나와 있습니다.

7. 폰트를 최적화하세요

웹 폰트는 예산이 적은 사이트에서 간과하기 쉬운 성능 저하 요인입니다. 2025 Web Almanac에 따르면 웹 페이지 중앙값 기준으로 122 KB의 폰트 파일을 로드합니다. Google Fonts에서 폰트를 불러오면 첫 방문마다 불필요한 DNS 조회와 TCP 연결이 추가로 발생합니다.

무료로 적용할 수 있는 두 가지 해결책:

1. 폰트를 자체 호스팅하세요. 폰트 파일을 직접 다운로드하여 자체 서버에 올린 뒤 해당 위치에서 로드하세요. 이렇게 하면 fonts.googleapis.com 및 fonts.gstatic.com으로 연결하는 오버헤드를 없앨 수 있습니다.
2. font-display: swap을 추가하세요. 웹 폰트를 다운로드하는 동안 브라우저가 fallback 폰트로 텍스트를 즉시 표시하도록 지시하는 설정입니다. 방문자가 콘텐츠를 더 빨리 볼 수 있고 텍스트가 보이지 않는 현상도 방지할 수 있습니다. 자세한 전략은 웹 폰트 로드 중 텍스트가 보이지 않는 문제 해결 방법을 확인하세요.

8. 캐싱, 캐싱, 캐싱

예산이 한정되어 호스팅에 많은 비용을 쓸 수 없다면, 캐싱은 웹사이트 속도를 높이는 가장 효과적인 방법 중 하나입니다. 특히 높은 Time to First Byte를 낮추는 데 캐싱이 매우 효과적입니다. 캐싱은 다양한 계층에서 적용할 수 있습니다.

클라이언트 측 캐시: 브라우저가 가능한 한 많은 정적 리소스를 캐싱하도록 웹 서버를 설정하세요. 서버 부하를 줄일 수 있습니다. (3단원의 .htaccess 예제를 참고하세요.)

오브젝트 캐시: 복잡한 데이터베이스 쿼리 결과처럼 다시 생성하는 데 연산 비용이 많이 드는 데이터를 저장할 때 사용합니다. 호스팅 업체에 Redis나 Memcached 설치를 요청하세요.

전체 페이지 캐시: CMS를 사용하고 있다면 사이트에 전체 페이지 캐시를 적용하는 것이 좋습니다. WordPress의 경우 WP Fastest Cache나 WP Core Web Vitals가 좋은 선택지입니다.

9. 호스팅을 전략적으로 선택하세요

호스팅은 여러 업체를 꼼꼼히 비교해 볼 가치가 있으며, 가장 비싼 호스팅이 반드시 가장 빠른 것은 아닙니다. 보통은 사용 중인 CMS에 최적화된 호스팅 플랜을 선택해야 합니다. 모든 것을 다 잘한다는 서비스치고 제대로 하는 곳은 없기 때문입니다. 최소한 PHP 8+, HTTP/2, SSD 스토리지를 기본으로 제공하는 호스팅을 찾으세요. 기본기가 탄탄한 WordPress 전문 호스팅은 일반 공유 호스팅보다 언제나 훨씬 뛰어난 성능을 발휘합니다.

10. 성능을 모니터링하세요

최적화가 실제로 효과가 있었는지 확인하지 못한다면 이 모든 작업은 아무런 의미가 없습니다. Real User Monitoring을 구축하여 단순한 실험실 환경의 Lighthouse 점수가 아니라 실제 방문자가 사이트를 어떻게 경험하는지 확인하세요. lab data 점수는 디버깅에 유용하지만, Google이 순위 산정에 반영하는 것은 실제 방문자로부터 수집한 field data입니다. CoreDash는 실제 사용자의 Core Web Vitals를 추적하여 현재 사이트의 정확한 상태를 알려줍니다.