rel前処理クラスリンク
前処理クラスリンクタグを使用すると、ブラウザを制御し、一部のリソースに対してこれらの操作を事前に実行して、パフォーマンスを向上させることができます。
リンクタイプの一覧表示：
- dns-prefetchタイプのリンクは、事前にドメイン名のdnsクエリを実行するため、リンク内のhrefは実際にはドメイン名に対してのみ意味があります。
- preconnect linkは、サーバーへのtcpリンクを事前に確立します
- プリフェッチタイプのリンクは、事前にhrefで指定されたURLのコンテンツを取得します
- プリロードタイプのリンクは、hrefで指定されたURLを事前にレンダリングします
- prerendnerリンクは、hrefで指定されたURLを事前にレンダリングします
予圧
一部のリソースは、ページが読み込まれた直後に必要になります。すぐに必要なリソースについては、ページの読み込みライフサイクルの早い段階で取得を開始し、ブラウザのメインレンダリングメカニズムが介入する前に事前に読み込むことをお勧めします。
このメカニズムにより、リソースを早期にロードして利用できるようになり、ページの初期レンダリングがブロックされる可能性が低くなるため、パフォーマンスが向上します。
preload 基本用例
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
preloadは、asを使用して、プリロードされたコンテンツのタイプを指定します。これにより、ブラウザは次のことが可能になります。
- リソースの読み込みの優先度をより正確に最適化する
- 将来の読み込み要件に一致し、適切な状況で同じリソースを再利用します
- リソースに正しいコンテンツセキュリティポリシーを適用する
- リソースの正しいAcceptリクエストヘッダーを設定します
オプションのパラメータとして
- オーディオ：オーディオファイル
- document：<frame>または<iframe>に埋め込まれるHTMLドキュメント
- embed：<embed>要素内に埋め込まれるリソース
- フェッチ：ArrayBufferやJSONファイルなど、フェッチおよびXHRリクエストを通じて取得されるリソース
- フォント：フォントファイル
- 画像：画像ファイル
- オブジェクト：<embed>要素に埋め込まれるファイル
- スクリプト：JavaScriptファイル
- スタイル：スタイルシート
- トラック：WebVTTファイル
- ワーカー：JavaScriptWebワーカーまたは共有ワーカー
- ビデオ：ビデオファイル
DNSプリフェッチ
DNSプリフェッチは、特定のURLを指定することにより、関連するリソースが将来使用されることをクライアントに通知します。これにより、ブラウザーはDNSをできるだけ早く解決できます。たとえば、example.comに画像またはビデオファイルが必要です。<head>には次のように書くことができます。
| 1 |
<linkrel = "dns-prefetch" href = "// example.com"> |
プリフェッチ
Webページが将来確実に特定のリソースを使用すると判断された場合、開発者はブラウザに事前に要求し、後で使用するためにキャッシュするように依頼できます。プリフェッチは、ブラウザでキャッシュできる画像、スクリプト、またはリソースのプリフェッチをサポートします。
| 1 |
<linkrel = "prefetch" href = "image.png"> |