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
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
Github Copilot エージェントモードで試してみた
ochtum
0
140
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
310
How Community Opened Global Doors
hiroramos4
PRO
1
130
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
180
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
100
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
200
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
170
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
210
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Become a Pro
speakerdeck
PRO
28
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How GitHub (no longer) Works
holman
314
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
How to Think Like a Performance Engineer
csswizardry
24
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
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 ありがとう ございました。