Qiitaでchrome devtools: audits

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

文書履歴(document history)

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