UXのためのWebサイトレンダリング

Transcript

1. UXのための Webサイト レンダリング
2. 2 ⾃⼰紹介
3. 3 Yoko Nakano You can find me at LinkedIn : yookonakano
4. 4 アメリカ⾏く前
5. 5 LAN Network Illustrator Photoshop
6. 6 なんでも屋さん
7. 7 ちょっと前まで
10. 10 出会ってしまった
11. 11 “遅いわね。⽌ま って⾒えるわ..” 超⾼速WordPress仮想マシン
12. 12 WordPress ⾼速化
13. 13 なにそれ？ ① HTTPリクエスト ② 動 的 処 理 ④ レンダリング ③ HTTPレスポンス
14. 14 なにそれ？ ① HTTPリクエスト ② 動 的 処 理 ④ レンダリング ③ HTTPレスポンス
15. 15 すごい
16. 16 時は過ぎて
17. 17 Googleさんは⾔いました パフォーマンスが 重要
18. 18 KUSANAGI あるから いいじゃん
19. 19 もっと早く！
20. 20 なにすればいいの
21. 21 クリティカル レンダリング パス の最適化
22. 22 なにそれ
23. 23 クリティカルレンダリングパス CSSOM レンダー ツリー レイアウト ペイント DOM HTMLのレスポンスからスクリーンにピクセルが描画されるまで。
24. 24 忘れてちゃ いけない
25. 25 JavaScript
26. 26 HTML CSS JavaScript
27. 27 Webページ が表⽰されるまで
28. 28 クリティカルレンダリングパス DOM構築 レンダリング プロセス GET CSS GET JavaScript スタイル 評価 JavaScript 実行
29. 29 DOMツリー html head body meta link p div img I love span to live in New York
30. 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. 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. 32 レンダーツリー body p div img font-size: 16px font-size: 16px font-weight: bold font-size: 16px float: right I love New York
33. 33 そんなの わかってるよ
34. 34 どこが遅いの
35. 35 クリティカルレンダリングパス DOM構築 レンダリング プロセス GET CSS GET JavaScript スタイル 評価 JavaScript 実行
36. 36 レンダリング ブロック
37. 37 CSS JavaScript
38. 38 どうしたら？
39. 39 CSS最適化
40. 40 JavaScript最適化
41. 41 たくさん ファイルを 読み込んでる
42. 42 なんとか減らす
43. 43 JavaScript 読み込み順番
44. 44 同期（defer) ⾮同期(async)
45. 45 考えるの⼤変
46. 46 UX向上 かかせない
47. 47 がんばる
48. 48 やってみる 価値あり
49. 49 微妙に宣伝・・
50. 50 もうちょっと 楽にならないかな
51. 51 WEXAL っていうの
52. 52 JavaScriptの最適化 CSSの最適化 画像の最適化
53. 53 そんなに 情報がない
54. 54 興味があったら 声かけて
55. 55 ありがとう ございました。