chrome devtools: audit使い始めた。

chrome devtools: audit 初めて使った。
https://qiita.com/kaizen_nagoya/items/4cab022a323f43d4a6ed

http://researchmap.jp が2019年7月末に第二版に更新されるらしい。
何が改善されるかを確認するためにauditを更新前に実施した。

いろいろわかるために、Qiitaに適用してみた。

画面出力

terms

ARIA: Accessible Rich Internet Applications
CSS: Cascading Style Sheets
DOM: Document Object Model
PWA: Progressive Web App
RAIL: Response Animation Idle Load
SEO: Search Engine Optimization
TL;DR: too long didn't read

Performance

Speed Index

Speed Index はページの読み込みパフォーマンスにおける指標であり、ページのコンテンツが目に見える状態になるまでの時間を表します。このスコアが低いほど、パフォーマンスが高くなります。

speed-index.js

...
 /** 
    * Audits the page to give a score for the Speed Index. 
    * @see https://github.com/GoogleChrome/lighthouse/issues/197 
...

Lighthouse では Speedline と呼ばれるノードモジュールを使用して、Speed Index のスコアを算出します。

Diagnostics

1 Ensure text remains visible during webfont load
2 Serve static assets with an efficient cache policy
28 resources found

URL	Cache TTL	Size (KB)
/assets/public-b2a626c….min.js	None	430 KB
(cdn.qiita.com)
/assets/public-6c60d19….min.css	None	77 KB
(cdn.qiita.com)
/assets/fontawesome-webfont-af7ae50….woff2?v=4.7.0	None	76 KB
(cdn.qiita.com)
…profile-images/153…	None	64 KB
(qiita-image-store.s3.amazonaws.com)
…profile-images/154…	None	60 KB
(qiita-image-store.s3.amazonaws.com)
…profile-images/154…	None	44 KB
(qiita-image-store.s3.amazonaws.com)
…profile-images/155…	None	41 KB
(qiita-image-store.s3.ap-northeast-1.amazonaws.com)
…cd21083…/thumb.jpg?136…	None	16 KB
(s3-ap-northeast-1.amazonaws.com)
…profile-images/147…	None	9 KB
(qiita-image-store.s3.amazonaws.com)
/js/s_retargeting.js	None	3 KB
(b92.yahoo.co.jp)
…j/btn.js?v=1	None	2 KB
(widgets.getpocket.com)
…medium/missing-2e17009….png	None	1 KB
(cdn.qiita.com)
…046d1c2…/thumb.jpg?142…	None	1 KB
(s3-ap-northeast-1.amazonaws.com)
…bd4d34e…/thumb.jpg?150…	None	1 KB
(s3-ap-northeast-1.amazonaws.com)
…7839376…/thumb.jpg?142…	None	1 KB
(s3-ap-northeast-1.amazonaws.com)
/u/38244632?v=4	5 m	10 KB
(avatars2.githubusercontent.com)
/avatar/60f29b5…	5 m	3 KB
(secure.gravatar.com)
/avatar/e060b91…	5 m	3 KB
(secure.gravatar.com)
/avatar/21596fa…	5 m	3 KB
(secure.gravatar.com)
/u/41010673?v=4	5 m	2 KB
(avatars2.githubusercontent.com)
/libs/mixpanel-2-latest.min.js	10 m	24 KB
(cdn.mxpnl.com)
/en_US/all.js	20 m	2 KB
(connect.facebook.net)
/widgets.js	30 m	28 KB
(platform.twitter.com)
/analytics.js	2 h	18 KB
(www.google-analytics.com)
…pFvll527Cqo/photo.jpg?sz=50	1 d	2 KB
(lh3.googleusercontent.com)
…s50-mo/photo.jpg	1 d	1 KB
(lh6.googleusercontent.com)
…s50-mo/photo.jpg	1 d	1 KB
(lh3.googleusercontent.com)
…mo/photo.jpg?sz=50	1 d	1 KB
(lh4.googleusercontent.com)

3 Minimize main-thread work
5.5 s
4 Avoid an excessive DOM size
1,357 nodes

Time to Interactive

Accessibility

Names and labels

Failing Elements
a.st-Header_stock.mr-2.py-2
a
a
a
a
a.js-next-page-link
a

Best Practices

SEO(Search Engine Optimization)

Progressive Web App(PWA)

一覧

一番左の(Qiita_kaizen_M, Qiita_kaizen_D)
https://qiita.com/kaizen_nagoya

次の２列が、「いらない上から目線」
https://researchmap.jp/jo6nnc9mh-45644/#_45644
ALL_Mobileは、
https://researchmap.jp/kaizen/
Ref_Mobile は、Home Page Builderで作成したあるページ。

	Qiita_kaizen_M	Qiita_kaizen_D	S_Mobile	S_Desktop	ALL_Mobile	Ref_Mobile
Performance	55	56	96	99	98	79
Accessibility	43	43	74	74	74	76
Best Practices	57	57	86	86	79	79
SEO	95	95	67	67	75	100
Performance
First Contentful paint	2.3	2.3	1.4	1.4	2	1.1
speed index	4.1	4	3.5	2	2	4.9
time to interactive	11.3	11	2.1	2.6	2	5.5
first meaningful paint	2.3	2.3	1.4	1.4	2	1.1
first cpu index	9.8	9.4	1.4	2.1	2	3.8
estimated input latency	0.29	0.26	0.01	0.01	0.01	0.01
reduce server response time(TTFB)			1.1	0.05
eliminate render-blocking resources	1.09	1.07	0.46	0.46	0.49	0.52
defer offscreen imaes	1.05	1.05
properly seize images	0.75
preconnect to required origins	0.3	93
remove unused css	0.3	0.45
enable text compression			0.3	0.44	0.75	1.35
minify javascript				0.15		0.6
serve images in next-gen formats	0.9	1.2			0.15	2.81
efficiently encode image		0.3			0.15	2.1
avoid an excessive DOM size		1363			1860
serve static assets with an efficient cache policy	28	28	29	29	23	6
minimize critical requests depth	5	5	4	4	2.7	5
minimize critical requests depth					4
passed audits	10	9	17	16	14	13
Accessibility
additional items to manually check	11	11	11	11	11	11
passed audits	9	9	11	11	11	9
not applicable	19	19	22	22	22	25
Best Practices
passed audits	9	9	13	13	12	12
SEO
additional items to manually check	1	1	1	1	1	1
passed audits	11	11	8	8	9	10
not applicable						2
CPU/Memory Power	1014	1032	850	1048	1000	942

参考資料(reference)

顧客体験を向上させるためのWebサイトのパフォーマンス計測
https://qiita.com/algas/items/f385222580145f01dea2

Chrome Developer Toolsの便利機能
https://qiita.com/y_fujieda/items/86dbc2351f22961b29c1

Webパフォーマンス虎の巻
https://qiita.com/usagi-f/items/10f35969f08dd01fa635

なんて便利なDevTool！
https://qiita.com/miiina016/items/e3626e54c68ba916291b

Chrome デベロッパーツールの Console を使いこなす
https://qiita.com/howdy39/items/c22c2cfafab88fa73d15

秒で使える業務時短コード集 - ChromeDevTool活用
https://qiita.com/aqril_1132/items/421e902d757b9969e49d

デベロッパーツールだけでお手軽Webスクレイピング
https://qiita.com/Hirosaji/items/a29df59006e76c802cac

<この項は書きかけです。順次追記します。>
This article is not completed. I will add some words and/or centences in order.
Este artículo no está completo. Agregaré algunas palabras en orden.

知人資料

' @kazuo_reve 私が効果を確認した「小川メソッド」
https://qiita.com/kazuo_reve/items/a3ea1d9171deeccc04da

' @kazuo_reve 新人の方によく展開している有益な情報
https://qiita.com/kazuo_reve/items/d1a3f0ee48e24bba38f1

' @kazuo_reve Vモデルについて勘違いしていたと思ったこと
https://qiita.com/kazuo_reve/items/46fddb094563bd9b2e1e

自己記事一覧

Qiitaで逆リンクを表示しなくなったような気がする。時々、スマフォで表示するとあらわることがあり、完全に削除したのではなさそう。2024年４月以降、せっせとリンクリストを作り、統計を取って確率を説明しようとしている。2025年２月末を目標にしていた。

一覧の一覧( The directory of directories of mine.) Qiita(100)
https://qiita.com/kaizen_nagoya/items/7eb0e006543886138f39

views 20,000越え自己記事一覧
https://qiita.com/kaizen_nagoya/items/58e8bd6450957cdecd81

Views１万越え、もうすぐ１万記事一覧最近いいねをいただいた216記事
https://qiita.com/kaizen_nagoya/items/d2b805717a92459ce853

仮説（0）一覧（目標100現在40）
https://qiita.com/kaizen_nagoya/items/f000506fe1837b3590df

Qiita(0)Qiita関連記事一覧（自分）
https://qiita.com/kaizen_nagoya/items/58db5fbf036b28e9dfa6

Error一覧 error(0)
https://qiita.com/kaizen_nagoya/items/48b6cbc8d68eae2c42b8

C++ Support(0)　
https://qiita.com/kaizen_nagoya/items/8720d26f762369a80514

Coding(0) Rules, C, Secure, MISRA and so on
https://qiita.com/kaizen_nagoya/items/400725644a8a0e90fbb0

Ethernet 記事一覧　Ethernet(0)
https://qiita.com/kaizen_nagoya/items/88d35e99f74aefc98794

Wireshark 一覧 wireshark(0)、Ethernet(48)
https://qiita.com/kaizen_nagoya/items/fbed841f61875c4731d0

線網（Wi-Fi）空中線(antenna)(0) 記事一覧(118/300目標)
https://qiita.com/kaizen_nagoya/items/5e5464ac2b24bd4cd001

なぜdockerで機械学習するか書籍・ソース一覧作成中 (目標100)
https://qiita.com/kaizen_nagoya/items/ddd12477544bf5ba85e2

プログラムちょい替え（0）一覧:4件
https://qiita.com/kaizen_nagoya/items/296d87ef4bfd516bc394

言語処理100本ノックをdockerで。python覚えるのに最適。:10+12
https://qiita.com/kaizen_nagoya/items/7e7eb7c543e0c18438c4

Python(0)記事をまとめたい。
https://qiita.com/kaizen_nagoya/items/088c57d70ab6904ebb53

安全（0）安全工学シンポジウムに向けて: 21
https://qiita.com/kaizen_nagoya/items/c5d78f3def8195cb2409

プログラマによる、プログラマのための、統計(0)と確率のプログラミングとその後
https://qiita.com/kaizen_nagoya/items/6e9897eb641268766909

転職(0)一覧
https://qiita.com/kaizen_nagoya/items/f77520d378d33451d6fe

技術士(0)一覧
https://qiita.com/kaizen_nagoya/items/ce4ccf4eb9c5600b89ea

Reserchmap(0) 一覧
https://qiita.com/kaizen_nagoya/items/506c79e562f406c4257e

物理記事　上位100
https://qiita.com/kaizen_nagoya/items/66e90fe31fbe3facc6ff

量子(0) 計算機, 量子力学
https://qiita.com/kaizen_nagoya/items/1cd954cb0eed92879fd4

数学関連記事１００
https://qiita.com/kaizen_nagoya/items/d8dadb49a6397e854c6d

coq(0) 一覧
https://qiita.com/kaizen_nagoya/items/d22f9995cf2173bc3b13

統計(0)一覧
https://qiita.com/kaizen_nagoya/items/80d3b221807e53e88aba

図(0) state, sequence and timing. UML and お絵描き
https://qiita.com/kaizen_nagoya/items/60440a882146aeee9e8f

色(0) 記事100書く切り口
https://qiita.com/kaizen_nagoya/items/22331c0335ed34326b9b

品質一覧
https://qiita.com/kaizen_nagoya/items/2b99b8e9db6d94b2e971

言語・文学記事　１００
https://qiita.com/kaizen_nagoya/items/42d58d5ef7fb53c407d6

医工連携関連記事一覧
https://qiita.com/kaizen_nagoya/items/6ab51c12ba51bc260a82

水の資料集(0)　方針と成果
https://qiita.com/kaizen_nagoya/items/f5dbb30087ea732b52aa

自動車　記事　１００
https://qiita.com/kaizen_nagoya/items/f7f0b9ab36569ad409c5

通信記事１００
https://qiita.com/kaizen_nagoya/items/1d67de5e1cd207b05ef7

日本語（０）一欄
https://qiita.com/kaizen_nagoya/items/7498dcfa3a9ba7fd1e68

英語(0) 一覧
https://qiita.com/kaizen_nagoya/items/680e3f5cbf9430486c7d

音楽　一覧(0)
https://qiita.com/kaizen_nagoya/items/b6e5f42bbfe3bbe40f5d

「@kazuo_reve 新人の方によく展開している有益な情報」確認一覧
https://qiita.com/kaizen_nagoya/items/b9380888d1e5a042646b

鉄道（０）鉄道のシステム考察はてっちゃんがてつだってくれる
https://qiita.com/kaizen_nagoya/items/faa4ea03d91d901a618a

OSEK OS設計の基礎　OSEK(100)
https://qiita.com/kaizen_nagoya/items/7528a22a14242d2d58a3

coding (101) 一覧を作成し始めた。omake:最近のQiitaで表示しない5つの事象
https://qiita.com/kaizen_nagoya/items/20667f09f19598aedb68

官公庁・学校・公的団体（NPOを含む）システムの課題、官（０）
https://qiita.com/kaizen_nagoya/items/04ee6eaf7ec13d3af4c3

「はじめての」シリーズ　ベクタージャパン　
https://qiita.com/kaizen_nagoya/items/2e41634f6e21a3cf74eb

AUTOSAR(0)Qiita記事一覧, OSEK(75)
https://qiita.com/kaizen_nagoya/items/89c07961b59a8754c869

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

LaTeX(0) 一覧　
https://qiita.com/kaizen_nagoya/items/e3f7dafacab58c499792

自動制御、制御工学一覧（０）
https://qiita.com/kaizen_nagoya/items/7767a4e19a6ae1479e6b

Rust(0) 一覧　
https://qiita.com/kaizen_nagoya/items/5e8bb080ba6ca0281927

programの本質は計画だ。programは設計だ。
https://qiita.com/kaizen_nagoya/items/c8545a769c246a458c27

登壇直後版色使い(JIS安全色) Qiita Engineer Festa 2023〜私しか得しないニッチな技術でLT〜スライド編 0.15
https://qiita.com/kaizen_nagoya/items/f0d3070d839f4f735b2b

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

逆も真：社会人が最初に確かめるとよいこと。OSEK(69)、Ethernet(59)
https://qiita.com/kaizen_nagoya/items/39afe4a728a31b903ddc

統計の嘘。仮説（127）
https://qiita.com/kaizen_nagoya/items/63b48ecf258a3471c51b

自分の言葉だけで論理展開できるのが天才なら、文章の引用だけで論理展開できるのが秀才だ。仮説（136）
https://qiita.com/kaizen_nagoya/items/97cf07b9e24f860624dd

参考文献駆動執筆(references driven writing)・デンソークリエイト編
https://qiita.com/kaizen_nagoya/items/b27b3f58b8bf265a5cd1

「何を」よりも「誰を」。１０年後のために今見習いたい人たち
https://qiita.com/kaizen_nagoya/items/8045978b16eb49d572b2

Qiitaの記事に３段階または５段階で到達するための方法
https://qiita.com/kaizen_nagoya/items/6e9298296852325adc5e

出力(output)と呼ばないで。これは状態(state)です。
https://qiita.com/kaizen_nagoya/items/80b8b5913b2748867840

祝休日・謹賀新年 2025年の目標
https://qiita.com/kaizen_nagoya/items/dfa34827932f99c59bbc

Qiita 1年間をまとめた「振り返りページ」＠2024
https://qiita.com/kaizen_nagoya/items/ed6be239119c99b15828

2024 参加・主催Calendarと投稿記事一覧 Qiita(248)
https://qiita.com/kaizen_nagoya/items/d80b8fbac2496df7827f

主催Calendar2024分析 Qiita(254)
https://qiita.com/kaizen_nagoya/items/15807336d583076f70bc

Calendar 統計
https://qiita.com/kaizen_nagoya/items/e315558dcea8ee3fe43e

LLM 関連 Calendar 2024
https://qiita.com/kaizen_nagoya/items/c36033cf66862d5496fa

Large Language Model Related Calendar
https://qiita.com/kaizen_nagoya/items/3beb0bc3fb71e3ae6d66

博士論文 Calendar 2024 を開催します。
https://qiita.com/kaizen_nagoya/items/51601357efbcaf1057d0

博士論文(0)関連記事一覧
https://qiita.com/kaizen_nagoya/items/8f223a760e607b705e78

coding (101) 一覧を作成し始めた。omake:最近のQiitaで表示しない5つの事象
https://qiita.com/kaizen_nagoya/items/20667f09f19598aedb68

あなたは「勘違いまとめ」から、勘違いだと言っていることが勘違いだといくつ見つけられますか。人間の間違い(human error(125))の種類と対策
https://qiita.com/kaizen_nagoya/items/ae391b77fffb098b8fb4

プログラマの「プログラムが書ける」思い込みは強みだ。３つの理由。仮説（168）統計と確率(17) , OSEK(79)
https://qiita.com/kaizen_nagoya/items/bc5dd86e414de402ec29

出力(output)と呼ばないで。これは状態(state)です。
https://qiita.com/kaizen_nagoya/items/80b8b5913b2748867840

これからの情報伝達手段の在り方について考えてみよう。炎上と便乗。
https://qiita.com/kaizen_nagoya/items/71a09077ac195214f0db

ISO/IEC JTC1 SC7 Software and System Engineering
https://qiita.com/kaizen_nagoya/items/48b43f0f6976a078d907

アクセシビリティの知見を発信しよう！（再び）
https://qiita.com/kaizen_nagoya/items/03457eb9ee74105ee618

統計論及確率論輪講（再び）
https://qiita.com/kaizen_nagoya/items/590874ccfca988e85ea3

読者の心をグッと惹き寄せる7つの魔法
https://qiita.com/kaizen_nagoya/items/b1b5e89bd5c0a211d862

「@kazuo_reve 新人の方によく展開している有益な情報」確認一覧
https://qiita.com/kaizen_nagoya/items/b9380888d1e5a042646b

ソースコードで議論しよう。日本語で議論するの止めましょう（あるプログラミング技術の議論報告）
https://qiita.com/kaizen_nagoya/items/8b9811c80f3338c6c0b0

脳内コンパイラの3つの危険
https://qiita.com/kaizen_nagoya/items/7025cf2d7bd9f276e382

心理学の本を読むよりはコンパイラ書いた方がよくね。仮説（34）
https://qiita.com/kaizen_nagoya/items/fa715732cc148e48880e

NASAを超えるつもりがあれば読んでください。
https://qiita.com/kaizen_nagoya/items/e81669f9cb53109157f6

データサイエンティストの気づき!「勉強して仕事に役立てない人。大嫌い!!」『それ自分かも?』ってなった!!!
https://qiita.com/kaizen_nagoya/items/d85830d58d8dd7f71d07

「ぼくの好きな先生」「人がやらないことをやれ」プログラマになるまで。仮説（37）　
https://qiita.com/kaizen_nagoya/items/53e4bded9fe5f724b3c4

なぜ経済学徒を辞め、計算機屋になったか（経済学部入学前・入学後・卒業後対応）転職(1)
https://qiita.com/kaizen_nagoya/items/06335a1d24c099733f64

プログラミング言語教育のXYZ。仮説（52）
https://qiita.com/kaizen_nagoya/items/1950c5810fb5c0b07be4

【24卒向け】9ヶ月後に年収１０００万円を目指す。二つの関門と三つの道。
https://qiita.com/kaizen_nagoya/items/fb5bff147193f726ad25

「【25卒向け】Qiita Career Meetup for STUDENT」予習の勧め
https://qiita.com/kaizen_nagoya/items/00eadb8a6e738cb6336f

大学入試不合格でも筆記試験のない大学に入って卒業できる。卒業しなくても博士になれる。
https://qiita.com/kaizen_nagoya/items/74adec99f396d64b5fd5

全世界の不登校の子供たち「博士論文」を書こう。世界子供博士論文遠隔実践中心安全(99)
https://qiita.com/kaizen_nagoya/items/912d69032c012bcc84f2

日本のプログラマが世界で戦える16分野。仮説(53),統計と確率(25) 転職(32)、Ethernet(58)
https://qiita.com/kaizen_nagoya/items/a7e634a996cdd02bc53b

小川メソッド　覚え（書きかけ）
https://qiita.com/kaizen_nagoya/items/3593d72eca551742df68

DoCAP（ドゥーキャップ）って何ですか？
https://qiita.com/kaizen_nagoya/items/47e0e6509ab792c43327

views 20,000越え自己記事一覧
https://qiita.com/kaizen_nagoya/items/58e8bd6450957cdecd81

Views１万越え、もうすぐ１万記事一覧最近いいねをいただいた213記事
https://qiita.com/kaizen_nagoya/items/d2b805717a92459ce853

amazon 殿堂入りNo1レビュアになるまで。仮説(102)
https://qiita.com/kaizen_nagoya/items/83259d18921ce75a91f4

100以上いいねをいただいた記事16選
https://qiita.com/kaizen_nagoya/items/f8d958d9084ffbd15d2a

水道局10年(1976,4-1986,3)を振り返る
https://qiita.com/kaizen_nagoya/items/707fcf6fae230dd349bf

小川清最終講義、最終講義（再）計画, Ethernet(100) 英語(100) 安全(100)
https://qiita.com/kaizen_nagoya/items/e2df642e3951e35e6a53

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on my individual experience. It has nothing to do with the organization or business to which I currently belong.
Este artículo es una impresión personal basada en mi experiencia personal. No tiene nada que ver con la organización o empresa a la que pertenezco actualmente.

文書履歴(document history)

ver. 0.01 初稿 20190611 午前
ver. 0.02 参考資料追記 20190611 午後

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

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

Thank you very much for reading to the last sentence.

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

Muchas gracias por leer hasta la última oración.

Por favor, haz clic en el ícono Me gusta 💚 y sígueme para tener una vida feliz.