Back to Basics CSS発表資料

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

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

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

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

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

6. 改善の手法
Improvement methods2.

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

8. 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

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

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

11. レイアウトに影響を及ぼすプロパティ
 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
など

12. ペイントに影響を及ぼすプロパティ
 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
など

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

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

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

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

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

18. 2001 2015
amazon.co.jp

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

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

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