ProjectCSSの実装手法

ProjectCSSの実装方法は何がいいかについて各所で議論が起こってよくわからなくなったので個別にページを作ってみたseibe.icon

「実装方法」という文言には少し違和感がある。より適切な表現は無いか……？→「実装手法」にした

同じこと思いついてリネームしにきたらもうされてたtakker.icon

以心伝心(違う)

開くまで何のページなのかよく分からなかった。「適用手法」かな‥who.icon

1. 要素を右クリックして開発者ツールの要素インスペクターを開き、スタイルタブに表示されるapp.cssのセレクターをダブルクリックしてテキストエディターにコピー・ペーストします（違う、そうじゃない）

今後実装方法を改良する場合もこのページが参考になったら良いと思う

:igyo:.iconcFQ2f7LRuLYP.iconcak.icon

すばら.iconcak.icon

各手法

個々のCSSを直接import

CSSをbundle&minifyさせる

CSSを1ファイルに書き出す

メリデメ

ProjectCSSの実装手法ごとのメリット・デメリット

歴史は繰り返す#66357fc66eb406000014b3e4を用いて考えてみる

課題が何かを明確にする

課題は何？

パフォーマンスが悪い：各ページの読み込み開始から完了までの時間が長い

これがあったから個々のCSSを直接importからCSSをbundle&minifyさせるに変更したと理解しているseibe.icon

通信時にgzipが効くのでminify+gzipと普通のgzipで効果を計測したいbsahd.icon

メンテナンス性が悪い：ProjectCSSの変更が難しい・大変

これがあったからCSSをbundle&minifyさせるからCSSを1ファイルに書き出すに変更したと理解しているseibe.icon

settingsの置換を図るページ#66339ef5ffff3600004a3c4aを見るとなんか違う気がするseibe.icon

いや、合っているのか。settingsの置換を図るページ#66339f55ffff3600004a3c4fあたり読むとlintやformatには1ファイルのほうが楽とのこと

パフォーマンスが悪い＆メンテナンス性が悪いを課題とするならば、CSSを1ファイルに書き出す & CSSをbundle&minifyさせる、で課題に対して現時点では最良の策が取られているとseibe.icon思うのだけど

settingsの置換を図るページの置換を図るページ#66322e7d71b3c20000f86cf8で書かれている「メンテナンス性」がProjectCSSの変更が難しい・大変以外の何かのことをを指すのだったらそれについての検討が必要なのかな

悪ふざけはどこまで許されるのか suto3.icon

リソースは有限なので期間限定にしたほうがいいと思う

定量的な指標を定義する

測定し前後の結果を記録する

測定 by bsahd.iconさん

table:容量(not速度)

CSS種類圧縮バイト(not仕事) ーーーーーーーグラフーーーーーーー

bundle なし 26,211 /icons/blue1.icon*873

minify なし 17,335 /icons/blue1.icon*577

bundle gzip(標準) 6,083 /icons/blue1.icon*202

bundle gzip(超圧縮) 6,009 /icons/blue1.icon*200

minify gzip(標準) 4,455 /icons/blue1.icon*148

minify gzip(超圧縮) 4,411 /icons/blue1.icon*147

圧縮に使用したソフトウェア:7-zip

ProjectCSSの実装手法#663506e2a56fda00004afb84に従って測るなら測るのはバイトではなく読み込み時間では？seibe.icon

パフォーマンスが悪い：各ページの読み込み開始から完了までの時間が長い

WebPageTestでの結果seibe.icon

定量的な指標を定義していない時点での実施なので勇み足ではある

まあそんな違っていないだろうしいいか……？とも思っている

2024/05/04 9:56（個々のCSSを直接import時）のもの

携帯回線でより大きく問題があるのではないかという話から、SETTINGSはMOTOG4（4G回線を想定？）で実施

結果 (A) https://www.webpagetest.org/result/240504_AiDcD2_KR/

永続する情報なのかわからないのでキャプチャも貼っておく（不要なら記載削除OK）

ぼくらはパーマリンクが永遠じゃないことを知っているので、予備的にキャプチャを張っておくのはよさそうですよ

https://gyazo.com/e1756ba9abbde44de8730cf5b3bfd401

↑が重い人用:https://gyazo.com/5971cb5028f909d644578186a3a2c7e7

CSSをbundleさせる（minify無し）

とりあえずバンドル済みコードに差し替えてみましたbsahd.icon

バンドル済みコードの評価: (B) https://www.webpagetest.org/result/240504_BiDcN5_VY/

相当軽くなった

ありがとうございますseibe.icon

CSSを1ファイルに書き出す & CSSをbundle&minifyさせるバージョンを適用できるなら適用して測定してみたいseibe.icon

2024/5/4 10:03時点のseibe.iconの認識：settingsの置換を図るページの置換を図るページに対する感想等#6633ad1c1280f00000d218fbの作業中のため、適用できるかどうか分かっていない

2024/5/4 15:44時点はこれになっている？

結果

1回目 (C) https://www.webpagetest.org/result/240504_BiDc7X_3H0/

2回目 (D) https://www.webpagetest.org/result/240504_BiDc7V_3KH/

1回目がそんなに早くなくて、合ってる？と思ってもう一回回した

考察

動作の動画をキャプチャーしたほうがよかったかも……seibe.icon

結果を見ると、個々のCSSを直接import時よりほかのほうが早そうというのは分かる

Largest Contentful Paintがほかより1秒ほど早い

けどほかについてはなんとも言えない

そもそも分散が大きくなることもある

(B) では Fastest RunとLatest Run で 3sほどの差

(D) では Fastest RunとLatest Run で 6sほどの差