Hints(リソースヒント)」というのにたどり着きました。次に表示しそうなページを事前にレンダリングしておくというものらしく以下のように<head>~</head>の間に書いておき、ページにアクセスがあったらページの表示と同時にAdSenseとかZenbackとか外部サイトの情報を事前に取得しておき、表示するときは予め取得しているので表示がサクッと済むというもののようです。これを使えば速くなる?実際に使ってみて結論から言うと、効果は大なり小なりありました。PrefetchはFont-Aewsomeのフォントや、jQuery.js、AdSense、Zenbackなどを使っている場合、あらかじめ使用する静的なJSやCSSがわかっている場合に限られますが、ページのHTMLを読み込んでいる間にそれらを事前に読み込むので、GTmetrixのWarerfallやChromeのNetworkタブでダウンロードの流れを見ると、同時並行でダウンロードしているのがわかります。使用後GTmetrixのWarerfallDNS-PrefetchとPreconnectもDNSルックアップやConnectingを事前に終わらせることができるので、指定したコンテンツの読み込み時間は0msにすることができました。qiitahttps://qiita.com/ryouhei156/items/c44a5e2f89fcffe0bd34PreloadというのもあるPreloadは事前取得という意味ではPrefetchと同様の機能ですが違いがあります。これがまたスゴイ機能で対応しているブラウザだとかなり威力を発揮します。ナビゲーションの前に動作する。ナビゲーションが行われた後に動作する。投稿時点の主なブラウザの対応状況。この時点での最新バージョンによるものです。上記の対応状況は以下のページで確認しています。Hintsの対応状況が見れます。etchttps://caniuse.com/#search=DNS-Prefetch多用しすぎると評価が悪くなる?高速化できる反面、多用しすぎるとスコアが悪くなりました。どのページにも共通して使用しているCSSやJSとJPEG・PNG・GIFなどの画像もPrefetchで先読みすると、速度は速くなってもスコアが悪くなりました。しれませんが、GTmetrixで「A」または「B」だった評価が「C」とか「D」に...。Insightでも「97」から「65」に...。使用後とにかく先読みできるものは全部先読みするようしたらスコアが悪くなりました。AdsenseやZenbackなどを使っているとあらゆるものが降ってくるので、そのせいかもしれませんが...。よって、多用するのはDNS-PrefetchとPrecennectくらいにして、Prefetchは最低限のものだけの使用にした方がいいと思われます。それでもページ表示のスピードはあまり差がありませんでした。スコアが悪くなった時のソースとにかく他のページと共通するものは全部詰め込みました。jQuery、Font-Awesome、AdSense、Zenbackとか、スタイルシートも画像も。href="/blog/images/icon-follow-feedly.png">最終的に最低限に絞ったソースとりあえず、PrefetchはFont-AwesomeのCSSをCDNから読み込むときにバックグラウンドで落ちてくるWEBフォント(woff2)とZenbackのJSから落ちてくるjquery.min.jsのみにしておきました。これ少し評価スコアは戻りました。開発が終了しているIE11ではPreloadが使えません。Preloadで指定したCSSを非同期で読み込ませたい場合の対策は以下のようにすればいいみたいです。onload="this.rel='stylesheet'"を加えます。onload="this.rel='stylesheet'">複数のCSSをまとめて指定したい場合は以下のようにすればいいようです。Hintsを使用する前より悪くなりましたが、onload時間は以前よりたったの100ms前後ですが速くなった気がします。WEBPAGETESTでは「A」と「B」の評価で割といい感じでした。劇的なスピードアップはできませんが、効果はあるということで高速化の手段としては使えることがわかりました。(30)このサイトについてパソコンのことをいろいろメモしています。InsightsQwerty.Workについてこのブログは個人が運営しているサイトです。Qwerty.Work。