Qiitaでchrome devtools: audits

chrome devtools: audit使い始めた。

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

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

いろいろわかるために、Qiitaに適用してみた。
# 画面出力
<img width="557" alt="auq2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/6688347a-7e74-9d0e-c3c7-9ff06222901c.png">

<img width="546" alt="auq3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/05162d02-7376-7d98-ae15-7f687cd017c7.png">

<img width="544" alt="auq4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/21a8fdb4-7446-41f8-4859-df94f91f041d.png">
<img width="554" alt="auq5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/4eb95ac8-d9ac-3ff8-99f8-909736f1ed9a.png">
<img width="549" alt="au16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/f37078b1-2454-b685-bc02-407ede50e351.png">
<img width="548" alt="auq7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/9d6d601d-a4e9-eb2b-297f-617838251413.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 はページの読み込みパフォーマンスにおける指標であり、ページのコンテンツが目に見える状態になるまでの時間を表します。 このスコアが低いほど、パフォーマンスが高くなります。

```javascript: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

次の２列が、「いらない上から目線」
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 午後