未使用のCSSを削除する
使っていないものは消す
LighthouseのPerformanceの指摘項目にGoogleSEO:Remove unused CSSがある
Calculate Style(BrowserRendering)とかに関係がある
web.dev
未使用のCSSを検出する
coverageパネルを使って簡単に調べられる ref
cmd-pでコマンドパレット開いて「coverage」で検索
レコードしてリロードしたりすれば出る
https://developer.chrome.com/docs/devtools/coverage/
これ緑は「最初のPaintingで使ったもの」なのか ref
赤だから完全に使ってない、とは言い切れない
最初に使ってないだけ
Puppeteerを使う
未使用のCSSを削除する
あまり一筋縄にはいかないっぽい..ummmmrsekut.icon
自動で消すのは良いんだけども、それでstyle崩れが起こってないか確認するのが大変そう
JestのSnapshot Testingするとかはどう #??
jQueryを使っている場合、想定される挙動を全部行った上でstyle崩れがないことを確認しないといけない
scssとか使ってる場合どうなるんだ #??
Puppeteerを使って使っていないCSSを消す
https://blog.cybozu.io/entry/2019/08/20/170000
https://qiita.com/toshi1127/items/2889f7b32ab88c6e79ca
SCSSのコンパイル時にコメントを消すとか?
first viewに必要でないものを読み込まない、という設定もscssのコンパイラの設定でできたりしないんか?
削除する以外の選択肢
最初のPaintに必要な部分をinline化する
htmlのinline記法でstyleを書く
それ以外は普通に書いて非同期でloadさせる
https://web.dev/unused-css-rules/#inline-critical-css-and-defer-non-critical-css
https://web.dev/defer-non-critical-css/
https://github.com/addyosmani/critical/blob/master/README.md
重複CSSを特定する
CSSCSS
https://qiita.com/hibikikudo/items/988c20c98abe0bdb3705
Gulpとしてもあるらしい
https://www.npmjs.com/package/gulp-csscss
https://coliss.com/articles/build-websites/operation/css/4-ways-to-remove-unused-css.html
https://getbootstrap.jp/docs/5.0/customize/optimize/#使用していない-css
bootstrap関連?
http://tkosuga.hateblo.jp/entry/how-fast-page-speed