スクラップ

詳細

google fontを使用する際、以下のように記述をする。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap" rel="stylesheet">

ここで、rel="preconnect"はリンクとサーバとの接続を確立する処理を事前に行うことで高速化をする設定である。

<link> に rel=preconnect を追加すると、ページが別のドメインへの接続を確立する予定であり、そのプロセスをできるだけ早く開始することをブラウザに通知します。ブラウザがリソースをリクエストする時点で設定プロセスが完了しているため、リソースの読み込みが速くなります。

googleapisとgstaticの2つを preconnect することによって、これら二つの connecting が並列で行われるため逐次的に処理するのと比べて高速化できる。

ユースケース

• フェッチする内容は不明だが、どこからフェッチするかはわかる
  • 特定のCDNからリクエストすることがわかっても、正確なパスがわからない場合がある
• 画像CDNから画像を読み込む場合
  • ユーザーのメディアクエリまたはランタイム機能チェックによって画像の正確なパスが変わる

参考

• ネットワーク接続を早期に確立して、認識されるページ速度を改善する
• rel=“preconnect”

詳細

上記の著作権表示および本許諾表示を、ソフトウェアの全ての複製または実質的な部分に記載するものとします。

MITライセンスの製品を使用する際は、著作権表示と許諾表示を必ず記載する必要があることに気をつける。

著作権表示は以下の形式のもの。

© [初回バージョンの公開年] [著作権者の氏名]

許諾表示は、MITライセンスはこういうものだという説明の定型文を記載する。全文の代わりに全文を記載しているリンクを記載するのでも良さそう。

参考

• The MIT License
• MITライセンスです