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

Back to Basics CSS発表資料

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. 改善の手法
   Improvement methods
   2.
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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
    など
    

    View Slide

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
    など
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 2001 2015
    amazon.co.jp
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide