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

CSSパフォーマンスに関する計測結果

poteboy
November 30, 2023

 CSSパフォーマンスに関する計測結果

CSSパフォーマンスに関して計測した結果を発表しました。
パフォーマンス改善系の話は具体的な改善手法みたいなのがウケてしまいがちだけど普遍的に適用できる手法は案外多くなくて、「理論的に最適な⼿法が実際に(あなたの環境でも)最適かどうかは計測するまで分からない」って事が言いたかったです。だから、ベンチマークの提示もない改善手法に飛び付かず、計測⇄ボトルネック特定⇄改善のサイクルを回すことが大切です。
この発表の10日前にJSConf JPで発表があり、JSConfが終わって10日間の間にゆっくり資料をつくるつもりだったものの体調を崩して1週間ほど何もできない日々が続き、大急ぎで資料を作りました。
無事に発表を終えることができてよかったです。

poteboy

November 30, 2023
Tweet

More Decks by poteboy

Other Decks in Technology

Transcript

  1. © 2023 THECOO inc.
    CSSパフォーマンスに関する計測結果
    めぐろLT「webブラウザのおもしろいハナシ!!」
    poteboy
    2023/11/30

    View full-size slide

  2. © 2023 THECOO inc..
    OSS - Creator of Kuma UI
    - Core Contributor to Million.js
    GitHub poteboy
    Twitter @_poteboy_
    2
    poteboy
    name
    ⾃⼰紹介

    View full-size slide

  3. © 2023 THECOO inc.
    パフォーマンス、計測してますか?
    突然ですが、、

    View full-size slide

  4. © 2023 THECOO inc.
    前置き:フィボナッチ数列

    View full-size slide

  5. © 2023 THECOO inc.
    理論的に速いが常に速い訳ではない
    n番⽬のフィボナッチ数を求めるアルゴリズム
    ⾃分の⽤いた解法はメモ化でO(n)
    この解法にはより最適解があり、⾏列累乗を使う⽅法でO(log n)
    しかし、メモ化の⼿法で全体1位を獲得している。
    最適なアルゴリズムが常に速いとは限らない。実⾏環境やn数による

    View full-size slide

  6. © 2023 THECOO inc.
    パフォーマンスは計測した⽅がいい
    特にブラウザのような環境ではどのような最適化が裏で⾏われているかブラックボックス。
    ブラウザの内部実装は各ブラウザによって異なるし、⽇々変化している。
    だから、巷の最適化⼿法が今も最適かどうかは計測してみるまで分からない。
    という訳で、今⽇は巷で⾔われている定説を実際に計測した結果を紹介します。
    (実⾏環境は常にChrome)

    View full-size slide

  7. © 2023 THECOO inc.
    CSSアニメーションへのGPU活⽤
    Utilize Hardware Acceleration to CSS Animation

    View full-size slide

  8. © 2023 THECOO inc..
    左図のようなアニメーションをタグに設定する。
    この時、どちらを適⽤しても⾒かけ上の振る舞いとしては変わ
    らない。
    しかし、⽚⽅はパフォーマンスに優れていて⽚⽅は⼤きな負荷
    がかかる。
    どちらがよりパフォーマンスに優れていて、その理由は何か?
    振る舞いが同じアニメーション

    View full-size slide

  9. © 2023 THECOO inc.
    marginで要素を動かす場合
    MacBook Pro 32GB、CPUを6倍低速にした環境で検証。
    ⼀般に60FPS以上がUX的に理想とされている中で、19FPSと
    なっている。

    View full-size slide

  10. © 2023 THECOO inc.
    marginのアニメーションが遅い理由
    marginプロパティはレイアウトの再計算が必要。
    よってmarginをアニメートさせるとフレームごとにレイアウト
    計算が必要になるため負荷がかかる。
    パフォーマンスを計測すると、絶え間なくRenderingとPainting
    が発⽣していることがわかる。

    View full-size slide

  11. © 2023 THECOO inc.
    transformで要素を動かす場合
    MacBook Pro 32GB、CPUを6倍低速にした環境で検証。
    ⼀般に60FPS以上がUX的に理想とされている中で、6低速に
    した環境においても60FPSを達成できている。
    振る舞いは同じなのに何故パフォーマンスに良いか?

    View full-size slide

  12. © 2023 THECOO inc.
    ハードウェアアクセラレーション
    transformとopacityの2つのプロパティはレンダリングに関する処理
    をCPUからGPUに譲渡できる。
    ブラウザの場合は独⽴したレイヤ(Composite Layer)としてGPUに
    命令を送り⾼速なレンダリングを実現する。この処理をCompositing
    という
    また、事前にそれらの値が変わる(アニメーションする)ことが分
    かってることはwill-changeプロパティを⽤いて事前にGPU転送できる
    参考
    :https://web.dev/articles/stick-to-compositor-only-properties-and
    -manage-layer-count?hl=ja

    View full-size slide

  13. © 2023 THECOO inc.
    Composite Layerの確認⽅法
    しかし、なんでもかんでもGPUで処理をさせれば良いという
    訳ではない。
    転送コストが⼤きければレンダリング速度が遅延してしま
    う。
    開発者ツールのLayerタブから、処理がComposite Layerで⾏
    われているか確認できる。

    View full-size slide

  14. © 2023 THECOO inc.
    CSS Minifyのパフォーマンス優位性
    How CSS Minify affect performance

    View full-size slide

  15. © 2023 THECOO inc..
    コード内の不要な改⾏やインデントを削除して、動作はそのままで圧縮‧軽量化するほど。
    ⼀般に容量が削減されることでパフォーマンスに良いとされている。
    ブラウザにおけるパフォーマンスと⼀⼝に⾔ってもネットワーク処理‧レイアウト処理‧スクリプ
    ト処理などに⼤別できるので、今回はネットワークとレイアウトに焦点をあてるために以下の条件
    で⽐較
    ①ネットワーク3G低速環境でMinify前とMinify後を⽐較
    ②CPU6倍低速でMinify前とMinify後を⽐較
    Minifyとは

    View full-size slide

  16. © 2023 THECOO inc.
    CPU6倍低速: Minify前 1.5MB
    LCP: 234ms, onload: 1.41s

    View full-size slide

  17. © 2023 THECOO inc.
    CPU6倍低速: Minify後 817KB
    LCP: 253ms, onload: 1.49s 殆ど有意差なし。

    View full-size slide

  18. © 2023 THECOO inc.
    Network Slow 3G: Minify前 1.5MB
    1.5MBのCSSのダウンロードに37秒ほどかかる

    View full-size slide

  19. © 2023 THECOO inc.
    Network Slow 3G: Minify後 817KB
    817KBのCSSではダウンロードが22秒ほどで済む

    View full-size slide

  20. © 2023 THECOO inc.
    Minifyの優位性
    CSSがMinifyされているかどうかは、Layout、Paint処理においては全く有意差はない。
    つまり、デバイスのスペックには依存しない。
    しかし、通信環境の悪い環境ではCSSの容量が⼤きくパフォーマンスに影響する

    View full-size slide

  21. © 2023 THECOO inc.
    インラインStyle vs 外部CSSファイル
    Inline styles are faster than external CSS

    View full-size slide

  22. © 2023 THECOO inc.
    Inline Stylesは遅いのか?
    Reactのドキュメンテーションには以下のような記述がある
    「CSS classes are generally better for performance than inline styles.」
    https://legacy.reactjs.org/docs/faq-styling.html#are-inline-styles-bad
    これは本当か?
    HTML + 外部CSSファイルには先ほどの計測結果を⽤いる。
    HTML + インラインスタイルを計測してみる。

    View full-size slide

  23. © 2023 THECOO inc.
    CPU6倍低速: インラインStyle属性
    Minify済みHTML上で各DOM要素にインラインでスタイル
    を記述(スタイルは先ほど外部CSSに書いたものと同じ)
    LCPが150ms程度で完了し、外部CSSの約1.5倍⾼速
    Onloadイベントも893ms程度で完了し先ほどの約1.5倍⾼

    インラインStyleの⽅が実⾏速度に優れている結果
    低ネットワーク環境ではどうか

    View full-size slide

  24. © 2023 THECOO inc.
    Network Slow 3G環境での⽐較
    左が外部CSSファイル。右がインラインスタイル。
    低ネットワーク環境ではパフォーマンス差がより顕著に。LCPまでに約2倍の差

    View full-size slide

  25. © 2023 THECOO inc.
    インラインStyleの⽅が速いのか?
    今回の検証結果ではインラインStyleの⽅がパフォーマンスに優れている結果になった。
    しかし結果は計測環境や⼿法によって⼤きく異なる。
    また、次の記事では全く逆の計測結果が出ている。
    https://www.sderosiaux.com/articles/2015/08/17/react-inline-styles-vs-css-stupid-benchmar
    k/

    View full-size slide

  26. © 2023 THECOO inc.
    終わりに
    僕(と仲間たち)で開発しているKuma UIというライブラリでは、常
    にパフォーマンスを計測しながら最適化を進めています。
    今後も開発を続けるためにも、スポンサーを募集しています。
    よろしくお願いします。
    Open Collective:
    https://opencollective.com/kuma-ui
    GitHub 個⼈スポンサー:
    https://github.com/sponsors/poteboy

    View full-size slide