chrome devtools: audit 初めて使った。

chrome Devtools

chrome devtools
https://developers.google.com/web/tools/chrome-devtools/?hl=ja
使ったことがなかった。

Chrome DevTools を開く
Chrome メニューから [More Tools] > [Developer Tools] を選択します。
ページ要素を右クリックして、[Inspect] を選択します。
キーボード ショートカットの Ctrl+Shift+I キー（Windows）または Cmd+Opt+I キー（Mac）を使用します。

使用機材

macOS10.12.6
chromeバージョン: 72.0.3626.119（Official Build） （64 ビット）
では、
chromeメニューから「表示」「開発/管理」「デベロッパーツール」
instpectは「検証」

測定対象

http://researchmap.jp
が７月末に、v2になるとのこと。
現在の版で測定して、変更後にどういう値が変わるかを見るために記録。

サイト全体だとわけがわからなくなるといけない。簡単な次の記事に限定。

いらない上から目線
https://researchmap.jp/jo6nnc9mh-45644/#_45644

上記場所は、Qiitaにも投稿する原稿のうち、著作権上の課題を確認するために、著者などに問い合わせをする際に、利用している学術サイトです。いきなり商用サイトに掲載して確認するのではまずいかもしれない場合などresearchmapに記載して確認し、Qiitaの記事にすることがあります。Qiitaに書きかけの記事が１０以上になってしまったときに、書きかけの記事の置き場所にもなっています。
学会発表予定記事もときどきあげています。

「Audits」

を押して、

#既定値(Mobile)
で実行。

元々の画面の先頭に

このブラウザは、JavaScript が無効になっています。JavaScriptを有効にして再度、お越しください。

と表示がでた。今、見ているChromeの設定は

Desktop

に変更すると、何が変わるかと、上記警告が出るか確認。

元々の画面の先頭に

このブラウザは、JavaScript が無効になっています。JavaScriptを有効にして再度、お越しください。

と表示がでた。直接のブラウザの設定は関係ないらしい。
Auditsの設定方法を確認中。

まとめ

Mobile, Desktopの２つの値と、researchmapの自分の先頭ページでのMobile auditと、別の場所のMobile audit列を並記する。

画面の左上の左から２つ目の下矢印は「Download Report」
保存するとjsonファイルとして保存する。
325KB(参考 Mobile)から425KB(全体Mobile)程度の大きさ。

	Mobile	Desktop	全体Mobile	参考 Mobile
Performance	96	99	98	79
Accessibility	74	74	74	76
Best Practices	86	86	79	79
SEO	67	67	75	100
Performance
First Contentful paint	1.4	1.4	2	1.1
speed index	3.5	2	2	4.9
time to interactive	2.1	2.6	2	5.5
first meaningful paint	1.4	1.4	2	1.1
first cpu index	1.4	2.1	2	3.8
estimated input latency	0.01	0.01	0.01	0.01
reduce server response time(TTFB)	1.1	0.05
eliminate render-blocking resources	0.46	0.46	0.49	0.52
enable text compression	0.3	0.44	0.75	1.35
minify javascript		0.15		0.6
serve images in next-gen formats			0.15	2.81
efficiently encode image			0.15	2.1
avoid an excessive DOM size			1860
serve static assets with an efficient cache policy	29	29	23	6
minimize critical requests depth	4	4	2.7	5
minimize critical requests depth			4
passed audits	17	16	14	13
Accessibility
additional items to manually check	11	11	11	11
passed audits	11	11	11	9
not applicable	22	22	22	25
Best Practices
passed audits	13	13	12	12
SEO
additional items to manually check	1	1	1	1
passed audits	8	8	9	10
not applicable				2
CPU/Memory Power	850	1048	1000	942

用語調べ

TTFB, SEO, PWAなどのfull spellを記録。

Performance(効率)

実演、効率

form- : L.formare = to form(形づくる), fashion(形式)

http://gogen-wisdom.hatenablog.com/entry/2017/01/28/060000
per:完全に

TTFB(Time To First Byte)

Accessibility(接続性)

http://gogengo.me/words/856
cess:進む

http://gogen-wisdom.hatenablog.com/entry/2016/12/19/113928
ac:向かって

Best Practices(推奨事例)

SEO(Search Engine Optimization)

PWA(Progressive web applications)

farst and reriable

3.start_url does not respond with a 200 when offline
No usable web app manifest found on page.

キャッシュにマニフェストの start_url を保持する
https://developers.google.com/web/tools/lighthouse/audits/cache-contains-start_url?hl=ja

オフライン時に URL でステータスコード 200 を返す
https://developers.google.com/web/tools/lighthouse/audits/http-200-when-offline?hl=ja

PWA Optimized

9 Does not set an address-bar theme color
Failures: No manifest was fetched, No <meta name="theme-color"> tag found.

10 Content is not sized correctly for the viewport
The viewport size is 993px, whereas the window size is 412px.

11 Does not have a tag with width or initial-scale
No viewport meta tag found

参考資料(reference)

海上自衛隊のHPが阿部寛のライバルとして名乗りをあげた
https://qiita.com/masanarih0ri/items/a56cdcce0eb98e843d4b

でchrome devtoolsを使っていたのを拝見して、操作方法を覚えがてら記録。

文書履歴(document history)

ver. 0.01 初稿 20190610 午前
ver. 0.02 一覧追記 20190610 午後
ver. 0.03 一覧に項目追加 20190610 夕
ver. 0.04 URL追記　20230308

最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.