遅延読み込み

遅延読み込み（レイジーローディング）は、ユーザーが実際に必要とするまで非表示コンテンツの読み込みを延期するパフォーマンス最適化技術です。パブリケーションを最初に開いた際にすべての画像、ページ、アセットをダウンロードするのではなく、ユーザーがスクロールやナビゲーションで近づいた時にオンデマンドでリソースを取得します。ブラウザまたはビューアアプリケーションはすぐに表示されるものだけを読み込み、追加コンテンツをバックグラウンドで段階的に取得します。これにより初期ペイロードサイズが削減され、最初の有意義なインタラクションまでの時間が短縮され、長いドキュメントの最後までスクロールしない可能性のあるユーザーの帯域幅が節約されます。

読み込み時間が1秒増えるごとに、読者がレンダリング完了前にパブリケーションを離脱する確率が高まります。高解像度画像を含む数十から数百ページのデジタルフリップブックやドキュメントの場合、すべてを事前に読み込むと許容できない遅延が発生します — 特に帯域幅が限られたモバイルデバイスでは顕著です。遅延読み込みは、読者が最初に目にするコンテンツを優先し、それ以外をすべて延期することでこの問題を解決します。結果として、体感読み込み時間の高速化、直帰率の低下、Core Web Vitalsスコアの改善（特にLargest Contentful Paint）が実現し、パブリケーションを埋め込むページの検索エンジンランキングに直接影響します。

FlipLinkはフリップブックとドキュメントビューアの両方に自動的に遅延読み込みを適用します — 設定は不要です。読者がフリップブックを開くと、現在の見開きと直接隣接するページのみが読み込まれます。読者がページをめくると、次のページが必要になる前にバックグラウンドで読み込まれ、目に見える読み込み遅延なくスムーズな遷移を保証します。これは[ページエクスペリエンスとレイアウト](/features/page-experience-and-layout)エンジンによって処理され、Three.jsフリップブックビューアとPDF.jsドキュメントリーダーの両方のレンダリングを調整します。[カスタムローディングスクリーン](/features/custom-loading-screen)機能は初期アセットの読み込み中にブランド付きのスプラッシュを表示するため、読者は空白の画面ではなく洗練された体験を目にします。[埋め込みコード](/features/sharing-and-distribution)を通じて外部ウェブサイトに埋め込まれたフリップブックの場合、iframe自体も遅延読み込みされるため、訪問者がホストページのそのセクションまでスクロールするまでデータは取得されません。

FlipLinkの遅延読み込みは2つの異なるレベルで動作します： - **ページレベルの遅延読み込み** — フリップブック内では、ページは優先キューで読み込まれます。現在のページと各方向の次の2ページがすぐに読み込まれます。より離れたページはキューに入れられ段階的に読み込まれ、読者のナビゲーションに応じて優先順位が変わります。これにより、200ページのカタログをどれだけ素早くめくっても、次のページが常に準備されていることが保証されます。 - **埋め込みレベルの遅延読み込み** — フリップブックがウェブサイトに埋め込まれている場合、FlipLinkはiframe要素にブラウザのネイティブ`loading="lazy"`属性を使用し、古いブラウザ向けにIntersection Observerフォールバックを併用します。フリップブックビューア全体がビューポートに入るまで未読み込みのままとなり、埋め込まれたフリップブックがホストページの読み込み時間を遅くすることを防ぎます。 - **画像最適化** — 各ページ内の個々の画像はモダンフォーマット（対応している場合はWebP）で、ビューアの画面サイズに合わせた解像度で配信されます。これは遅延読み込みと連携して、コンテンツ取得後も帯域幅の消費を最小限に抑えます。 これらのレイヤーが組み合わさることで、300ページのパブリケーションが標準的な接続で最初の表示コンテンツを2秒以内に読み込むことが保証されます（合計ファイルサイズに関係なく）。

- **初期ページのアセットを軽量に保つ。** 遅延読み込みはコンテンツを延期しますが、最初に表示される見開きはすぐに読み込まれます。カバーと最初のページを圧縮画像で最適化することで、最速の第一印象を確保できます。 - **帯域制限された接続でテストする。** 高速Wi-Fiでスムーズに読み込まれるパブリケーションも、3Gモバイル接続では遅延読み込みの不備が露呈する可能性があります。テスト時にブラウザの開発者ツールで低速ネットワークをシミュレーションしてください。 - **事前読み込みページ数を過剰にしない。** 10ページ先まで事前読み込みすると、2ページ目で離脱する可能性のある読者の帯域幅を無駄にします。FlipLinkのデフォルトである2ページ先読みは、レスポンスの良さと効率性の適切なバランスを実現しています。 - **Core Web Vitalsを監視する。** フリップブックを埋め込んだ後、ホストページのLCPとCLSスコアを確認し、埋め込まれたビューアがレイアウトシフトやメインコンテンツの遅延を引き起こしていないことを確認してください。 - **ローディングスクリーンと組み合わせる。** ブランド付きの[カスタムローディングスクリーン](/features/custom-loading-screen)は、短い初期読み込み中に読者に見せるものを提供し、体感待ち時間を短縮しブランドを強化します。

**「遅延読み込みはコンテンツの読み込みが遅いという意味。」** 実際は逆です。遅延読み込みは、読者がまだ到達していないコンテンツを読み込まないことで、初期体験を高速化します。必要なコンテンツは通常の速度で読み込まれます — 多くの場合、ブラウザが数十の同時リクエストと競合しないため、むしろ高速になります。 **「遅延読み込みはSEOに悪影響。」** FlipLinkのビューア内で閲覧されるパブリケーションの場合、コンテンツはクローラーではなく読者のためにオンデマンドでレンダリングされます。遅延読み込みされた埋め込みiframeはページのLargest Contentful Paintメトリクスをブロックしないため、ホストページのSEOは実際に改善されます。 **「遅延読み込みは手動で設定する必要がある。」** FlipLinkでは、遅延読み込みはすべてのパブリケーションに自動的に適用されます。切り替える設定や構成するしきい値はありません — フリップブック形式でもドキュメントビューア形式でも、そのまま機能します。

遅延読み込みは、全ドキュメントが10ページであろうと500ページであろうと、その瞬間に必要なものだけを読み込み、それ以外をすべて延期することで、読者がパブリケーションの最初のページをほぼ瞬時に見られることを保証します。