성능(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