Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UXのためのWebサイトレンダリング
Search
tanpopo5
December 14, 2019
Technology
0
140
UXのためのWebサイトレンダリング
tanpopo5
December 14, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
Autify Company Deck
autifyhq
2
44k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
360
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
0
100
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Music & Morning Musume
bryan
46
6.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Done Done
chrislema
184
16k
Site-Speed That Sticks
csswizardry
10
700
Designing for Performance
lara
610
69k
Agile that works and the tools we love
rasmusluckow
329
21k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
UXのための Webサイト レンダリング
2 ⾃⼰紹介
3 Yoko Nakano You can find me at LinkedIn :
yookonakano
4 アメリカ⾏く前
5 LAN Network Illustrator Photoshop
6 なんでも屋さん
7 ちょっと前まで
8
9
10 出会ってしまった
11 “遅いわね。⽌ま って⾒えるわ..” 超⾼速WordPress仮想マシン
12 WordPress ⾼速化
13 なにそれ? ① HTTPリクエスト ② 動 的 処 理 ④
レンダリング ③ HTTPレスポンス
14 なにそれ? ① HTTPリクエスト ② 動 的 処 理 ④
レンダリング ③ HTTPレスポンス
15 すごい
16 時は過ぎて
17 Googleさんは⾔いました パフォーマンスが 重要
18 KUSANAGI あるから いいじゃん
19 もっと早く!
20 なにすればいいの
21 クリティカル レンダリング パス の最適化
22 なにそれ
23 クリティカルレンダリングパス CSSOM レンダー ツリー レイアウト ペイント DOM HTMLのレスポンスからスクリーンにピクセルが描画されるまで。
24 忘れてちゃ いけない
25 JavaScript
26 HTML CSS JavaScript
27 Webページ が表⽰されるまで
28 クリティカルレンダリングパス DOM構築 レンダリング プロセス GET CSS GET JavaScript スタイル
評価 JavaScript 実行
29 DOMツリー html head body meta link p div img
I love span to live in New York
30 CSSOMツリー body p div img font-size: 16px font-size: 16px
font-weight: bold span font-size: 16px display: none font-size: 16px color: red span font-size: 16px float: right
31 DOMツリー html head body meta link p div img
I love span to live in New York body p div img font-size: 16px font-size: 16px font-weight: bold span font-size: 16px display: none font-size: 16px color: red span font-size: 16px float: right CSSOMツリー
32 レンダーツリー body p div img font-size: 16px font-size: 16px
font-weight: bold font-size: 16px float: right I love New York
33 そんなの わかってるよ
34 どこが遅いの
35 クリティカルレンダリングパス DOM構築 レンダリング プロセス GET CSS GET JavaScript スタイル
評価 JavaScript 実行
36 レンダリング ブロック
37 CSS JavaScript
38 どうしたら?
39 CSS最適化
40 JavaScript最適化
41 たくさん ファイルを 読み込んでる
42 なんとか減らす
43 JavaScript 読み込み順番
44 同期(defer) ⾮同期(async)
45 考えるの⼤変
46 UX向上 かかせない
47 がんばる
48 やってみる 価値あり
49 微妙に宣伝・・
50 もうちょっと 楽にならないかな
51 WEXAL っていうの
52 JavaScriptの最適化 CSSの最適化 画像の最適化
53 そんなに 情報がない
54 興味があったら 声かけて
55 ありがとう ございました。