多用しすぎると評価が悪くなる？
高速化できる反面、多用しすぎるとスコアが悪くなりました。どのページにも共通して使用しているCSSやJSとJPEG・PNG・GIFなどの画像もPrefetchで先読みすると、速度は速くなってもスコアが悪くなりました。
たまたまかもしれませんが、GTmetrixで「A」または「B」だった評価が「C」とか「D」に...。Google Speed Insightでも「97」から「65」に...。
Resource Hints 使用前
Resource Hints 使用後
よって、多用するのは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/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">
最終的に最低限に絞ったソース
とりあえず、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/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>
参考ページ
大幅な高速化はできないけど効果あり
結局、、GTmetrixとGoogle Speed Insightの評価はResource Hintsを使用する前より悪くなりましたが、onload時間は以前よりたったの100ms前後ですが速くなった気がします。
WEBPAGETESTでは「A」と「B」の評価で割といい感じでした。
劇的なスピードアップはできませんが、効果はあるということで高速化の手段としては使えることがわかりました。
その他参考ページ