Resource Hintsの役割と効果|高速化やSEOに役立つ #技術メモ
最近ブログを書く時間がなかったり、億劫になってしまいました。
そこでリハビリを兼ねてnoteで技術メモを書いていきます。
エンジニアをやっていると毎日発見があります。
あくまで技術メモなので詳細の内容はブログに書いていきます。
基本、冗長な記事は好きではないのですがどうしてもブログは文字数がものをいうので...
と前置きが長くなりましたが今回はResource Hintsの記事です。
技術メモなのでこの記事では完結しないですが、最低限の共有情報や調べたサイトは載せるので囲い込みの記事よりもある意味充実しているかもしれませんw
これは私のブログです。
Resource Hintsとは?
だれにhints出しているかというとブラウザへです。
ブラウザにこのリソースは早く読み込め、これは事前に読み込め等々命令を出すのがリソースヒントです。
こんな感じでhtmlで記述していきます。
<link href="//atm.im-apps.net" rel="preconnect">
Prefetch
将来読む込むリソースをキャッシュする。
何らかのcss,imageのリソースに使用するとよし。
Prerender
次のページの全体の事前読み込み。1ページだけに使用する。
お問い合わせページのsubmit後に飛ぶページなど次が決まっているページ使うと有意義。
次のページ分まで読み込むのでその分現在のページでは重くなる。
Preconnect
ホストまで読み込み。preconnectを使うときはdns-prefetchは不要。
じゃあ、dns-prefetchだけ使えばいいじゃない?っと考えたくなります。
厳密に言ったらブラウザごとの対応状況が違うためよろしくやる必要があります。
dnsやらレンダリングやら調べるのに有意義なサイト
リソースヒントの勉強参考サイト
この記事が気に入ったらサポートをしてみませんか?