サイト表示の高速化にDNS-Prefetch,Preconnect,Prefetch,Prerender,Preloadを試す

Sun, 03 Feb 2019 22:00:00 +0900

サイトの表示が遅いので、表示スピードを高速化する試行錯誤したり、他に方法はないかと調べていたら**「Resource Hints（リソースヒント）」**というのにたどり着きました。

Resource Hintsとは

DNS-Prefetch　…　DNSルックアップで名前解決を事前に行う
Preconnect　…　DNSルックアップと同時に事前接続をしておく
Prefetch　…　JSやCSSを先読みして取得（Preloadというのもある）
Prerender　…　次に表示しそうなページを事前にレンダリングしておく

というものらしく以下のように**～の間に書いておき、ページにアクセスがあったらページの表示と同時に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に関する参考ページ

https://qiita.com/ryo_hisano/items/e525616e5026b015aafe https://qiita.com/ryo_hisano/items/e525616e5026b015aafe

https://blog.jxck.io/entries/2016-02-11/resource-hints.html https://blog.jxck.io/entries/2016-02-11/resource-hints.html

https://www.keycdn.com/blog/resource-hints https://www.keycdn.com/blog/resource-hints

https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

https://developers.google.com/web/tools/lighthouse/audits/preload https://developers.google.com/web/tools/lighthouse/audits/preload

Prefetchに関する参考ページ

https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40 https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40

https://qiita.com/ryouhei156/items/c44a5e2f89fcffe0bd34 https://qiita.com/ryouhei156/items/c44a5e2f89fcffe0bd34

Preloadというのもある

Preloadは事前取得という意味ではPrefetchと同様の機能ですが違いがあります。これがまたスゴイ機能で対応しているブラウザだとかなり威力を発揮します。

Prefetch　…　ナビゲーションの前に動作する。
Preload　…　ナビゲーションが行われた後に動作する。

Preloadに関する参考ページ

https://blog.jxck.io/entries/2016-03-04/preload.html https://blog.jxck.io/entries/2016-03-04/preload.html

ブラウザの対応状況

投稿時点の主なブラウザの対応状況。この時点での最新バージョンによるものです。

  Resource Hints
  IE
  Edge
  Chrome
  Firefox
  Opera
  Safari
  Safari(iOS)
  Android
   




  DNS-Prefetch
  〇
  〇
  〇
  〇
  〇
  〇
  不明
  不明
  [参照](https://caniuse.com/#search=DNS-Prefetch)


  Preconnect
  ×
  △
  〇
  〇
  〇
  〇
  〇
  〇
  [参照](https://caniuse.com/#search=Preconnect)


  Prefetch
  〇
  〇
  〇
  〇
  〇
  ×
  ×
  〇
  [参照](https://caniuse.com/#search=Prefetch)


  Prerender
  〇
  ×
  〇
  ×
  〇
  ×
  ×
  ×
  [参照](https://caniuse.com/#search=Prerender)


  Preload
  ×
  △
  〇
  〇
  〇
  〇
  〇
  〇
  [参照](https://caniuse.com/#search=preload)

上記の対応状況は以下のページで確認しています。「参照」をクリックすると各Resource Hintsの対応状況が見れます。

https://caniuse.com/#search=DNS-Prefetch https://caniuse.com/#search=DNS-Prefetch

多用しすぎると評価が悪くなる？

高速化できる反面、多用しすぎるとスコアが悪くなりました。どのページにも共通して使用している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">
<br>
  <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"><br>
  <link rel="preload prefetch" as="style" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">
  <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2" crossorigin>
  <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
  <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/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"><br>
  <link rel="prefetch" as="style" href="/blog/styles.css">
  <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css">
  <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css">
  <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css">
  <link rel="prefetch" as="style" href="//www.google.com/cse/static/style/look/v2/default.css"><br>
  <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/jquery@3.3.1/dist/jquery.min.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/jquery@1.11.0/dist/jquery.min.js">
  <link rel="prefetch" as="script" href="//jsoon.digitiminimi.com/js/widgetoon.js"> <br>
  <link rel="prefetch" as="script" href="//www.google-analytics.com/analytics.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/js/autoload.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/js/slimbox2.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/echo-js@1.7.3/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"><br>
  <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">
<br>
<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">
<br>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/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"/><span class="brush:xml;">
<link rel="preload" as="style" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">
</span><script>
	$('link[as = "style"]').attr('rel','stylesheet');
</script>