有効な link rel preload タグを作ります

ウェブチームが重要なリソースを先に読み込ませ、不要なプリロードで通信量を浪費せず優先順位を付けたいときに使えます。

有効な link rel preload タグを作ります。入力内容を外部へ送らず、確認やコピー、調整がしやすい実用的な結果をブラウザー内だけで作成できます。

使い方

1行に1つのリソースを列挙します。たとえば、フォントファイルや重要な画像です。
ページが要求する正確なパスを使用します。
ジェネレーターを実行して、link rel preloadタグを作成します。
それらのタグを、他の優先リソースより前にhead内へ挿入します。

使用例

チームが、タイトル用フォントの到着が遅れてレイアウトがずれることに気づきます。ページで使用されているフォントファイルを列挙し、preloadタグを生成してheadに配置します。これにより、サイト上のすべてのアセットをプリロードするのを避けられます。その後、低速ネットワークでのテストで、フォントの優先度が有用かどうかを確認します。

入力

/assets/font.woff2
/assets/hero.webp

制限と形式

プリロードは、本当に重要なごく少数のリソースにのみ有用です。
パスが正しくないと、ブラウザがファイルを見つけられません。
タグが多すぎると、他の有用な要素を遅らせる可能性があります。
このツールは、リソースがすでにキャッシュされているかどうかを確認しません。
ブラウザは、不要または不正な形式のプリロードを無視する場合があります。

処理の場所

入力したパスはブラウザ内でタグに変換されます。ファイルは送信されず、ツールがネットワーク呼び出しを発生させることもありません。生成されたコードはコピーできる状態で保持されます。

よくある質問

どのリソースをプリロードすべきですか？

プリロードは、見出し用フォントやヒーロー画像など、最初のレンダリングに必要なファイルに限定してください。あまりに多くの項目をプリロードすると、優先度のシグナルが弱まります。変更が役立つかどうかはブラウザツールで確認してください。

これは遅延読み込みとどう違いますか？

プリロードは、ブラウザにリソースをより早く取得するよう求めます。遅延読み込みは、まだ必要でないリソースを遅らせます。これらは反対の問題を解決するもので、異なるアセットに使用すべきです。

外部フォントをプリロードできますか？

設定に応じて相対パスまたは絶対パスを入力できます。ページが実際に配信するファイルと一致していることを確認してください。クロスオリジンやセキュリティの規則が、ブラウザによる使用方法に影響する場合があります。