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

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

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

Back to Basics CSS発表資料

448jp | OKI Yoshiya

August 30, 2015
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 改善の手法
    Improvement methods
    2.

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 2001 2015
    amazon.co.jp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide