Qiita
Chrome
DevTools
audits

Qiitaでchrome devtools: audits

chrome devtools: audit使い始めた。

chrome devtools: audit 初めて使った。

https://qiita.com/kaizen_nagoya/items/4cab022a323f43d4a6ed

http://researchmap.jp が2019年7月末に第二版に更新されるらしい。

何が改善されるかを確認するためにauditを更新前に実施した。

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


画面出力

auq2.png

auq3.png

auq4.png

auq5.png

au16.png

auq7.png


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

https://developers.google.com/web/tools/lighthouse/audits/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

https://developers.google.com/web/fundamentals/performance/rail


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

次の2列が、「いらない上から目線」

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 午後