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 はページの読み込みパフォーマンスにおける指標であり、ページのコンテンツが目に見える状態になるまでの時間を表します。 このスコアが低いほど、パフォーマンスが高くなります。
...
/**
* 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.