Webページが表示されるまでの流れ
"g"キーが押されると
はじめは"Enter"キー
割り込み発火 (USBキーボード以外)
(OS Xの場合) KeyDown NSEventがアプリに送られる
(GNU/Linuxの場合)Xorgサーバがキーコードをlistenする
URLをパースする
URLか？単語か？
ホストネームに含まれるASCIIユニコード文字でない文字を変換する
Strict-Transport-Securityリストを調べる
DNSルックアップ
ARP処理
ソケットを開く
TCP 3 way handshake
TLSハンドシェイク
HTTPプロトコル
HTTPサーバリクエスト処理
サーバーが受け取りHTMLを作成
ブラウザの裏側
サーバーがそのHTMLを返却
スタートからココまでの時間が、Time to First Byte(TTFB)
ココで1byte取るまでの時間
ブラウザ
HTMLのパース
ブラウザがHTML解析
ここ以下をもうちょい解像度上げたのがWeb BrowserのRenderingの流れ
ブラウザがサブリソースをリクエスト
css, js, 画像など
サーバーがサブリソースを作成
サーバーがサブリソースを返却
CSSの解釈
ページのレンダリング
GPU レンダリング
ウィンドウサーバー
レンダリング後の処理および、ユーザの操作起因の処理
この辺の流れを組込みたい↓
First Viewの流れ
Navigation Start
ナビゲーションの開始
サーバへリクエストが送られた段階
SSRはここから→→→
First Paint(FP)
なにか一つでも
First Contentful Paint(FCP)
Loadingなど
たいして意味はないけれどコンテンツが表示される
First Meaningful Paint(FMP)
意味のある情報が表示
過去の指標だが
SSRはここまで←←←が速くなる
Visually Ready
画像とかアセットと呼ばれるものが表示
TTI
ユーザーが触れる
JavaScriptがロードされ実行されて、操作が可能になる
Fully Loaded
最後までコンテンツがloadし終わった
https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
https://youtu.be/j-rAGNokNRU?t=2256
hikaliumのめちゃくちゃ良い発表
『現場のプロから学ぶ SEO技術バイブル』.icon p.177に見やすい図がある
https://zenn.dev/ak/articles/61d25099295372
https://github.com/tetz-akaneya/what-happens-when-JA
https://zenn.dev/moko_poi/articles/c2402f13a870a1