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
120
UXのためのWebサイトレンダリング
tanpopo5
December 14, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
480
Cracking the KubeCon CfP
inductor
2
130
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
200
反実仮想機械学習とは何か
usaito
PRO
8
3k
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
170
JSON攻略法.pdf
miyakemito
8
4.4k
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.8k
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
610
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
310
アクセス制御にまつわる改善 / Improving access control
itkq
0
470
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
120
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Code Reviewing Like a Champion
maltzj
513
39k
Debugging Ruby Performance
tmm1
70
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
It's Worth the Effort
3n
180
27k
Statistics for Hackers
jakevdp
789
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
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 ありがとう ございました。