# 퍼널 및 웹사이트 페이지 속도 개선 방법

빠른 로딩 속도는 전환율, 사용자 경험, SEO에 매우 중요합니다. 퍼널이나 웹사이트가 느리게 느껴진다면 다음 단계를 통해 페이지 속도를 개선할 수 있어요.

**목차**

* [1. 이미지 최적화](#1-이미지-최적화)
* [2. 무거운 요소 제한](#2-무거운-요소-제한)
* [3. 페이지 정리하기](#3-페이지-정리하기)
* [4. 시스템 기능 현명하게 활용](#4-시스템-기능-현명하게-활용)
* [5. 브라우저 및 호스팅 최적화 활용](#5-브라우저-및-호스팅-최적화-활용)
* [6. 성능 테스트 및 모니터링](#6-성능-테스트-및-모니터링)
* [7. 초기 HTML 크기 최적화](#7-초기-html-크기-최적화)
* [지원팀 문의가 필요한 경우](#지원팀-문의가-필요한-경우)

***

## 1. 이미지 최적화

* **업로드 전 크기 조정**: 거대한 이미지를 업로드하고 시스템이 자동으로 크기를 조정해주길 기대하지 마세요. 표시할 크기에 가깝게 미리 조정해서 업로드하세요.
* **압축된 포맷 사용**: 사진은 JPG나 WebP로, 투명도가 있는 그래픽은 PNG로 저장하세요.
* **이미지 개수 제한**: 이미지가 적을수록 요청 수가 줄고 로딩이 빨라집니다. 진짜 가치를 더하는 곳에만 이미지를 사용하세요(예: 여러 이미지 대신 임팩트 있는 메인 이미지 하나).

## 2. 무거운 요소 제한

* **비디오 배경 줄이기**: 비디오 배경을 사용할 때는 짧은 루프와 작은 파일 크기를 유지하세요.
* **애니메이션과 위젯 제한**: 움직이는 요소가 너무 많으면 렌더링이 느려집니다.
* **스크립트 최소화**: 꼭 필요하지 않다면 서드파티 추적 스크립트를 과도하게 설치하지 마세요.
* **첫 화면에는 무거운 요소 피하기**: 첫 번째 화면이 빠르게 로딩되도록 심플하고 가벼운 요소들로 구성하세요.

## 3. 페이지 정리하기

* **사용하지 않는 섹션 제거**: 숨김 처리되었거나 중복된 블록 중 사용하지 않는 것들을 정리하세요.
* **레이아웃 단순화**: 행, 컬럼, 요소가 적을수록 렌더링이 빨라집니다.
* **과도한 크기의 파일 확인**: 최적화된 PDF나 다운로드용 콘텐츠를 업로드하세요.

## 4. 시스템 기능 현명하게 활용

* **글로벌 섹션(Global Sections)**: 큰 레이아웃을 중복 생성하는 대신 블록을 재사용해서 효율성을 높이세요.
* **폼과 설문**: 서드파티 버전 대신 하이퍼클래스 네이티브 폼과 설문을 사용하세요(더 빠르게 로딩됩니다).
* **커스텀 코드**: 삽입하는 CSS는 가볍게 유지하세요.
* **시스템 설정 확인**:
  * 퍼널 설정에서 "자바스크립트 최적화(Optimise Javascript)"가 활성화되어 있는지 확인하세요.
  * 퍼널 설정에서 "이미지 최적화(Image optimisation)"가 활성화되어 있는지 확인하세요.
* **네트워크 요청 점검**: 브라우저 개발자 도구의 Network(네트워크) 탭을 사용해서 페이지 로딩을 느리게 하는 큰 이미지가 있는지 확인하세요.

## 5. 브라우저 및 호스팅 최적화 활용

* **캐싱 활성화**: 재방문자는 캐시된 자료로 더 빠르게 페이지를 로딩할 수 있어요.
* **SSL이 적용된 커스텀 도메인 사용**: 전송 속도가 빨라지고 신뢰도도 향상됩니다.
* **호스팅 위치 확인**: 하이퍼클래스는 글로벌 CDN을 사용하지만, 깔끔한 커스텀 도메인 설정으로 불필요한 리다이렉트를 방지할 수 있어요.

## 6. 성능 테스트 및 모니터링

무료 도구들을 활용하세요:

* PageSpeed Insights
* GTMetrix

데스크탑과 모바일 모두 테스트하세요(모바일이 보통 더 느립니다).

최상의 결과를 위해 도구들이 제안하는 개선 사항을 적용하세요.

## 7. 초기 HTML 크기 최적화

페이지 데이터 응답에서 불필요한 필드를 제거하여 페이지 렌더링에 사용되는 데이터를 최적화했습니다. 이로 인해 평균 최종 HTML 문서 크기가 약 10% 줄어들어 초기 로딩 성능이 개선됩니다. 특히 느린 인터넷 연결 환경에서 더욱 효과적이에요.

참고: 이 변경사항은 성능 최적화이므로 대부분의 경우 별도 작업이 필요하지 않습니다.

## 지원팀 문의가 필요한 경우

위 단계를 모두 따라했는데도 퍼널이나 웹사이트가 여전히 매우 느리다면, 다음 정보와 함께 지원팀에 문의하세요:

* 퍼널/웹사이트 링크
* PageSpeed 테스트 결과
* 이미 시도해본 단계들

이 정보를 제공해주시면 저희 팀이 더 빠르게 문제를 해결할 수 있어요.

***

*원문 최종 수정: Thu, 26 Mar, 2026 at 5:36 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/and-sites/how-to-improve-funnel-website-page-speed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.