Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Ed4b70f03d3445bd939e34abf6e1d09a?s=47 tanpopo5
December 14, 2019

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

Ed4b70f03d3445bd939e34abf6e1d09a?s=128

tanpopo5

December 14, 2019
Tweet

Other Decks in Technology

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 ちょっと前まで

  8. 8

  9. 9

  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 ありがとう ございました。