본문으로 건너뛰기

성능(Performance) 최적화 팁

PDF가 빠르게 로드되도록 최적화해 고객 경험을 개선하세요.

PDF 파일 용량 최적화

목표: 5MB 이하

  • 5MB 이하 파일은 빠르게 로드됩니다.
  • 고객은 큰 다운로드를 오래 기다리지 않습니다.
  • 특히 모바일 사용자는 작은 파일이 중요합니다.

PDF 압축하기:

  • 온라인 압축 도구를 사용합니다.
  • 이미지 품질을 150~200 DPI로 낮춥니다.
  • 불필요하게 임베드된 폰트를 제거합니다.
  • 레이어를 플래튼(Flatten) 처리합니다.

불필요한 콘텐츠 제거:

  • 빈 페이지 삭제
  • 숨김 레이어 제거
  • 사용하지 않는 그래픽 제거
  • 포함된 이미지 압축

적절한 표시 방식 선택

버튼 표시 = 더 빠름

  • 페이지는 즉시 로드됩니다.
  • 고객이 클릭할 때만 PDF가 로드됩니다.
  • 모바일에 더 적합합니다.
  • 여러 PDF를 제공할 때도 유리합니다.

임베디드 뷰어 = 더 느릴 수 있음

  • 페이지 로드와 함께 PDF도 로드됩니다.
  • 뷰어 초기화를 기다려야 할 수 있습니다.
  • 화면 공간을 많이 차지합니다.
  • 페이지 로딩이 느려질 수 있습니다.

성능이 중요하다면 버튼 표시를 우선 고려하세요.

모바일 최적화

파일은 더 작게:

  • 모바일 데이터는 더 느립니다.
  • 고객은 큰 파일을 기다리지 않습니다.
  • 모바일에서는 3MB 이하가 이상적입니다.

실제 모바일 기기에서 테스트:

  • 브라우저 시뮬레이션만이 아니라 실제 휴대폰에서 확인하세요.
  • 4G/5G 환경에서 테스트하세요.
  • 느린 연결에서도 테스트해 보세요.

버튼 표시 사용:

  • 임베디드 뷰어는 모바일에서 답답할 수 있습니다.
  • 버튼은 작은 화면에서 더 잘 어울립니다.
  • 팝업은 전체 화면 경험을 제공합니다.

페이지당 PDF 개수 제한

적을수록 빠릅니다:

  • (임베디드 뷰 기준) PDF가 많을수록 로딩이 늘어납니다.
  • 페이지당 1~3개가 이상적입니다.
  • 5개를 넘기면 체감 속도가 크게 느려질 수 있습니다.

관련 콘텐츠는 합치기:

  • 작은 PDF 여러 개 대신, 하나의 종합 PDF로 구성할 수 있습니다.
  • 로드해야 하는 파일 수가 줄어듭니다.
  • 고객이 정보를 찾기도 쉬워집니다.

비활성(Inactive) 상태 활용:

  • 시즌성 PDF는 필요하지 않을 때 숨기세요.
  • 연결되어 있어도 표시/로딩을 줄이는 데 도움이 됩니다.
  • 필요할 때만 활성(Active)로 전환하세요.

PDF 내부 이미지 최적화

PDF에 넣기 전에 이미지부터 최적화:

  • 표시 크기에 맞게 리사이즈(큰 원본 그대로 사용하지 않기)
  • 이미지 압축(JPEG 품질 70~80% 권장)
  • 용도에 맞는 포맷 사용(사진=JPEG, 그래픽=PNG)

이미지는 꼭 필요한 만큼만:

  • 텍스트 위주 PDF가 가장 빠릅니다.
  • 이미지는 꼭 필요한 경우에만 넣으세요.
  • 가능하면 텍스트 대안을 고려하세요.

레이지 로딩(Lazy loading)

동작 방식:

  • 화면에 보일 때만 PDF가 로드됩니다.
  • 고객이 아래로 스크롤하면 로딩이 트리거됩니다.
  • 보지 않는 콘텐츠에 대한 데이터 사용을 줄입니다.

자동 적용:

  • PDF Connect는 기본적으로 레이지 로딩을 사용합니다.
  • 별도 설정이 필요 없습니다.
  • 버튼/임베디드 모두에 적용됩니다.

브라우저 캐시(Caching)

PDF는 캐시됩니다:

  • 첫 로딩은 시간이 걸릴 수 있습니다.
  • 재방문 시 캐시에서 로드되어 더 빠릅니다.
  • 재방문 고객에게 특히 유리합니다.

캐시 관련 유의사항:

  • 오래된 캐시 때문에 이전 PDF가 보일 수 있습니다.
  • 업데이트된 PDF도 빠르게 캐시됩니다.
  • 업데이트를 위한 캐시 무효화(cache busting)는 시스템에 내장되어 있습니다.

페이지 로딩 영향

페이지 속도 테스트:

  • Google PageSpeed Insights를 사용해 보세요.
  • PDF 추가 전/후를 비교하세요.
  • 영향이 최소가 되도록 조정하세요.

임베디드 뷰어는 영향이 더 클 수 있음:

  • 임베디드 뷰어가 많을수록 페이지가 무거워질 수 있습니다.
  • 점수를 중요하게 본다면 버튼 표시를 고려하세요.
  • 특히 홈페이지는 빠른 로딩이 중요합니다.

호스팅 및 전달(Delivery)

클라우드 전달:

  • PDF는 빠른 클라우드 스토리지에서 제공됩니다.
  • 전 세계에서 빠르게 접근할 수 있도록 CDN을 사용합니다.
  • 자동 최적화가 적용됩니다.

스토어 성능 페널티 최소화:

  • PDF가 Shopify 스토어 자체를 느리게 만들지 않습니다.
  • 스토어와 별도로 호스팅됩니다.
  • 플랜과 무관하게 빠르게 전달됩니다.

여러 PDF의 성능

버튼 표시는 확장성(Scale)이 더 좋습니다:

  • 버튼 10개 = 로딩 영향이 최소
  • 임베디드 뷰어 10개 = 체감 속도 저하 가능
  • 여러 PDF 페이지에서는 표시 방식을 신중히 선택하세요.

필요할 때만 로드:

  • 버튼은 클릭한 PDF만 로드합니다.
  • 대역폭 사용이 효율적입니다.
  • 고객이 필요한 것만 선택해 로드합니다.

성능 모니터링

정기 점검:

  • 월 1회 정도 페이지 로딩 속도를 테스트하세요.
  • 고객 피드백을 확인하세요.
  • 로딩이 느리다는 문의가 늘지 않는지 관찰하세요.

파일 용량 관리:

  • 가장 큰 PDF의 용량을 파악하세요.
  • 유독 큰 파일은 압축하세요.
  • (예: 5MB) 같은 내부 기준을 정해 운영할 수 있습니다.

느린 연결에서도 테스트:

  • 3G 속도로 시뮬레이션해 보세요.
  • 실제 모바일 데이터에서도 테스트하세요.
  • 최악의 상황(worst case)을 고려해 구성하세요.

빠른 최적화 체크리스트

업로드 전:

✅ 5MB 이하로 압축
✅ 이미지 품질을 150~200 DPI로 조정
✅ 빈 페이지/불필요한 페이지 제거
✅ 레이어 플래튼(Flatten) 처리
✅ 폰트 임베드 상태 확인
✅ 로딩 시간 테스트

업로드 후:

✅ 가능하면 버튼 표시 사용
✅ 페이지당 임베디드 뷰어 개수 제한
✅ 모바일 기기에서 테스트
✅ 페이지 로딩 속도 확인
✅ 고객 경험 모니터링

최적화 도구

PDF 압축:

  • Adobe Acrobat Pro
  • Smallpdf.com
  • PDF Compressor
  • Preview (Mac) - Export with Reduce File Size

이미지 압축:

  • TinyPNG
  • ImageOptim
  • Photoshop export for web
  • Squoosh.app

테스트 도구:

  • Google PageSpeed Insights
  • GTmetrix
  • WebPageTest
  • Browser DevTools

다음 단계