Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
UXのためのWebサイトレンダリング
tanpopo5
December 14, 2019
Technology
0
110
UXのためのWebサイトレンダリング
tanpopo5
December 14, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
rakus_dev
0
130
Continuous Architecture Design for Modernization
humank
3
540
開発環境のセキュリティおよびCI/CDパイプラインのセキュア化
rung
PRO
12
5.1k
質の良い”カイゼン”の為の質の良い「振り返り」
shirayanagiryuji
0
130
DMMプラットフォーム ゼロから始めるKubernetes運用 課題と改善
pospome
0
420
殺虫剤のパラドックスの真実 / The Truth of The Pesticide Paradox
kzsuzuki
1
180
ここが好きだよAWS管理ポリシー_devio2022/i_am_iam_lover
yukihirochiba
0
3.2k
DeepDive into Modern Development with AWS
mokocm
1
350
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
sakon310
4
470
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
340
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
miu_crescent
0
860
セキュリティ・キャンプ全国大会2022 企業紹介イベント/seccamp2022-nikkei
nikkei_engineer_recruiting
0
130
Featured
See All Featured
How to name files
jennybc
40
63k
Making Projects Easy
brettharned
98
4.4k
Atom: Resistance is Futile
akmur
255
20k
Fireside Chat
paigeccino
13
1.4k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
A Tale of Four Properties
chriscoyier
149
21k
Statistics for Hackers
jakevdp
782
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
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 ありがとう ございました。