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

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

Transcript

1. © 2023 THECOO inc. CSSパフォーマンスに関する計測結果 めぐろLT「webブラウザのおもしろいハナシ！！」 poteboy 2023/11/30
2. © 2023 THECOO inc.. OSS - Creator of Kuma UI - Core Contributor to Million.js GitHub poteboy Twitter @_poteboy_ 2 poteboy name ⾃⼰紹介
3. © 2023 THECOO inc. パフォーマンス、計測してますか？ 突然ですが、、
4. © 2023 THECOO inc. 前置き：フィボナッチ数列
5. © 2023 THECOO inc. 理論的に速いが常に速い訳ではない n番⽬のフィボナッチ数を求めるアルゴリズム ⾃分の⽤いた解法はメモ化でO(n) この解法にはより最適解があり、⾏列累乗を使う⽅法でO(log n) しかし、メモ化の⼿法で全体1位を獲得している。 最適なアルゴリズムが常に速いとは限らない。実⾏環境やn数による
6. © 2023 THECOO inc. パフォーマンスは計測した⽅がいい 特にブラウザのような環境ではどのような最適化が裏で⾏われているかブラックボックス。 ブラウザの内部実装は各ブラウザによって異なるし、⽇々変化している。 だから、巷の最適化⼿法が今も最適かどうかは計測してみるまで分からない。 という訳で、今⽇は巷で⾔われている定説を実際に計測した結果を紹介します。 （実⾏環境は常にChrome）
7. © 2023 THECOO inc. CSSアニメーションへのGPU活⽤ Utilize Hardware Acceleration to CSS Animation
8. © 2023 THECOO inc.. 左図のようなアニメーションを<main/>タグに設定する。 この時、どちらを適⽤しても⾒かけ上の振る舞いとしては変わ らない。 しかし、⽚⽅はパフォーマンスに優れていて⽚⽅は⼤きな負荷 がかかる。 どちらがよりパフォーマンスに優れていて、その理由は何か？ 振る舞いが同じアニメーション
9. © 2023 THECOO inc. marginで要素を動かす場合 MacBook Pro 32GB、CPUを6倍低速にした環境で検証。 ⼀般に60FPS以上がUX的に理想とされている中で、19FPSと なっている。
10. © 2023 THECOO inc. marginのアニメーションが遅い理由 marginプロパティはレイアウトの再計算が必要。 よってmarginをアニメートさせるとフレームごとにレイアウト 計算が必要になるため負荷がかかる。 パフォーマンスを計測すると、絶え間なくRenderingとPainting が発⽣していることがわかる。
11. © 2023 THECOO inc. transformで要素を動かす場合 MacBook Pro 32GB、CPUを6倍低速にした環境で検証。 ⼀般に60FPS以上がUX的に理想とされている中で、6低速に した環境においても60FPSを達成できている。 振る舞いは同じなのに何故パフォーマンスに良いか？
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
13. © 2023 THECOO inc. Composite Layerの確認⽅法 しかし、なんでもかんでもGPUで処理をさせれば良いという 訳ではない。 転送コストが⼤きければレンダリング速度が遅延してしま う。 開発者ツールのLayerタブから、処理がComposite Layerで⾏ われているか確認できる。
14. © 2023 THECOO inc. CSS Minifyのパフォーマンス優位性 How CSS Minify affect performance
15. © 2023 THECOO inc.. コード内の不要な改⾏やインデントを削除して、動作はそのままで圧縮‧軽量化するほど。 ⼀般に容量が削減されることでパフォーマンスに良いとされている。 ブラウザにおけるパフォーマンスと⼀⼝に⾔ってもネットワーク処理‧レイアウト処理‧スクリプ ト処理などに⼤別できるので、今回はネットワークとレイアウトに焦点をあてるために以下の条件 で⽐較 ①ネットワーク3G低速環境でMinify前とMinify後を⽐較 ②CPU6倍低速でMinify前とMinify後を⽐較 Minifyとは
16. © 2023 THECOO inc. CPU6倍低速: Minify前 1.5MB LCP: 234ms, onload: 1.41s
17. © 2023 THECOO inc. CPU6倍低速: Minify後 817KB LCP: 253ms, onload: 1.49s 殆ど有意差なし。
18. © 2023 THECOO inc. Network Slow 3G: Minify前 1.5MB 1.5MBのCSSのダウンロードに37秒ほどかかる
19. © 2023 THECOO inc. Network Slow 3G: Minify後 817KB 817KBのCSSではダウンロードが22秒ほどで済む
20. © 2023 THECOO inc. Minifyの優位性 CSSがMinifyされているかどうかは、Layout、Paint処理においては全く有意差はない。 つまり、デバイスのスペックには依存しない。 しかし、通信環境の悪い環境ではCSSの容量が⼤きくパフォーマンスに影響する
21. © 2023 THECOO inc. インラインStyle vs 外部CSSファイル Inline styles are faster than external CSS
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 + インラインスタイルを計測してみる。
23. © 2023 THECOO inc. CPU6倍低速: インラインStyle属性 Minify済みHTML上で各DOM要素にインラインでスタイル を記述（スタイルは先ほど外部CSSに書いたものと同じ） LCPが150ms程度で完了し、外部CSSの約1.5倍⾼速 Onloadイベントも893ms程度で完了し先ほどの約1.5倍⾼ 速 インラインStyleの⽅が実⾏速度に優れている結果 低ネットワーク環境ではどうか
24. © 2023 THECOO inc. Network Slow 3G環境での⽐較 左が外部CSSファイル。右がインラインスタイル。 低ネットワーク環境ではパフォーマンス差がより顕著に。LCPまでに約2倍の差
25. © 2023 THECOO inc. インラインStyleの⽅が速いのか？ 今回の検証結果ではインラインStyleの⽅がパフォーマンスに優れている結果になった。 しかし結果は計測環境や⼿法によって⼤きく異なる。 また、次の記事では全く逆の計測結果が出ている。 https://www.sderosiaux.com/articles/2015/08/17/react-inline-styles-vs-css-stupid-benchmar k/
26. © 2023 THECOO inc. 終わりに 僕（と仲間たち）で開発しているKuma UIというライブラリでは、常 にパフォーマンスを計測しながら最適化を進めています。 今後も開発を続けるためにも、スポンサーを募集しています。 よろしくお願いします。 Open Collective: https://opencollective.com/kuma-ui GitHub 個⼈スポンサー: https://github.com/sponsors/poteboy