サイト表示の高速化にDNS-Prefetch,Preconnect,Prefetch,Prerender,Preloadを試す
目次
サイトの表示が遅いので、表示スピードを高速化する試行錯誤したり、他に方法はないかと調べていたら「Resource Hints（リソースヒント）」というのにたどり着きました。
Resource Hintsとは
- DNS-Prefetch ... DNSルックアップで名前解決を事前に行う
- Preconnect ... DNSルックアップと同時に事前接続をしておく
- Prefetch ... JSやCSSを先読みして取得（Preloadというのもある）
- Prerender ... 次に表示しそうなページを事前にレンダリングしておく
というものらしく以下のように<head>～</head>の間に書いておき、ページにアクセスがあったらページの表示と同時にAdSenseとかZenbackとか外部サイトの情報を事前に取得しておき、表示するときは予め取得しているので表示がサクッと済むというもののようです。
これを使えば速くなる？
実際に使ってみて結論から言うと、効果は大なり小なりありました。特にPrefetchはFont-Aewsomeのフォントや、jQuery.js、AdSense、Zenbackなどを使っている場合、あらかじめ使用する静的なJSやCSSがわかっている場合に限られますが、ページのHTMLを読み込んでいる間にそれらを事前に読み込むので、GTmetrixのWarerfallやChromeのNetworkタブでダウンロードの流れを見ると、同時並行でダウンロードしているのがわかります。
Resource Hints 使用前
GTmetrixのWarerfall
Resource Hints 使用後
GTmetrixのWarerfall
DNS-PrefetchとPreconnectもDNSルックアップやConnectingを事前に終わらせることができるので、指定したコンテンツの読み込み時間は0msにすることができました。
Resource Hintsに関する参考ページ
Prefetchに関する参考ページ
Preloadというのもある
Preloadは事前取得という意味ではPrefetchと同様の機能ですが違いがあります。これがまたスゴイ機能で対応しているブラウザだとかなり威力を発揮します。
- Prefetch ... ナビゲーションの前に動作する。
- Preload ... ナビゲーションが行われた後に動作する。
Preloadに関する参考ページ
ブラウザの対応状況
投稿時点の主なブラウザの対応状況。この時点での最新バージョンによるものです。
| Resource Hints | IE | Edge | Chrome | Firefox | Opera | Safari | Safari(iOS) | Android | |
| DNS-Prefetch | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 不明 | 不明 | 参照 |
| Preconnect | × | △ | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 参照 |
| Prefetch | 〇 | 〇 | 〇 | 〇 | 〇 | × | × | 〇 | 参照 |
| Prerender | 〇 | × | 〇 | × | 〇 | × | × | × | 参照 |
| Preload | × | △ | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 参照 |
上記の対応状況は以下のページで確認しています。「参照」をクリックすると各Resource Hintsの対応状況が見れます。
多用しすぎると評価が悪くなる？
高速化できる反面、多用しすぎるとスコアが悪くなりました。どのページにも共通して使用しているCSSやJSとJPEG・PNG・GIFなどの画像もPrefetchで先読みすると、速度は速くなってもスコアが悪くなりました。
たまたまかもしれませんが、GTmetrixで「A」または「B」だった評価が「C」とか「D」に...。Google Speed Insightでも「97」から「65」に...。
Resource Hints 使用前
Resource Hints 使用後
とにかく先読みできるものは全部先読みするようしたらスコアが悪くなりました。AdsenseやZenbackなどを使っているとあらゆるものが降ってくるので、そのせいかもしれませんが...。
よって、多用するのはDNS-PrefetchとPrecennectくらいにして、Prefetchは最低限のものだけの使用にした方がいいと思われます。それでもページ表示のスピードはあまり差がありませんでした。
スコアが悪くなった時のソース
とにかく他のページと共通するものは全部詰め込みました。jQuery、Font-Awesome、AdSense、Zenbackとか、スタイルシートも画像も。
<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="preconnect dns-prefetch" href="//qwerty.work"> <link rel="preconnect dns-prefetch" href="//ajax.cloudflare.com"> <link rel="preconnect dns-prefetch" href="//cdnjs.cloudflare.com"> <link rel="preconnect dns-prefetch" href="//cdn.jsdelivr.net"> <link rel="preconnect dns-prefetch" href="//pagead2.googlesyndication.com" > <link rel="preconnect dns-prefetch" href="//cse.google.com"> <link rel="preconnect dns-prefetch" href="//www.google-analytics.com"> <link rel="preconnect dns-prefetch" href="//w.zenback.jp"> <link rel="preconnect dns-prefetch" href="//graph.facebook.com"> <link rel="preconnect dns-prefetch" href="//b.haena.ne.jp"> <link rel="preconnect dns-prefetch" href="//jsoon.digitiminimi.com"> <link rel="preconnect dns-prefetch" href="//widgets.getpocket.com">
<link rel="dns-prefetch" href="//adservice.google.com"> <link rel="dns-prefetch" href="//googleads.g.doubleclick.net"> <link rel="dns-prefetch" href="//www.google.com"> <link rel="dns-prefetch" href="//www.googleapis.com"> <link rel="dns-prefetch" href="//www.googletagservices.com"> <link rel="dns-prefetch" href="//csi.gstatic.com"> <link rel="dns-prefetch" href="//s.wordpress.com">
<link rel="preload prefetch" as="style" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"> <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2" crossorigin> <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2" crossorigin> <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2" crossorigin> <link rel="preload prefetch" as="script" href="//w.zenback.jp/_p/js/jquery.min.js"> <link rel="preload prefetch" as="script" href="/include/function/fetch_sns_count.js">
<link rel="prefetch" as="style" href="/blog/styles.css"> <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/[email protected]/build/tables-min.css"> <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/@tehnoskarb/[email protected]/css/slimbox2.css"> <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/@gerhobbelt/[email protected]/keys.css"> <link rel="prefetch" as="style" href="//www.google.com/cse/static/style/look/v2/default.css">
<link rel="prefetch" as="script" href="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> <link rel="prefetch" as="script" href="//adservice.google.com/adsid/integrator.js?domain=qwerty.work"> <link rel="prefetch" as="script" href="//cse.google.com/adsense/search/async-ads.js"> <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css"> <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css"> <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"> <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"> <link rel="prefetch" as="script" href="//jsoon.digitiminimi.com/js/widgetoon.js">
<link rel="prefetch" as="script" href="//www.google-analytics.com/analytics.js"> <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/@tehnoskarb/[email protected]/js/autoload.js"> <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/@tehnoskarb/[email protected]/js/slimbox2.js"> <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/[email protected]/dist/echo.min.js"> <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js"> <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"> <link rel="prefetch" as="script" href="/blog/main.js">
<link rel="prefetch" as="image" href="/loading.gif"> <link rel="prefetch" as="image" href="/blog/images/default-userpic-90.jpg"> <link rel="prefetch" as="image" href="/blog/images/prof_own.png"> <link rel="prefetch" as="image" href="/blog/images/noimage-300.png"> <link rel="prefetch" as="image" href="/blog/images/icon-follow-facebook.png"> <link rel="prefetch" as="image" href="/blog/images/icon-follow-twitter.png"> <link rel="prefetch" as="image" href="/blog/images/icon-follow-feedly.png">
最終的に最低限に絞ったソース
とりあえず、PrefetchはFont-AwesomeのCSSをCDNから読み込むときにバックグラウンドで落ちてくるWEBフォント（woff2）とZenbackのJSから落ちてくるjquery.min.jsのみにしておきました。これ少し評価スコアは戻りました。
<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="preconnect dns-prefetch" href="//qwerty.work"> <link rel="preconnect dns-prefetch" href="//ajax.cloudflare.com"> <link rel="preconnect dns-prefetch" href="//cdnjs.cloudflare.com"> <link rel="preconnect dns-prefetch" href="//cdn.jsdelivr.net"> <link rel="preconnect dns-prefetch" href="//pagead2.googlesyndication.com" > <link rel="preconnect dns-prefetch" href="//cse.google.com"> <link rel="preconnect dns-prefetch" href="//www.google-analytics.com"> <link rel="preconnect dns-prefetch" href="//w.zenback.jp"> <link rel="preconnect dns-prefetch" href="//jsoon.digitiminimi.com"> <link rel="preconnect dns-prefetch" href="//graph.facebook.com"> <link rel="preconnect dns-prefetch" href="//b.haena.ne.jp"> <link rel="preconnect dns-prefetch" href="//widgets.getpocket.com">
<link rel="dns-prefetch" href="//adservice.google.com"> <link rel="dns-prefetch" href="//adservice.google.co.jp"> <link rel="dns-prefetch" href="//googleads.g.doubleclick.net"> <link rel="dns-prefetch" href="//tpc.googlesyndication.com"> <link rel="dns-prefetch" href="//clients1.google.com"> <link rel="dns-prefetch" href="//www.google.com"> <link rel="dns-prefetch" href="//www.googleapis.com"> <link rel="dns-prefetch" href="//www.googletagservices.com"> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link rel="dns-prefetch" href="//csi.gstatic.com"> <link rel="dns-prefetch" href="//s.wordpress.com">
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2" crossorigin> <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2" crossorigin> <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2" crossorigin> <link rel="preload prefetch" as="script" href="//w.zenback.jp/_p/js/jquery.min.js">
IEでは使えないPreload対策
既に開発が終了しているIE11ではPreloadが使えません。Preloadで指定したCSSを非同期で読み込ませたい場合の対策は以下のようにすればいいみたいです。onload="this.rel='stylesheet'"を加えます。
<link rel="preload" as="style" href="/index.css" onload="this.rel='stylesheet'">
複数のCSSをまとめて指定したい場合は以下のようにすればいいようです。
<link rel="preload" as="style" href="css/style.css"/>
<link rel="preload" as="style" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
<script>
$('link[as = "style"]').attr('rel','stylesheet');
</script>
参考ページ
大幅な高速化はできないけど効果あり
結局、、GTmetrixとGoogle Speed Insightの評価はResource Hintsを使用する前より悪くなりましたが、onload時間は以前よりたったの100ms前後ですが速くなった気がします。
WEBPAGETESTでは「A」と「B」の評価で割といい感じでした。
劇的なスピードアップはできませんが、効果はあるということで高速化の手段としては使えることがわかりました。
その他参考ページ