Quicklink
Google Chrome LabsのQuicklinkライブラリを統合し、アイドル時間中に表示されているリンクをプリフェッチすることで、体感ページ読み込みパフォーマンスを向上させます。
quicklink
インストール
composer require 'drupal/quicklink:^2.0'
概要
Quicklinkモジュールは、Google Chrome Labsが開発したQuicklink JavaScriptライブラリをDrupalに統合します。QuicklinkはIntersection Observer APIを使用して、ユーザーのビューポート内にあるリンクを検出し、ブラウザのアイドル時間中にプリフェッチします。このプリフェッチ技術により、ユーザーがクリックする前に次のページのリソースを準備しておくことで、体感ページ読み込みパフォーマンスが大幅に向上します。
このモジュールは、どのリンクをプリフェッチすべきか、いつライブラリを読み込むべきか、リソース使用量を制御するための様々なスロットリングオプションを設定するための包括的な管理インターフェースを提供します。管理パス、AJAXリンク、ハッシュリンク、ファイルダウンロードなどのエッジケースをインテリジェントに処理し、不要なプリフェッチを防ぎます。
デフォルトでは、匿名ユーザーに対して最適なパフォーマンスが得られるように設定されており、管理パス、AJAXリンク、ハッシュフラグメント、ファイル拡張子は自動的に無視されます。モジュールはQuicklinkライブラリをCDNから読み込むか、より良いパフォーマンスのためにローカルにホストされたコピーから読み込むことができます。
Features
- Intersection Observer APIを使用した表示されているリンクの自動プリフェッチ
- URL、セレクタ、管理パス、AJAXリンク、ハッシュフラグメント、ファイル拡張子に対する設定可能な無視パターン
- コンテンツタイプごとのライブラリ読み込み制御
- アクティブなPHPセッション中に無効化できるセッション対応プリフェッチ
- リクエスト制限、同時実行制限、ビューポート遅延、アイドルタイムアウト設定を含むスロットル制御
- 他のすべての設定を上書きする特定パスのみプリフェッチのサポート
- 設定可能な許可ドメインによるクロスドメインプリフェッチのサポート
- 古いブラウザ（IE11）向けのIntersection Observerポリフィルサポート
- 開発用の視覚的インジケーターとコンソールログを備えたデバッグモード
- ローカルライブラリが利用できない場合の自動CDNフォールバック
Use Cases
高トラフィックのコンテンツサイト
ニュースやブログサイトで匿名ユーザーのみにQuicklinkを有効にすると、読者が記事間を閲覧する際の体感ページ読み込み時間が大幅に向上します。ライブラリはビューポート内に表示されている記事リンクをプリフェッチし、その後のページナビゲーションを瞬時に感じさせます。
ECサイトの商品カタログ
ショッピングサイトでセッション認識を無効にしてQuicklinkを設定します。「セッション中はプリフェッチしない」オプションと組み合わせることで、ユーザーがカートに商品を入れているときのプリフェッチを回避し、不要なサーバー負荷を防ぎます。
限られたナビゲーションのランディングページ
「これらのパスのみプリフェッチ」機能を使用して、ランディングページからプリフェッチするページを正確に指定し、コンバージョンに重要なページのみをプリロードしながら、他のサイトナビゲーションを無視します。
マルチドメインDrupalインストール
「許可ドメインをオーバーライド」設定を構成して、同じDrupalインストールで提供される複数のドメイン間のクロスドメインプリフェッチを有効にし、関連サイト間のナビゲーションを改善します。
帯域幅を意識したモバイル最適化
スロットルオプションを使用して同時リクエストと総プリフェッチ数を制限し、モバイルユーザーのデータ使用量を削減しながらパフォーマンスの利点を提供します。
開発とデバッグ
デバッグモードを有効にして、どのリンクが無視されているかとその理由を視覚的に特定します。無視されたリンクは🚫絵文字でマークされ、ホバーするとマッチしたルールが表示されます。コンソールログは詳細な設定と無視情報を提供します。
Tips
- 不要なプリフェッチと潜在的な副作用を防ぐため、本番環境では常に管理パスとAJAXリンクを無視してください
- 開発中にデバッグモードを使用して、どのリンクがプリフェッチされ、他のリンクがなぜ無視されているかを理解してください
- 最高のパフォーマンスを得るには、CDNを使用するのではなく、Quicklinkライブラリをローカルにホストしてください
- 多くのリンクがあるページでは、サーバーの過負荷を防ぐために、リクエスト制限と同時実行スロットルオプションの使用を検討してください
- デバッグのためにQuicklinkを一時的に無効にするには、任意のURLに「noprefetch」URLパラメータまたは「#noprefetch」ハッシュを追加できます
- 「noprefetch」または「download」HTML属性を持つリンクは自動的に無視されます
- 最大のパフォーマンス効果を得るには、ブラウザキャッシュとCDN戦略と組み合わせてください
Technical Details
Admin Pages 1
/admin/config/development/performance/quicklink
サイトでQuicklinkライブラリがリンクをプリフェッチする方法を設定します。このページでは、どのリンクをプリフェッチするか、いつライブラリを読み込むか、様々なパフォーマンススロットリング設定を制御するための包括的なオプションが提供されます。
Hooks 2
hook_library_info_build
quicklinkライブラリ定義を動的に構築し、ローカルファイルの存在を確認して見つからない場合はCDNにフォールバックします。
hook_preprocess_html
現在の設定、ユーザー認証状態、セッション状態、コンテンツタイプに基づいて、Quicklinkライブラリと設定をページにアタッチします。
Troubleshooting 7
/libraries/quicklink/dist/quicklink.umd.jsにローカルライブラリが存在するか、CDN（unpkg.com）にアクセスできるか確認してください。ステータスレポートページにライブラリの場所に関する警告が表示されます。
https://unpkg.com/quicklink@2.3.0/dist/quicklink.umd.jsから正しいバージョン（2.3.0）のQuicklinkライブラリをダウンロードし、/libraries/quicklink/dist/quicklink.umd.jsに配置してください。
「匿名ユーザーのみプリフェッチ」設定を確認してください。デフォルトでは、ライブラリは匿名ユーザーにのみ読み込まれます。
デバッグモードを有効にして、どのルールがマッチしているか確認してください。無視リストに特定のURLパターンまたはCSSセレクタを追加してください。
「これらのコンテンツタイプではライブラリを読み込まない」チェックボックスを確認して、そのコンテンツタイプが除外されていないことを確認してください。
Quicklinkライブラリのバージョン2.xを実行していることを確認してください。バージョン1.xは異なるAPIを持ち、互換性がありません。
「セッション中はプリフェッチしない」オプションを有効にして、PHPセッションがアクティブなときのプリフェッチを無効にしてください。
Security Notes 4
- 誤ったセッション終了を防ぐため、ログアウトリンク（/user/logout）は常に無視されます
- 管理アクションのプリフェッチを防ぐため、管理パスはデフォルトで無視されます
- クロスドメインプリフェッチはデフォルトで無効になっており、明示的に設定する必要があります
- セッション対応プリフェッチは、機密性の高いユーザー固有のコンテンツのプリフェッチを防ぐのに役立ちます