Performance計測ツールのLighthouseが同梱されたようです。
本当は前回の76で入ったのですが、前回のnews releaseから漏れていたようなので、77に記載したとのこと。
簡単に使えます
対象サイト上でAuditタブを選んで Run Audit すれば良いだけ。
対象はこのブログでDesktopで見てみます。
ちょっと見て見ます
何回かやって見ましたが、実行ごとに若干数値は変わります。
デフォルトの背景は白ですが、右上のメニューボタンから変更できます。
（PWAのところは点数なし）
Performance
Overview
あまり良い数字とは言えません。
Opportunities / Diagnostics
それぞれ詳細も見れます。
画像サイズが大きいのでlazy loadingしろとか、jpeg-2000などを使えなどとのこと。
JSは、実行時間が大きいようです。Otherにまとめられている部分が大半。個別のJSでは、hatenablog.jsのCPU時間が3sとトップ。この辺は改善の余地がありそうな気がしますが、とりあえず次へ行きます。
Passed audits
ここは優秀。
Accessbility
そこそこの点数。
Background and foreground colors do not have a sufficient contrast ratio.
こんな指摘もあるんですね。ここに上げられている指摘内容はもっともなので、対応したいところ。
frame/iframeなんかは広告だろうと思うので難しいかもですが。
Best Practices
httpsは、こういうところに明示的に指摘しているので、そろそろ対応しないとやばそうですね。
ChromeはMixed Contentsブロックの話もあり、対応しにくいのかもしれませんが、Googleは全てがhttpsになる世界へ導こうとしているのは明確なので、hatenaさんにもどこかで舵を切って欲しいところ。
See Also:
Chromeのどのバージョンでどの対応が入るかまで日本語で書かれていてオススメ。
- グーグル、「Chrome」で混在コンテンツのブロック強化へ - ZDNet Japan
document.write()は広告なので厳しいかもしれません。
脆弱性のあるjQueryのversionは上げて欲しいところ。
Links to cross-origin destinations are unsafe
これ知らなかったのですが、target="_blank" を使っている箇所を指摘してくれています。
以下のリンクが詳しいのですが、元のページをwindow.openerオブジェクトとして持つため、元ページの操作ができる脆弱性の可能性があるのと、同一スレッドで動作するためパフォーマンス低下の問題があるとのこと。
対応としては、rel="noopener" を付けておくと別windowからの操作をできなくしてくれるそうです。
（おそらく別プロセス・スレッドで開くようにしているんだと思います。）
See Also:
- HTML 本当は怖い target="_blank" 。rel="noopener" ってなに？ - かもメモ
あと、error出てるという指摘がありますがgoogleさんの広告のJSですね。
SEO
これはそこそこですね。
Links do not have descriptive text 1 link found
は、私が書いたJSに問題があるようです。カテゴリにリンク出しすぎたくないので、閾値に満たないものはリンクの文字列を削除していました。
これはそのうち対応しよう。
