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

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

Resource Hintsとは

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

これを使えば速くなる?

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

Resource Hints 使用前

GTmetrixWarerfall

Resource Hints 使用後

GTmetrixWarerfall

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

Resource Hintsに関する参考ページ

Link

Resource Hintsでリソースを事前取得しよう! #prerender - Qiita

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

Link

Resource Hints Api でリソースの投機的取得 | Blog.jxck.io

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

Link

Resource Hints - What Is Preload, Prefetch, And Preconnect? - Keycdn

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

Link

Preload, Prefetch And Priorities In Chrome | By Addy Osmani | Reloading | Medium

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

Link

Redirecting...

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

Prefetchに関する参考ページ

Link

ロードを高速化するprefetch #html - Qiita

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

Link

Resource HintsでPreconnectとDns-Prefetchを併記 #高速化 - Qiita

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

Preloadというのもある

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

Preloadに関する参考ページ

Link

Preload を用いたリソースプリローディングの最適化 | Blog.jxck.io

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

ブラウザの対応状況

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

Resource Hints IE Edge Chrome Firefox Opera Safari Safari(iOS) Android  
DNS-Prefetch 不明 不明 参照
Preconnect × 参照
Prefetch × × 参照
Prerender × × × × × 参照
Preload × 参照

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

Link

Can I Use... Support Tables For Html5, Css3, Etc

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

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

とにかく他のページと共通するものは全部詰め込みました。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>

参考ページ

Link

https://gist.github.com/tamaina/73ccf1f807bb4531c069da43112bd61c

Link

<link Rel=&quot;preload&quot;>を使ってcssを非同期で読み込む #html - Qiita

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

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

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

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

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

その他参考ページ

Link

500 エラー : @niftyホームページサービス

http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/

Link

500 エラー : @niftyホームページサービス

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

Link

Pagespeed Insightsで100点を取るためにやったこと #javascript - Qiita

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

PAGETOP