5
5

chrome devtools: audit 初めて使った。

Last updated at Posted at 2019-06-10

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
が7月末に、v2になるとのこと。
現在の版で測定して、変更後にどういう値が変わるかを見るために記録。

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

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

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

「Audits」

を押して、

audit.png

#既定値(Mobile)
で実行。

au1.png
au2.png
au3.png
au4.png
au5.png

元々の画面の先頭に

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

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

au6.png

Desktop

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

aud1.png

aud2.png
aud3.png
aud4.png
aud5.png

元々の画面の先頭に

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

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

まとめ

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

画面の左上の左から2つ目の下矢印は「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.

このエントリーをはてなブックマークに追加

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5