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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
tanpopo5
December 14, 2019
Technology
0
150
UXのためのWebサイトレンダリング
tanpopo5
December 14, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
190
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
140
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
270
私たち準委任PdEは2つのプロダクトに挑戦する ~ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践~ / 20260212 Naoki Takahashi
shift_evolve
PRO
1
110
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
190
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
torounit
0
480
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
3k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
17k
超初心者からでも大丈夫!オープンソース半導体の楽しみ方〜今こそ!オレオレチップをつくろう〜
keropiyo
0
120
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.6k
Featured
See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
67
Making Projects Easy
brettharned
120
6.6k
KATA
mclloyd
PRO
34
15k
For a Future-Friendly Web
brad_frost
182
10k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
Site-Speed That Sticks
csswizardry
13
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
120
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
100
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Statistics for Hackers
jakevdp
799
230k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.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 ありがとう ございました。