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

目次

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

Resource Hintsとは

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

というものらしく以下のように<head>~</head>の間に書いておき、ページにアクセスがあったらページの表示と同時にAdSenseとかZenbackとか外部サイトの情報を事前に取得しておき、表示するときは予め取得しているので表示がサクッと済むというもののようです。

これを使えば速くなる?

実際に使ってみて結論から言うと、効果は大なり小なりありました。特にPrefetchFont-Aewsomeのフォントや、jQuery.jsAdSenseZenbackなどを使っている場合、あらかじめ使用する静的なJSやCSSがわかっている場合に限られますが、ページのHTMLを読み込んでいる間にそれらを事前に読み込むので、GTmetrixWarerfallChromeNetworkタブでダウンロードの流れを見ると、同時並行でダウンロードしているのがわかります。

Resource Hints 使用前

GTmetrixWarerfall

Resource Hints 使用後

GTmetrixWarerfall

DNS-PrefetchPreconnectDNSルックアップConnecting事前に終わらせることができるので、指定したコンテンツの読み込み時間は0msにすることができました。

Resource Hintsに関する参考ページ

resource hints api でリソースの投機的取得 | blog.jxck.io

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

resource hints - what is preload, prefetch, and preconnect? - keycdn

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

preload, prefetch and priorities in chrome - reloading - medium

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

preload key requests  |  tools for web developers  |  google developers

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

Prefetchに関する参考ページ

resource hintsでpreconnectとdns-prefetchを併記 - qiita

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

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は最低限のものだけの使用にした方がいいと思われます。それでもページ表示のスピードはあまり差がありませんでした。

スコアが悪くなった時のソース

とにかく他のページと共通するものは全部詰め込みました。jQueryFont-AwesomeAdSenseZenbackとか、スタイルシートも画像も。

<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/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">
<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">
<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">
<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">
<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">

最終的に最低限に絞ったソース

とりあえず、PrefetchFont-AwesomeCSSCDNから読み込むときにバックグラウンドで落ちてくる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/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"/>
<link rel="preload" as="style" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">
<script>
	$('link[as = "style"]').attr('rel','stylesheet');
</script>

参考ページ

&lt;link rel=&quot;preload&quot;&gt;を使ってcssを非同期で読み込む - qiita

https://qiita.com/memolog/items/a8fb8b39b840adca4d89

大幅な高速化はできないけど効果あり

結局、、GTmetrixGoogle Speed Insightの評価はResource Hintsを使用する前より悪くなりましたが、onload時間は以前よりたったの100ms前後ですが速くなった気がします。

WEBPAGETESTでは「A」「B」の評価で割といい感じでした。

劇的なスピードアップはできませんが、効果はあるということで高速化の手段としては使えることがわかりました。

その他参考ページ

dns prefetch for social medias

http://tokkono.cute.coocan.jp/demo/prefetch/?page=2

pagespeed insightsで100点を取るためにやったこと - qiita

https://qiita.com/suzunone/items/55277b99893b2a6cf353

前へ

jQuery.jsの読み込みにDeferやAsyncを使ったらエラーでスクリプトが動かないとき

次へ

Chromium(クロミウム)ブラウザのダウンロードリンク