私のブログはBloggerを利用していて、テーマにはEmporioを使っています。テーマにはかなり手を入れて使っていない機能やコードを消してスリム化してきましたが、使っていないCSSはそのままにしていました。今回はこのCSSをなんとか削除してみたときの記録です。
今はその修正済みのテーマを適用してみてるんだけど、結構良い感じに削除できたのではないでしょうかね🌞
google chromeのカバレッジの機能で、使われているCSS（緑）と使われていないCSS（赤）の割合が確認できます。これはホーム画面のところの計測結果。
使われてないコードの割合を見てみるとリファクタリングの後では結構少なくなりました。
↓カバレッジの機能の使い方はこちらのサイトを参考にしました。
📕対象範囲:
使用していない JavaScript と CSS を見つける | DevTools | Chrome for
Developers
chromeのカバレッジのタブを開く
ブラウザ上で右クリックして「検証」を選択します。
DevToolsが開いたら、Coverageのタブを開きます。タブがなければタブが並んでいるところの一番左にある縦に３つ点が並んだメニューをクリックして開きます。
（そもそも下側にタブ自体が表示されていなければ、右上の歯車アイコンの横にある３つ点が並んだメニューをクリックして「Show
console drawer」を選択する。）
カバレッジを計測する
Coverageのタブで、Per
functionと書いてあるプルダウンメニューの隣の二重丸◎のアイコンをクリックしてブラウザをリロードします。
ここでリロードしたのは、読み込み時に必要なコードを取得するためです。CSSだし、別にいいかなぁと思ったりもしますが。
（あとたまに◎アイコンが場合によってはリロードを意味するようなアイコンになるの何で🤔）
CSSだけに絞る
CoverageタブのURL filterと書いてある入力欄の隣にAllと書いてあるプルダウンメニューがあるので、そのメニューからCSSを指定します。これでCSSでフィルタできて、読み込んだCSSファイルのURLが一覧に表示されます。Bloggerの場合はCSSは別のファイルに別れておらず、htmlファイルのheadの中に全部書かれているのでサイト自身のURLをクリックします。
表示されたhtmlファイルのstyleタグのところを見ると、使われているCSSが緑で表示されて、使われていないCSSの宣言が赤で表示されているのが解ります。
計測結果をダウンロードする
これをこつこつ見ていくのは大変です。結果をJSONとしてダウンロードしてそれを利用します。「URL filter」の隣のダウンロードアイコンをクリックしてファイルをダウンロードします。
ダウンロードしたファイルには他の全てのCSSのファイルが入ってしまうので注意します。どういうことかというと、今クリックして見ているCSSだけではなくて、この計測時に読み込まれた他のCSSも全て入っているということです。
ダウンロードしたファイルのJSONの仕様は以下で確認できます。
📕コードカバレッジデータをエクスポートする｜chrome for Developers
私のブログはPC、タブレット、モバイル用にCSSを書いてあるので、それぞれの端末でアクセスして全ての画面でJSONデータを取得しました。
私のブログの場合17画面ぐらいあったので、合計17個のファイルをダウンロードしました。（結構適当にやったから怪しげ…😌）
使われていないCSSを特定する
JSONデータには、使われているCSSコードが記録されています。
元のテンプレートファイルを参考にして、そこから使われているCSSコードを削除していけば残ったコードが使われていないコードになるはずです。そのコードを実際のBloggerのテンプレートから削除します。
pythonで上記のような考え方で使っていないCSSを抽出して、一覧にして出力するプログラムを作成しました。そして、ブロガーのテンプレートから一覧にある該当CSSをこつこつ削除しました。ここもプログラムでさくっと削除できるかと思ったのですが、テンプレートの方にはCSSの中に変数が使われて可変の部分があるので融通を利かす必要があります。
このJSONでは、使われているコードの場所をrangeの値（何文字目から何文字目までと２つの数値で表している）で示すようになっているので、この値を17個のファイル間で比較すれば同じCSSの宣言があるかどうか簡単に分かるかと思ったのですが、これはあまり良くない方法かもと思ってやめました。17個あるファイルの中でBlogger側でstyle要素が始まる前に自動で何らかのコードが挿入されたものがあった場合に、文字の位置がずれるからです。同じものを指しているのに、rangeが違うということになります。ちゃんと宣言部分を文字列で抜き出してCSSセレクターを確認したほうが間違いなくできる気がします。
そんなわけで、このやり方だと大体３日ぐらいかかりました。
参考
📕試してみたくなる！便利なCSS最適化ツールの使い方 | Coding Methodology | CFニュース | CODING FACTORY - コーディング専門サービス