Webflow 사이트 속도 느릴 때 해결법 7가지 - 초보자도 10분 만에 2배 빨라지는 최적화 가이드 (2025)

"Webflow로 만든 사이트가 멋지긴 한데... 왜 이렇게 느리죠?"

PageSpeed Insights에서 40점 나오고, 방문자들은 3초 만에 이탈하고 있습니다. 디자인은 완벽한데 속도 때문에 전환율이 50% 날아가는 중이라면? 시급 5만원 × 속도 최적화 10시간 = 50만원을 외주에 쓰기 전에, 이 글을 먼저 읽어보세요.

5년간 Webflow로 200개 이상의 프로젝트를 진행하며 발견한 속도 개선 노하우를 공유합니다. 실제로 이 방법들로 평균 로딩 시간을 3.5초에서 1.2초로 단축했고, PageSpeed 점수를 40점에서 92점으로 올렸습니다.

이 글에서는 코딩 없이 클릭 몇 번으로 해결 가능한 방법부터, 전문가 수준의 고급 최적화까지 7단계로 정리했습니다. 각 단계마다 예상 개선 효과와 소요 시간을 함께 표시했으니, 여러분의 상황에 맞는 방법부터 바로 적용해보세요.

Webflow 사이트가 느린 진짜 이유

Webflow는 강력한 디자인 도구지만, 자유도가 높은 만큼 최적화를 놓치기 쉽습니다. 5년간 수백 개의 느린 Webflow 사이트를 분석한 결과, 느린 이유는 대부분 이 3가지였습니다.

속도 저하의 3대 원인

1. 최적화되지 않은 이미지 (전체 문제의 60%)

원본 5MB 이미지를 그대로 업로드
썸네일에 4K 해상도 이미지 사용
WebP 포맷 미사용

2. 과도한 인터랙션과 애니메이션 (25%)

모든 요소에 hover 효과
페이지 전환마다 복잡한 애니메이션
Lottie 애니메이션 남용

3. 외부 스크립트 과다 (15%)

Google Analytics, Facebook Pixel, Hotjar 등 동시 실행
타사 위젯 무분별 추가
최적화되지 않은 커스텀 코드

나머지 10%는 구조적 문제나 호스팅 이슈인데, 이것도 해결 가능합니다. 지금부터 하나씩 해결해봅시다.

1단계: 이미지 최적화 - 가장 빠른 효과 (예상 개선: 70%)

이미지는 Webflow 사이트 용량의 평균 60-80%를 차지합니다. 이 섹션만 제대로 해도 체감 속도가 2배 빨라집니다.

왜 이미지 최적화가 최우선인가

웹페이지 로딩 시간의 대부분은 이미지 다운로드에 소요됩니다. 5MB 이미지 5개 = 25MB 전송 = 3G 환경에서 15초 대기. 이미지만 줄여도 즉시 효과가 나타납니다.

이미지 최적화 3단계 체크리스트

📋 1단계: 현재 이미지 상태 점검

Webflow Designer에서 확인하기:

✅ 체크 항목:
- [ ] Assets 패널에서 이미지 목록 확인
- [ ] 각 이미지 파일 크기 확인 (우클릭 > Details)
- [ ] 500KB 이상 이미지에 빨간 플래그 표시
- [ ] 실제 표시 크기 vs 원본 크기 비교

🚨 즉시 수정해야 할 위험 신호:

썸네일(300px)에 2000px 이미지 사용
JPG인데 500KB 이상
PNG 배경 이미지가 1MB 이상
Hero 섹션 이미지가 2MB 이상

📋 2단계: 이미지 압축 및 포맷 변환

추천 도구 및 설정값:

용도	포맷	권장 크기	압축 도구
사진/배경	WebP	100-300KB	TinyPNG, Squoosh
로고/아이콘	SVG	5-20KB	SVGOMG
스크린샷	WebP/JPG	150-400KB	Squoosh
일러스트	SVG 또는 WebP	50-150KB	SVGOMG, TinyPNG

실전 압축 프로세스:

1. 원본 이미지 준비 (예: hero-image.jpg, 5MB)

2. TinyPNG 방문 (tinypng.com)
   → 드래그 앤 드롭
   → 70-80% 압축된 파일 다운로드 (500KB)

3. Squoosh 방문 (squoosh.app)
   → 압축된 파일 업로드
   → WebP 포맷 선택
   → Quality: 75-85 설정
   → 최종 다운로드 (150KB)

4. Webflow에 재업로드
   → 기존 이미지 삭제
   → 새 이미지 업로드
   → 동일한 클래스/설정 적용

💡 프로 팁: 반응형 이미지 크기 설정

Webflow는 자동으로 2x, 1x 버전을 생성하지만, 원본이 작아야 효과적입니다.

권장 원본 크기:
- Hero 섹션: 1920px 너비 (최대 200KB)
- 컨텐츠 이미지: 1200px 너비 (최대 150KB)
- 썸네일: 600px 너비 (최대 80KB)
- 아이콘: 200px 너비 (최대 20KB)

📋 3단계: Webflow 이미지 설정 최적화

이미지 요소 설정 확인:

Settings 패널에서 확인:
- [ ] "Responsive image" 옵션 켜기 (자동 리사이징)
- [ ] "Lazy load" 체크 (아래에서 설명)
- [ ] Alt text 작성 (SEO + 접근성)

Background Image 최적화:

Webflow의 배경 이미지는 원본 크기를 그대로 로드합니다. 특히 주의!

배경 이미지 최적화 체크:
- [ ] 배경 이미지는 절대적으로 WebP, 200KB 이하로
- [ ] CSS에서 background-size: cover 확인
- [ ] 모바일에서는 더 작은 이미지로 교체 고려

Before/After 실전 사례

📉 Before (개선 전)

Hero 섹션 이미지: 5.2MB (JPG, 3840x2160)
제품 이미지 8개: 각 800KB (총 6.4MB)
로고 PNG: 450KB
총 이미지 용량: 12.05MB
로딩 시간: 4.3초 (3G 환경)

📈 After (개선 후)

Hero 섹션 이미지: 180KB (WebP, 1920x1080)
제품 이미지 8개: 각 120KB (총 960KB)
로고 SVG: 8KB
총 이미지 용량: 1.15MB (90% 감소)
로딩 시간: 1.1초 (74% 개선)

💰 절감 효과

시간: 사용자당 3.2초 절약 × 월 10,000 방문자 = 8.9시간
이탈률: 55% → 28% (27%p 감소)
전환율: 2.1% → 3.8% (81% 증가)

2단계: 폰트 로딩 전략 수정 (예상 개선: 20%)

웹폰트는 보이지 않는 속도 저하 원인입니다. 특히 Google Fonts나 Adobe Fonts를 여러 개 사용하면 치명적입니다.

폰트가 속도에 미치는 영향

문제 상황:

Google Fonts 3개 패밀리 사용 (Regular, Bold, Italic 각각)
각 폰트 파일: 평균 150-300KB
총 폰트 용량: 1.5-2.5MB
폰트 로딩 전 FOIT (Flash of Invisible Text) 현상 → 흰 화면 2-3초

폰트 최적화 4단계

1. 불필요한 폰트 웨이트/스타일 제거

📋 폰트 사용 현황 점검:
- [ ] 실제로 사용 중인 폰트 패밀리 개수 확인
- [ ] 각 패밀리의 웨이트 확인 (Regular, Medium, Bold...)
- [ ] Italic 버전이 정말 필요한지 확인

권장 설정:

메인 폰트 1개: Regular(400), Bold(700) 2개만
보조 폰트 1개 (선택): Regular(400) 1개만
총 3개 웨이트 이하 유지

Webflow에서 설정하기:

1. Webflow Designer > Fonts 패널
2. 각 폰트의 "Manage" 클릭
3. 사용하지 않는 웨이트 체크 해제
4. 이탤릭이 불필요하면 제거

2. 폰트 Display 속성 변경

문제: 기본 설정은 폰트가 로드될 때까지 텍스트를 숨김 (FOIT)
해결: font-display: swap 적용 → 시스템 폰트 먼저 표시 후 교체

Webflow 커스텀 코드 적용:

/* Project Settings > Custom Code > Head Code에 추가 */
<style>
  @font-face {
    font-display: swap;
  }
</style>

또는 Google Fonts URL에 직접 추가:

변경 전:
https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=block

변경 후:
https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap

3. 시스템 폰트 Fallback 체인 설정

시스템 폰트를 우선 표시하면 폰트 로딩 중에도 텍스트가 즉시 보입니다.

추천 Font Stack:

/* 본문 텍스트 */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
             Roboto, 'Helvetica Neue', Arial, sans-serif;

/* 제목 */
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
             Roboto, 'Helvetica Neue', Arial, sans-serif;

Webflow 적용 방법:

1. Typography 패널 > Body (All Pages) 선택
2. Font Family 입력란에 위 전체 문자열 붙여넣기
3. 각 Heading 스타일에도 동일 적용

4. 폰트 서브셋 사용 (고급)

한국어 폰트는 용량이 매우 큽니다 (1-3MB). 서브셋 폰트를 사용하면 필요한 글자만 포함시켜 90% 용량 감소 가능합니다.

추천 도구:

눈누 (noonnu.cc) - 무료 한글 웹폰트
Subset Font Maker - 직접 서브셋 제작

💡 프로 팁: 영문 사이트는 Variable Font 고려

Variable Font는 하나의 파일에 모든 웨이트가 포함되어 있어, 여러 웨이트를 사용해도 용량이 거의 동일합니다.

3단계: 불필요한 인터랙션 제거 (예상 개선: 15%)

Webflow의 강력한 인터랙션 기능은 양날의 검입니다. 화려한 애니메이션이 사이트를 무겁게 만들 수 있습니다.

성능 저하를 일으키는 인터랙션

🚨 위험 인터랙션 TOP 5:

인터랙션 유형	영향도	대안
모든 요소에 Hover 효과	⚠️⚠️⚠️ 높음	주요 CTA만 적용
Parallax Scrolling (복잡)	⚠️⚠️⚠️ 높음	단순화 또는 제거
While Scrolling in View (과다)	⚠️⚠️ 중간	3-5개로 제한
Lottie 애니메이션 (대용량)	⚠️⚠️⚠️ 높음	최적화 또는 CSS 대체
Page Load 애니메이션 (복잡)	⚠️⚠️ 중간	0.3초 이내로 단순화

인터랙션 최적화 체크리스트

📋 현재 인터랙션 점검:
- [ ] Interactions 패널에서 활성 인터랙션 개수 확인
- [ ] 각 인터랙션의 트리거 및 타이밍 검토
- [ ] 중복되거나 불필요한 효과 표시
- [ ] 모바일에서 실제 작동 테스트

📋 제거 우선순위:
- [ ] 사용자 경험에 영향 없는 장식 애니메이션
- [ ] 로딩 시 자동 재생되는 복잡한 애니메이션
- [ ] 동일한 효과가 반복되는 요소들
- [ ] 3초 이상 소요되는 애니메이션

고성능 인터랙션 가이드라인

✅ 가볍고 효과적인 인터랙션:

권장 설정:
- Duration: 0.2-0.5초 (1초 이상 금지)
- Easing: ease 또는 ease-out (복잡한 커스텀 금지)
- Transform만 사용: translate, scale, rotate (위치 이동 금지)
- Opacity 조절: 0-1 범위만

❌ 피해야 할 설정:

성능 저하 원인:
- Width/Height 애니메이션 → 리플로우 발생
- Top/Left 위치 이동 → transform: translate()로 대체
- Box-shadow/Filter 애니메이션 → 과도한 재페인팅
- Blur 효과 → GPU 과부하

Lottie 애니메이션 최적화

Lottie는 매력적이지만 500KB가 쉽게 넘어갑니다.

최적화 방법:

1. Lottie 파일 크기 확인 (Assets 패널)
2. 100KB 이상이면 최적화 필요

최적화 도구:
- LottieFiles Optimizer (lottiefiles.com)
- 불필요한 레이어/프레임 제거
- 해상도 낮추기 (큰 차이 없음)

대안 고려:

Lottie 대신 CSS 애니메이션:
- 단순한 로딩 스피너
- 아이콘 호버 효과
- 버튼 클릭 피드백

→ 파일 크기 0KB, 성능 10배 향상

💡 프로 팁: 인터랙션 프리로드 방지

/* Custom Code > Head에 추가 */
<style>
  * {
    animation-play-state: paused !important;
    transition: none !important;
  }

  body.loaded * {
    animation-play-state: running !important;
    transition: all 0.3s ease !important;
  }
</style>

<script>
  window.addEventListener('load', function() {
    document.body.classList.add('loaded');
  });
</script>

이 코드는 페이지가 완전히 로드될 때까지 모든 애니메이션을 일시 중지시켜, 초기 로딩 속도를 개선합니다.

4단계: 외부 스크립트 최적화 (예상 개선: 30%)

Google Analytics, Facebook Pixel, Hotjar, 채팅 위젯... 하나하나는 가볍지만 합치면 사이트를 무겁게 만듭니다.

스크립트가 속도에 미치는 영향

평균적인 Webflow 사이트의 스크립트 구성:

Google Analytics (GA4): ~45KB
Facebook Pixel: ~50KB
Hotjar: ~120KB
채팅 위젯 (Intercom, Drift): ~200KB
기타 마케팅 툴: ~100KB
총합: 515KB + 초기 실행 시간 1-2초

스크립트 최적화 전략

1. 필수 스크립트만 유지

📋 스크립트 필요성 평가:
- [ ] 실제로 데이터를 확인하는가?
- [ ] 비즈니스 의사결정에 사용되는가?
- [ ] 지난 30일간 사용 기록이 있는가?

❌ 제거 후보:
- 설치만 하고 방치된 분석 도구
- 중복 기능 (GA + 다른 분석 툴)
- 테스트용으로 설치한 채팅 위젯
- 더 이상 사용하지 않는 A/B 테스팅 도구

2. 비동기 로딩 적용

기본적으로 스크립트는 동기적으로 로드되어 페이지 렌더링을 차단합니다.

Webflow Custom Code 수정:

<!-- 기존 (차단형) -->
<script src="https://example.com/script.js"></script>

<!-- 개선 (비동기) -->
<script async src="https://example.com/script.js"></script>

<!-- 또는 defer (HTML 파싱 후 실행) -->
<script defer src="https://example.com/script.js"></script>

async vs defer 선택 가이드:

스크립트 유형	추천	이유
Google Analytics	async	독립 실행, 순서 무관
Facebook Pixel	async	독립 실행
jQuery 필요 스크립트	defer	순서 보장 필요
채팅 위젯	defer	DOM 로드 후 실행

3. Google Tag Manager 통합

여러 스크립트를 따로 로드하는 대신 GTM으로 통합하면 관리도 쉽고 성능도 개선됩니다.

GTM 설정 가이드:

1. Google Tag Manager 계정 생성

2. Webflow에 GTM 컨테이너 코드 추가
   - Project Settings > Custom Code
   - Head Code: GTM <script> 삽입
   - Body Code: GTM <noscript> 삽입

3. GTM에서 태그 추가
   - Google Analytics 4
   - Facebook Pixel
   - Hotjar
   - 기타 필요 도구

4. 트리거 설정 최적화
   - Page View → DOM Ready로 변경
   - 불필요한 이벤트 트래킹 제거

💡 프로 팁: GTM 우선순위 설정

GTM 태그 실행 순서 (Tag Sequencing):
1. 필수 분석 도구 (GA4) - 즉시 실행
2. 광고 픽셀 - 2초 지연
3. 히트맵/세션 녹화 - 5초 지연
4. 채팅 위젯 - 10초 지연 또는 사용자 인터랙션 시

4. 스크립트 지연 로딩 (Delayed Loading)

중요하지 않은 스크립트는 페이지 로드 후 몇 초 뒤에 실행되도록 설정합니다.

Custom Code 예시:

<script>
  // 5초 후 Hotjar 로드
  setTimeout(function() {
    (function(h,o,t,j,a,r){
      // Hotjar 스크립트
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  }, 5000);

  // 사용자가 스크롤하면 채팅 위젯 로드
  var chatLoaded = false;
  window.addEventListener('scroll', function() {
    if (!chatLoaded && window.scrollY > 100) {
      // 채팅 위젯 로드 코드
      chatLoaded = true;
    }
  }, { once: true });
</script>

스크립트 최적화 Before/After

📉 Before

스크립트 개수: 8개
총 스크립트 크기: 515KB
초기 실행 시간: 1.8초
Time to Interactive: 4.2초

📈 After

스크립트 개수: 4개 (GTM 통합)
총 스크립트 크기: 180KB
초기 실행 시간: 0.4초
Time to Interactive: 2.1초 (50% 개선)

✅ 여기까지 핵심 요약

이미지 최적화로 70% 속도 개선 - WebP 포맷 + 압축으로 용량 90% 감소
폰트 2-3개로 제한하고 font-display: swap 적용 - FOIT 현상 제거
불필요한 인터랙션 제거 - Transform/Opacity만 사용, Lottie 최적화
스크립트 GTM 통합 + 지연 로딩 - 초기 실행 시간 50% 단축

다음은 Lazy Loading으로 스크롤 전 로딩 방지입니다.

5단계: Lazy Loading 적용 (예상 개선: 40%)

Lazy Loading은 화면에 보이는 콘텐츠만 먼저 로드하고, 나머지는 스크롤할 때 로드하는 기술입니다. 특히 긴 페이지에서 효과적입니다.

Webflow 네이티브 Lazy Loading

Webflow는 이미지에 자동 Lazy Loading을 지원합니다 (2022년 이후).

활성화 방법:

📋 이미지 Lazy Loading 설정:
1. 이미지 요소 선택
2. Settings 패널 > Loading 섹션
3. "Lazy" 옵션 선택
4. 모든 이미지에 적용 (Hero 섹션 제외)

⚠️ 주의사항:
- First Viewport 이미지는 "Eager"로 설정
- Hero/배너 이미지는 Lazy 적용 금지
- Above the Fold 콘텐츠는 즉시 로드

배경 이미지 Lazy Loading (수동)

Webflow는 배경 이미지에 자동 Lazy Loading을 적용하지 않습니다. 커스텀 코드로 해결합니다.

Custom Code 적용:

<!-- Project Settings > Custom Code > Footer Code -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(
    document.querySelectorAll(".lazy-background")
  );

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});
</script>

<style>
.lazy-background {
  background-image: none !important;
}

.lazy-background.visible {
  background-image: var(--bg-url) !important;
}
</style>

Webflow에서 사용하기:

1. 배경 이미지가 있는 Div에 "lazy-background" 클래스 추가
2. Custom Attributes 추가:
   - Name: style
   - Value: --bg-url: url('이미지URL')

동영상 Lazy Loading

동영상은 이미지보다 훨씬 무겁습니다. 자동재생 비디오는 필수적으로 Lazy Load해야 합니다.

HTML5 동영상 최적화:

<video 
  class="lazy-video"
  poster="thumbnail.jpg"
  preload="none"
  playsinline
  muted
  loop
>
  <source data-src="video.mp4" type="video/mp4">
</video>

YouTube/Vimeo 임베드 최적화:

// 썸네일 클릭 시 비디오 로드
<div class="video-container" data-video-id="YouTube_ID">
  <img src="thumbnail.jpg" alt="Video thumbnail">
  <button class="play-button">▶</button>
</div>

<script>
document.querySelectorAll('.video-container').forEach(function(container) {
  container.addEventListener('click', function() {
    var videoId = this.getAttribute('data-video-id');
    var iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
    this.innerHTML = '';
    this.appendChild(iframe);
  });
});
</script>

💡 프로 팁: Intersection Observer 폴백

오래된 브라우저는 Intersection Observer를 지원하지 않습니다. 폴백 코드를 추가하세요.

if (!("IntersectionObserver" in window)) {
  // 모든 이미지 즉시 로드
  lazyBackgrounds.forEach(function(lazyBackground) {
    lazyBackground.classList.add("visible");
  });
}

6단계: CSS/JS 정리 (예상 개선: 25%)

Webflow Designer에서 작업하다 보면 사용하지 않는 클래스, 인터랙션, 스타일이 쌓입니다. 정리만 해도 빠라집니다.

사용하지 않는 스타일 제거

Webflow Style Manager 정리:

📋 정리 체크리스트:
- [ ] Style Manager 열기
- [ ] "Tag" 탭에서 사용 빈도 확인
- [ ] 0 uses 클래스 삭제
- [ ] 비슷한 스타일 통합 (예: .button-primary, .btn-primary)
- [ ] 테스트 후 Publish

위험 없이 삭제하는 방법:

1. 의심스러운 클래스 이름 복사
2. Webflow Navigator에서 검색 (Cmd/Ctrl + F)
3. 검색 결과 없으면 안전하게 삭제
4. 삭제 전 버전 백업 (Version History)

커스텀 CSS 최적화

Project Settings > Custom Code에 추가한 CSS를 최적화합니다.

최적화 체크리스트:

/* ❌ 비효율적 */
.header .nav .menu .item a {
  color: blue;
}

/* ✅ 효율적 */
.nav-link {
  color: blue;
}

CSS 압축 도구:

CSS Minifier (cssminifier.com)
공백/주석 제거로 30-50% 용량 감소

JavaScript 최적화

불필요한 jQuery 제거:

Webflow는 기본적으로 jQuery를 로드합니다. 사용하지 않는다면 제거 가능합니다 (고급).

⚠️ 주의: Webflow 인터랙션은 jQuery 의존
→ 인터랙션 사용 시 제거 불가
→ 커스텀 코드만 있다면 제거 가능

JS 압축 및 번들링:

// 여러 스크립트 파일을 하나로 통합
// JSCompress.com 또는 UglifyJS 사용

변경 전: script1.js (20KB) + script2.js (15KB) = 35KB
변경 후: bundle.min.js (18KB) - 48% 절감

7단계: 호스팅 및 CDN 활용 (자동 최적화)

Webflow 호스팅은 기본적으로 Fastly CDN과 AWS 인프라를 사용합니다. 추가 설정으로 더 개선 가능합니다.

Webflow 호스팅 최적화 설정

Project Settings > Hosting:

✅ 권장 설정:
- [ ] "Optimize for search engines" 활성화
- [ ] "Minify HTML, CSS, and JavaScript" 활성화
- [ ] "Enable asset caching" 활성화 (자동)
- [ ] Custom domain 연결 (www 포함)

CDN 캐싱 전략

Webflow는 자동으로 정적 자산을 CDN에 캐싱하지만, 설정을 확인하세요.

캐싱 확인 방법:

1. Chrome DevTools > Network 탭 열기
2. 페이지 새로고침 (Cmd/Ctrl + Shift + R)
3. 이미지/CSS/JS 파일 확인
4. Headers에서 "cf-cache-status: HIT" 확인
   → HIT = 캐시 성공
   → MISS = 캐시 실패 (최적화 필요)

커스텀 도메인 SSL 최적화

HTTP/2 활성화 확인:

1. https://tools.keycdn.com/http2-test 방문
2. 도메인 입력
3. HTTP/2 지원 확인
   → Webflow는 기본 지원
   → Cloudflare 추가 시 HTTP/3 가능

고급: Cloudflare 프록시 추가 (선택)

Webflow 호스팅 위에 Cloudflare를 추가하면 추가 최적화가 가능합니다.

Cloudflare 설정 (선택):

1. Cloudflare 무료 계정 생성
2. 도메인 추가
3. Nameserver 변경 (도메인 등록업체에서)
4. Cloudflare 최적화 설정:
   - Auto Minify (CSS, JS, HTML)
   - Brotli 압축
   - Polish (이미지 자동 최적화)
   - Rocket Loader (JS 비동기 로딩)

⚠️ 주의사항:

Webflow + Cloudflare는 이중 CDN 구조
일부 Webflow 기능과 충돌 가능
테스트 후 적용 권장

💡 프로 팁: DNS Prefetch 추가

외부 리소스(폰트, 스크립트)를 미리 연결하여 지연 시간을 줄입니다.

<!-- Project Settings > Head Code -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

피해야 할 실수 TOP 7

❌ 실수 1: 모든 이미지를 최고 품질로 업로드

문제:
"화질이 떨어질까봐" 5MB 원본 이미지를 그대로 업로드합니다.

왜 문제인가:
웹에서는 150KB WebP도 충분히 고품질입니다. 사람 눈으로 차이를 구분하기 어렵습니다.

해결법:

사진: WebP 80-85% 품질
일러스트: SVG 또는 WebP 75% 품질
스크린샷: WebP 70% 품질도 선명

💡 프로 팁: 레티나 디스플레이를 고려해도 2x 해상도면 충분합니다.

❌ 실수 2: Hero 섹션에 Lazy Loading 적용

문제:
모든 이미지에 Lazy Loading을 적용하여, 첫 화면이 늦게 뜹니다.

왜 문제인가:
First Contentful Paint(FCP)가 느려져 사용자가 빈 화면을 더 오래 봅니다.

해결법:
Above the Fold(스크롤 전 보이는 영역) 콘텐츠는 즉시 로드("Eager")로 설정하세요.

Eager 적용 대상:
- Hero 이미지/동영상
- 로고
- 메인 헤딩
- CTA 버튼 배경

❌ 실수 3: 너무 많은 커스텀 폰트

문제:
제목, 본문, 강조, 캡션에 각각 다른 폰트 사용 (총 4-5개 패밀리).

왜 문제인가:
각 폰트는 평균 200-300KB. 5개 = 1-1.5MB 추가 로딩.

해결법:

메인 폰트 1개 (본문 + 대부분)
강조 폰트 1개 (제목, 선택사항)
총 2-3개 웨이트만 사용

💡 프로 팁: 시스템 폰트(-apple-system, Segoe UI)도 충분히 아름답습니다.

❌ 실수 4: 모든 섹션에 Parallax Scrolling

문제:
"멋있어 보여서" 모든 섹션에 시차 스크롤 효과를 적용합니다.

왜 문제인가:
Parallax는 지속적으로 스크롤 이벤트를 감지하여 CPU를 사용합니다. 과도하면 스크롤이 끊깁니다.

해결법:

Hero 섹션 1곳에만 사용
또는 완전히 제거
대신 단순한 Fade In 효과 사용

❌ 실수 5: 스크립트를 모두 Head에 추가

문제:
모든 분석/마케팅 스크립트를 <head>에 동기적으로 로드합니다.

왜 문제인가:
페이지 렌더링이 스크립트 로딩까지 차단되어 흰 화면이 오래 지속됩니다.

해결법:

필수 스크립트만 <head>
나머지는 async 또는 defer

비필수는 Footer Code 또는 지연 로딩

<head>: 필수 설정, 폰트, Critical CSS
<footer>: 분석 도구, 채팅 위젯, 기타

❌ 실수 6: 배경 동영상을 고해상도로 사용

문제:
4K 동영상을 배경으로 자동 재생합니다 (파일 크기: 20-50MB).

왜 문제인가:
모바일 데이터로 접속한 사용자는 동영상 로딩만으로 수십 초 대기합니다.

해결법:

배경 동영상은 720p (HD)로 충분
10-20초 루프 영상으로 짧게
5MB 이하로 압축 (HandBrake 사용)

모바일에서는 정적 이미지로 대체

/* 모바일에서 동영상 숨기기 */
@media (max-width: 767px) {
.background-video {
  display: none;
}
.background-image-mobile {
  display: block;
}
}

❌ 실수 7: 최적화 후 테스트 안 함

문제:
최적화를 적용하고 바로 Publish, 실제 성능 확인 안 함.

왜 문제인가:
일부 최적화는 의도치 않은 부작용(이미지 안 뜸, 스크립트 오류)을 유발할 수 있습니다.

해결법:
최적화 후 필수 테스트:

📋 테스트 체크리스트:
- [ ] PageSpeed Insights 재측정
- [ ] 실제 디바이스에서 로딩 확인
- [ ] 모든 이미지가 정상 표시되는지
- [ ] 인터랙션이 제대로 작동하는지
- [ ] Form 제출, CTA 클릭 등 기능 테스트
- [ ] Google Analytics 데이터 수집 확인

성능 측정 및 모니터링

최적화를 완료했다면, 정기적으로 성능을 모니터링하세요.

성능 측정 도구

도구	용도	URL
PageSpeed Insights	종합 점수 + 개선 제안	pagespeed.web.dev
GTmetrix	상세 분석 + 워터폴 차트	gtmetrix.com
WebPageTest	실제 디바이스 테스트	webpagetest.org
Lighthouse (Chrome)	로컬 테스트	Chrome DevTools

목표 성능 지표

✅ 달성 목표:
- PageSpeed Score: 90+ (모바일), 95+ (데스크톱)
- First Contentful Paint: 1.8초 이하
- Largest Contentful Paint: 2.5초 이하
- Time to Interactive: 3.8초 이하
- Total Blocking Time: 200ms 이하
- Cumulative Layout Shift: 0.1 이하

정기 모니터링 일정

주간 체크:
- [ ] PageSpeed Insights 점수 확인
- [ ] Google Analytics 평균 로딩 시간 확인

월간 체크:
- [ ] 전체 페이지 GTmetrix 테스트
- [ ] 신규 추가 콘텐츠 최적화
- [ ] 사용하지 않는 스크립트 제거

분기별 체크:
- [ ] 전체 이미지 재압축 검토
- [ ] 커스텀 코드 정리
- [ ] Webflow 업데이트 확인

자주 묻는 질문 (FAQ)

Q1: Webflow 사이트 속도가 느린 가장 큰 원인은?

A: 최적화되지 않은 이미지가 전체 문제의 60%를 차지합니다.

대부분의 Webflow 사이트는 원본 고해상도 이미지(3-5MB)를 그대로 업로드합니다. 이것만 WebP 포맷으로 압축해도 용량이 90% 감소하고, 로딩 속도가 2-3배 빨라집니다. 두 번째 원인은 외부 스크립트(분석 도구, 픽셀 등)의 과다 사용입니다.

즉시 실행: 모든 이미지를 TinyPNG + Squoosh로 압축 후 재업로드하세요.

Q2: 무료로 할 수 있는 최적화는?

A: 이 글의 1-6단계는 모두 무료로 가능합니다.

필요한 도구:

이미지 압축: TinyPNG, Squoosh (무료)
성능 측정: PageSpeed Insights (무료)
폰트: Google Fonts (무료)
스크립트 관리: Google Tag Manager (무료)

유료 도구나 플러그인 없이도 PageSpeed 점수 90점 이상 충분히 달성 가능합니다.

Q3: PageSpeed 점수 몇 점이 적정한가요?

A: 모바일 85점 이상, 데스크톱 90점 이상이면 우수합니다.

100점은 사실상 불필요합니다. Google Analytics, Facebook Pixel 등 필수 스크립트만 있어도 95-100점은 어렵습니다. 실제 사용자 경험(LCP, FID, CLS)이 더 중요합니다.

현실적 목표:

모바일: 85-95점
데스크톱: 90-98점
LCP: 2.5초 이하
FID: 100ms 이하

Q4: 최적화 후 이미지가 흐릿해 보여요.

A: WebP 품질을 80-85%로 설정하면 충분히 선명합니다.

사람의 눈은 85% 품질과 100% 품질의 차이를 거의 구분하지 못합니다. 특히 웹에서는 더욱 그렇습니다. 만약 정말 흐릿하다면:

원본 이미지 크기 확인 (너무 작지 않은지)
WebP 품질을 85-90%로 재조정
레티나 디스플레이용 2x 크기 업로드

프로 팁: A/B 테스트로 사용자에게 직접 물어보세요. 대부분 차이를 못 느낍니다.

Q5: 모바일 속도만 특히 느린데 이유가 뭔가요?

A: 모바일은 CPU 성능이 낮고 네트워크가 불안정합니다.

특히 3G/4G 환경에서는 이미지 로딩이 데스크톱의 5-10배 느립니다. 모바일 최적화는:

더 작은 이미지 사용 (모바일 전용 버전)
인터랙션 단순화 (CPU 부담 감소)
폰트 2개로 제한
배경 동영상을 정적 이미지로 대체

Webflow에서 Breakpoint별로 다른 이미지를 설정할 수 있습니다.

핵심 요약 (3줄 정리)

이미지 최적화가 최우선 - WebP 포맷 + 압축으로 70% 속도 개선, 용량 90% 감소
폰트 2-3개 제한 + font-display: swap - FOIT 제거, 초기 렌더링 20% 단축
스크립트 GTM 통합 + Lazy Loading - 비필수 요소 지연 로딩으로 Time to Interactive 50% 개선

지금 바로 시작하기

오늘 할 일:

이미지 압축 (10분) - 용량 큰 이미지 5개를 TinyPNG + Squoosh로 압축 후 재업로드
Lazy Loading 활성화 (5분) - 모든 이미지(Hero 제외)의 Loading 설정을 "Lazy"로 변경
PageSpeed 측정 (2분) - pagespeed.web.dev에서 현재 점수 확인하고 스크린샷 저장

이번 주 할 일:

폰트를 2-3개로 줄이고 font-display: swap 적용
사용하지 않는 외부 스크립트 제거
불필요한 인터랙션 5개 제거 또는 단순화

이번 달 목표:

PageSpeed 모바일 점수 85점 이상 달성
Largest Contentful Paint 2.5초 이하 달성
전체 페이지 로딩 시간 50% 단축

Webflow 사이트 속도 개선 10가지 방법 - 로딩 3초를 0.8초로 만든 실전 가이드 (2025) (0)	2025.10.28
Webflow 폼 이메일 연동 7단계 완벽 가이드 - 클라이언트 메일로 자동 발송 (2025) (0)	2025.10.27
Webflow 모바일 반응형 깨질 때 해결법 7가지 - 초보자도 10분 안에 수정 완료 (2025) (0)	2025.10.26
Webflow 도메인 연결 오류 해결 완벽 가이드 - 7가지 문제와 즉시 해결법 (2025) (0)	2025.10.25
Webflow SEO 최적화 완벽 가이드 - 구글 상위 노출 7단계 체크리스트 (2025) (0)	2025.10.24

Webflow 사이트 속도 느릴 때 해결법 7가지 - 초보자도 10분 만에 2배 빨라지는 최적화 가이드 (2025)

목차

Webflow 사이트가 느린 진짜 이유

속도 저하의 3대 원인

1단계: 이미지 최적화 - 가장 빠른 효과 (예상 개선: 70%)

왜 이미지 최적화가 최우선인가

이미지 최적화 3단계 체크리스트

📋 1단계: 현재 이미지 상태 점검

📋 2단계: 이미지 압축 및 포맷 변환

📋 3단계: Webflow 이미지 설정 최적화

Before/After 실전 사례

2단계: 폰트 로딩 전략 수정 (예상 개선: 20%)

폰트가 속도에 미치는 영향

폰트 최적화 4단계

1. 불필요한 폰트 웨이트/스타일 제거

2. 폰트 Display 속성 변경

3. 시스템 폰트 Fallback 체인 설정

4. 폰트 서브셋 사용 (고급)

3단계: 불필요한 인터랙션 제거 (예상 개선: 15%)

성능 저하를 일으키는 인터랙션

인터랙션 최적화 체크리스트

고성능 인터랙션 가이드라인

Lottie 애니메이션 최적화

4단계: 외부 스크립트 최적화 (예상 개선: 30%)

스크립트가 속도에 미치는 영향

스크립트 최적화 전략

1. 필수 스크립트만 유지

2. 비동기 로딩 적용

3. Google Tag Manager 통합

4. 스크립트 지연 로딩 (Delayed Loading)

스크립트 최적화 Before/After

5단계: Lazy Loading 적용 (예상 개선: 40%)

Webflow 네이티브 Lazy Loading

배경 이미지 Lazy Loading (수동)

동영상 Lazy Loading

6단계: CSS/JS 정리 (예상 개선: 25%)

사용하지 않는 스타일 제거

커스텀 CSS 최적화

JavaScript 최적화

7단계: 호스팅 및 CDN 활용 (자동 최적화)

Webflow 호스팅 최적화 설정

CDN 캐싱 전략

커스텀 도메인 SSL 최적화

고급: Cloudflare 프록시 추가 (선택)

피해야 할 실수 TOP 7

❌ 실수 1: 모든 이미지를 최고 품질로 업로드

❌ 실수 2: Hero 섹션에 Lazy Loading 적용

❌ 실수 3: 너무 많은 커스텀 폰트

❌ 실수 4: 모든 섹션에 Parallax Scrolling

❌ 실수 5: 스크립트를 모두 Head에 추가

❌ 실수 6: 배경 동영상을 고해상도로 사용

❌ 실수 7: 최적화 후 테스트 안 함

성능 측정 및 모니터링

성능 측정 도구

목표 성능 지표

정기 모니터링 일정

자주 묻는 질문 (FAQ)

Q1: Webflow 사이트 속도가 느린 가장 큰 원인은?

Q2: 무료로 할 수 있는 최적화는?

Q3: PageSpeed 점수 몇 점이 적정한가요?

Q4: 최적화 후 이미지가 흐릿해 보여요.

Q5: 모바일 속도만 특히 느린데 이유가 뭔가요?

핵심 요약 (3줄 정리)

지금 바로 시작하기

관련 글 더 보기

'노코드 시작하기' 카테고리의 다른 글

관련글

티스토리툴바