パフォーマンス最適化のヒ ント
PDFを最適化して読み込みを速くし、顧客体験を向上させましょう。
PDFファイルサイズを最適化する
目安は5MB未満:
- 5MB未満は読み込みが速いです
- お客様は大きなダウンロードを待ってくれません
- 特にモバイルでは小さいファイルが重要です
PDFを圧縮する:
- 圧縮ツールを使います
- 画像の解像度を 150〜200 DPI に下げます
- 不要な埋め込みフォントを削除します
- レイヤーを統合（フラット化）します
不要な内容を削る:
- 空白ページを削除します
- 非表示レイヤーを削除します
- 使っていない図版を削除します
- 埋め込み画像を圧縮します
表示スタイルを選ぶ
ボタン表示 = 速い:
- ページはすぐ表示されます
- PDFはクリックされたときだけ読み込まれます
- モバイルに向いています
- 複数PDFに向いています
埋め込みビューア = 遅くなりやすい:
- PDFがページと同時に読み込まれます
- ビューア初期化を待つ必要があります
- 画面スペースを大きく使います
- ページ読み込みが遅くなることがあります
速度を優先したい場合は、ボタン表示をおすすめします。
モバイル向けに最適化する
ファイルを小さく保つ:
- モバイル回線は遅いことがあります
- 大きいファイルは離脱の原因になります
- モバイルは 3MB 未満が理想です
実機でテストする:
- ブラウザのシミュレーションだけでなく実機で確認しましょう
- 4G / 5G でも試しましょう
- 遅い回線でもテストしましょう
ボタン表示を使う:
- 埋め込み表示はモバイルで窮屈になりがちです
- ボタンは小さい画面でも使いやすいです
- ポップアップなら全画面で閲覧できます
1ページあたりのPDF数を絞る
少ないほど速い:
- 埋め込み表示では、PDF が増えるほど読み込みが増えます
- 1ページあたり 1〜3件が理想です
- 5件を超えると大きく遅くなる場合があります
関連内容をまとめる:
- 小さいPDFを多数ではなく、1つのまとまったPDFにする
- 読み込むファイル数を減らせます
- お客様が情報を見つけやすくなります
Inactive（無効）を活用する:
- 季節ものは不要な期間は非表示にできます
- リンクされていても、表示負荷を抑えられます
- 必要なときだけ Active にしましょう
PDF内の画像を最適化する
PDFに入れる前に画像を最適化する:
- 表示サイズに合わせてリサイズします（大きい元画像は避ける）
- 画像を圧縮します（JPEGなら品質 70〜80% 目安）
- 用途に合った形式にします（写真はJPEG、図版はPNGなど）
画像を入れすぎない:
- テキスト中心のPDFが最も速いです
- 画像は必要なものだけにしましょう
- 代替としてテキスト説明も検討しましょう
遅延読み込み（Lazy loading）
仕組み:
- 画面上で表示領域に入ったときだけPDFを読み込みます
- 下へスクロールすると読み込みが始まります
- 見ていない内容の通信量を削減できます
自動で有効:
- PDF Connect はデフォルトで遅延読み込みを利用します
- 特別な設定は不要です
- どちらの表示スタイルでも動作します
ブラウザキャッシュ
PDFはキャッシュされます:
- 初回表示は時間がかかることがあります
- 2回目以降はキャッシュから読み込まれます
- リピーターのお客様はより速く表示できます
キャッシュ削除は注意:
- 古いPDFがキャッシュで表示される場合があります
- 更新したPDFは通常すぐに新しい内容がキャッシュされます
- 更新時のキャッシュ更新（cache busting）は仕組みとして用意されています
ページ速度への影響
ページ速度をテストする:
- Google PageSpeed Insights を使います
- PDFを 追加する前後で比較します
- 影響を最小に抑えるのが目標です
埋め込みビューアは影響が大きい:
- 埋め込みビューアが増えるほど重くなります
- スコアを重視するならボタン表示も検討してください
- 特にホームページは高速表示が重要です
ホスティングと配信
クラウド配信:
- PDFは高速なクラウドストレージから配信されます
- グローバルCDNにより世界中から素早くアクセスできます
- 自動最適化が行われます
ストアに大きな負担をかけない:
- PDFが原因でストア自体が大きく遅くなることはありません
- ストアとは別にホストされます
- プランに関係なく高速に配信されます
複数PDF時のパフォーマンス
ボタン表示の方がスケールしやすい:
- ボタン10個 = 読み込みへの影響が小さい
- 埋め込み10個 = 大幅に遅くなる可能性が高い
- 複数PDFのページでは表示スタイルを慎重に選びましょう
必要なときだけ読み込む:
- ボタンはクリックされたPDFだけを読み込みます
- 通信量を最適化できます
- お客様が読み込む内容を選べます
パフォーマンスを監視する
定期的に確認する:
- 月1回など定期的にページ速度を測定しましょう
- お客様のフィードバックを確認しましょう
- 「読み込みが遅い」という声がないか注意しましょう
ファイルサイズを把握する:
- 最大サイズのPDFがどれか把握しましょう
- 大きすぎるものは圧縮しましょう
- 上限ルール（例: 5MB）を決めるのも有効です
遅い回線でテストする:
- 3G相当の速度をシミュレートする
- 実際のモバイル回線で試す
- 最悪ケースも想定する
最適化チェックリスト
アップロード前:
✅ 5MB未満に圧縮する
✅ 画像の解像度を 150〜200 DPI に下げる
✅ 空白/不要なページを削除する
✅ レイヤーを統合（フラット化）する
✅ フォントを適切に埋め込む
✅ 読み込み時間をテストする
アップロード後:
✅ 可能ならボタン表示を使う
✅ 1ページあたりの埋め込みビューア数を制限する
✅ モバイル端末でテストする
✅ ページ速度を確認する
✅ 顧客体験をモニタリングする
最適化に使えるツール
PDF compression:
- Adobe Acrobat Pro
- Smallpdf.com
- PDF Compressor
- Preview (Mac) - Export with Reduce File Size
Image compression:
- TinyPNG
- ImageOptim
- Photoshop export for web
- Squoosh.app
Testing tools:
- Google PageSpeed Insights
- GTmetrix
- WebPageTest
- Browser DevTools