パフォーマンスを発揮するためのCSS

Slide 1

Slide 1 text

パフォーマンスを発揮するためのCSS 2015.8.30 (Sun) 沖良矢（世路庵） Back to Basics CSS @ DMM.comラボ

Slide 2

Slide 2 text

自己紹介 OKI Yoshiya • 世路庵（せろあん） • インタラクションデザイナー • フリーランス8年目 KAMABOKO ROAD TO 1000 (2015) lynda.com 日本語版トレーナー (2015) Web Designing 連載 (2009～2015)

Slide 3

Slide 3 text

話すこと 1. パフォーマンスとは 2. 改善の手法 3. なぜ必要なのか？

Slide 4

Slide 4 text

パフォーマンスとは What is performance ? 1.

Slide 5

Slide 5 text

パフォーマンスとは読み込み速度実行速度パフォーマンス読み込み開始から表示されるまでの時間機能や演出を実行するときの時間重さ

Slide 6

Slide 6 text

改善の手法 Improvement methods 2.

Slide 7

Slide 7 text

読み込み速度  HTTPリクエスト数の軽減  ファイルの結合/不要ファイルの削除  CSSスプライト  サーバー/回線の増強  ファイルサイズの軽量化  ファイルの最適化/圧縮  gzip  演出による擬似的な軽量化実行速度  FPSの安定化  描画負荷の軽減  GPUの利用  不要な要素の削除  演出の迅速化改善例

Slide 8

Slide 8 text

Premature optimization is the root of all evil. （早まった最適化は諸悪の根源である） Donald Knuth 引用：Loadmaster CC 表示-継承 2.5 https://ja.wikipedia.org/wiki/%E3%83%89%E3% 83%8A%E3%83%AB%E3%83%89%E3%83%BB% E3%82%AF%E3%83%8C%E3%83%BC%E3%82% B9#/media/File:KnuthAtOpenContentAlliance.jpg

Slide 9

Slide 9 text

読み込み速度  HTTPリクエスト数の軽減  ファイルの結合/不要ファイルの削除  CSSスプライト  サーバー/回線の増強  ファイルサイズの軽量化  ファイルの最適化/圧縮  gzip  演出による擬似的な軽量化実行速度  FPSの安定化  描画負荷の軽減  GPUの利用  不要な要素の削除  演出の迅速化改善例自動化できるところは自動化！

Slide 10

Slide 10 text

レンダリングの流れ HTML （タグスープ） DOM レンダーツリーレイアウト（リフロー）ペイント CSS CSSOM レンダーツリー要素に変更が加わると、レイアウトまたはペイントから再実行される。

Slide 11

Slide 11 text

レイアウトに影響を及ぼすプロパティ  width  height  padding  margin  display  border-width  position  top/right/left/bottom  font-size  float  text-align  overflow  font-weight  font-family  line-height  vertical-align  clear  white-space  min-height など

Slide 12

Slide 12 text

ペイントに影響を及ぼすプロパティ  color  border-style  visibility  background  text-decoration  background-image  background-position  background-repeat  background-size  outline  outline-color  outline-style  outline-width  border-radius  box-shadow  text-shadow など

Slide 13

Slide 13 text

動的な変更でもパフォーマンスの高いプロパティ  opacity（透明度）  transform  translate（位置）  scale（拡大率）  rotate（回転） GPUが利用されるため高速

Slide 14

Slide 14 text

その他、すぐできそうなこと ローディングなど使い終わった要素をdisplay: none 初期表示命の場合は「クリティカルCSS」もお勧め（自動化可能。詳しくはググってね）

Slide 15

Slide 15 text

なぜ必要なのか？ Why we need for better performance ? 3.

Slide 16

Slide 16 text

読み込み時間が0.1秒遅くなると、売上が1%低下する。 Amazon

Slide 17

Slide 17 text

速ければ速いほどいい？ The faster is good ? 引用：Marcus Pink CC BY 2.0 https://www.flickr.com/photos/51775268@N00/5406005088/

Slide 18

Slide 18 text

2001 2015 amazon.co.jp

Slide 19

Slide 19 text

時代や状況によって、求められるパフォーマンスは千差万別 By times and circumstances, required performance changes. 引用：alexkerhead CC BY 2.0 https://www.flickr.com/photos/26354629@N02/2783514026/

Slide 20

Slide 20 text

パフォーマンス改善におけるポイント まず実装優先 必要に応じて明確なパフォーマンス目標を設定する FPS/ 時間/ ファイルサイズ/ 対象機種（特にモバイル） ツールで計測しながら最適化する その情報/機能はユーザーにとって本当に必要か

Slide 21

Slide 21 text

http://ceroan.jp/ 2015.8.30 (Sun)