htmx プリロード拡張機能

preload 拡張機能を使用すると、ユーザーがリクエストする前に HTML フラグメントをブラウザのキャッシュにロードできるため、追加ページがほぼ瞬時にロードされたように見えます。開発者は、アプリケーションのニーズとユースケースに合わせて動作をカスタマイズできます。

重要：コンテンツを適切にプリロードすると、Web アプリケーションの体感パフォーマンスが向上しますが、リソースをプリロードしすぎると、使用されないリクエストが多すぎるため、訪問者の帯域幅とサーバーのパフォーマンスに悪影響を及ぼす可能性があります。この拡張機能は慎重に使用してください！

インストール

<script src="https://unpkg.com/htmx-ext-preload@2.0.1/preload.js"></script>

使用方法

hx-ext 属性を使用して拡張機能を htmx に登録します。次に、プリロードするハイパーリンクと hx-get 要素に preload 属性を追加します。デフォルトでは、リソースは mousedown イベントが開始されるとすぐにロードされ、アプリケーションは約 100〜200 ミリ秒の応答時間を短縮できます。その他のオプションについては、以下の設定を参照してください。


<body hx-ext="preload">
<h1>What Works</h2>
    <a href="/server/1" preload>WILL BE requested using a standard XMLHttpRequest() and default options (below)</a>
    <button hx-get="/server/2" preload>WILL BE requested with additional htmx headers.</button>

    <h1>What WILL NOT WORK</h1>
    <a href="/server/3">WILL NOT be preloaded because it does not have an explicit "preload" attribute</a>
    <a hx-post="/server/4" preload>WILL NOT be preloaded because it is an HX-POST transaction.</a>
</body>

プリロード設定の継承

複数の <a href=""> または hx-get="" 要素を含むトップレベル要素に preload 属性を追加すると、すべてがプリロードされます。必要なリソースよりもはるかに多くのリソースをプリロードすると帯域幅を浪費する可能性があるため、この設定には注意してください。


<body hx-ext="preload">
<ul preload>
    <li><a href="/server/1">This will be preloaded because of the attribute in the node above.</a>
    <li><a href="/server/2">This will also be preloaded for the same reason.</a>
    <li><a href="/server/3">This will be preloaded, too. Lorem ipsum.</a>
</ul>
</body>

リンクされた画像のプリロード

HTML ページ（またはページフラグメント）がプリロードされた後、この拡張機能はリンクされた画像リソースもプリロードできます。プリロードされた HTML にリンクされているか埋め込まれているかに関係なく、リンクされた Javascript またはカスケーディングスタイルシートのコンテンツはロードまたは実行されません。画像もプリロードするには、次の構文を使用します。


<div hx-ext="preload">
    <a href="/my-next-page" preload="mouseover" preload-images="true">Next Page</a>
</div>

設定

この拡張機能のデフォルトは、ユーザーの体感パフォーマンスと、使用されないリクエストによるサーバーへの潜在的な負荷のバランスを取るように選択されています。開発者は、2 つの設定を変更して、この動作を特定のユースケースに合わせてカスタマイズできます。

preload=“mousedown”（デフォルト）

この拡張機能のデフォルトの動作は、ユーザーがマウスを押したときにリソースのロードを開始することです。これは、ユーザーが実際にリンクされたリソースを使用することを意図していることを保証する保守的な設定です。ユーザーのクリックイベントは通常、完了するまでに 100〜200 ミリ秒かかるため、この設定により、通常のクリックと比較してサーバーに大きな先行開始が与えられます。

<a href="/server/1" preload="mousedown">This will be preloaded when the user begins to click.</a>

preload=“mouseover”

より積極的にリンクをプリロードするには、ユーザーのマウスがリンクの上にカーソルを合わせたときにプリロードがトリガーされるようにすることができます。ユーザーがスクロールしたり、オブジェクトの大きなリストにマウスを移動したりしたときに多くのリソースがロードされないようにするために、このアクションには 100 ミリ秒の遅延が組み込まれています。このタイムアウトが期限切れになる*前*にユーザーのマウスが要素から離れると、リソースはプリロードされません。

一般的なユーザーは、クリックする前に数百ミリ秒間リンクの上にカーソルを合わせます。これにより、上記の mousedown オプションよりもサーバーがリクエストに応答する時間が長くなります。独自のホバータイミングをここでテストしてください。。ただし、このオプションを使用すると、不必要にリソースをリクエストすることでサーバーの負荷が増加する可能性があるため、注意してください。

<a href="/server/1" preload="mouseover">This will be preloaded when the user's mouse remains over it for more than
    100ms.</a>

preload=“custom-event-name”

プリロードは、システム内のカスタムイベントをリッスンし、（ブラウザによってまだキャッシュされていない場合）リソースのプリロードをトリガーすることもできます。拡張機能自体は、オブジェクトが htmx によって処理されるとすぐにプリロードをトリガーするために使用できる preload:init というイベントを生成します。


<body hx-ext="preload">
<button hx-get="/server" preload="preload:init" hx-target="idLoadMore">Load More</a>
    <div id="idLoadMore">
        Content for this DIV will be preloaded as soon as the page is ready.
        Clicking the button above will swap it into the DOM.
    </div>
</body>

タッチイベントについて

タッチスクリーンデバイスに対応するために、mouseover または mousedown トリガーを指定するたびに、追加の ontouchstart イベントハンドラーが追加されます。この追加トリガーは、ユーザーが画面に触れるたびにすぐに（待機期間なしで）起動し、Android では 300 ミリ秒、iOS では 450 ミリ秒の待機時間を節約できます。

制限事項

クレジット

このプラグインの動作は、MIT ライセンスでリリースされている InstantClick に対する Alexandre Dieulot 氏の功績に影響を受けています。