Resource Hintsの役割と効果|高速化やSEOに役立つ #技術メモ

2021年7月23日 16:52

最近ブログを書く時間がなかったり、億劫になってしまいました。

そこでリハビリを兼ねてnoteで技術メモを書いていきます。

エンジニアをやっていると毎日発見があります。

あくまで技術メモなので詳細の内容はブログに書いていきます。

基本、冗長な記事は好きではないのですがどうしてもブログは文字数がものをいうので...

と前置きが長くなりましたが今回はResource Hintsの記事です。

技術メモなのでこの記事では完結しないですが、最低限の共有情報や調べたサイトは載せるので囲い込みの記事よりもある意味充実しているかもしれませんｗ

これは私のブログです。

Resource Hintsとは？

だれにhints出しているかというとブラウザへです。

ブラウザにこのリソースは早く読み込め、これは事前に読み込め等々命令を出すのがリソースヒントです。

こんな感じでhtmlで記述していきます。

<link href="//atm.im-apps.net" rel="preconnect">

将来読む込むリソースをキャッシュする。

何らかのcss,imageのリソースに使用するとよし。

次のページの全体の事前読み込み。１ページだけに使用する。

お問い合わせページのsubmit後に飛ぶページなど次が決まっているページ使うと有意義。

次のページ分まで読み込むのでその分現在のページでは重くなる。

ホストまで読み込み。preconnectを使うときはdns-prefetchは不要。

じゃあ、dns-prefetchだけ使えばいいじゃない？っと考えたくなります。

厳密に言ったらブラウザごとの対応状況が違うためよろしくやる必要があります。

この記事が気に入ったらサポートをしてみませんか？