概要説明
Chrome の開発ツールの「カバレッジ」で、ページで使われていない CSS や JavaScript の割合と場所を調べる手順。WordPress のテーマで使っていない定義を、安全に減らすときの注意（ほかのページ・スマホ・動きのある部品・キャッシュ）も。
～ 目次 ～
テーマには、使っていない CSS や JavaScript がたまりやすい
WordPress のテーマは、いろいろな使い方に合わせて作られているので、自分のサイトでは使っていない CSS や JavaScriptがたくさん入っていることがあります。読み込むファイルが大きいほど、ページの表示は遅くなります。
Chrome の開発ツールにある「カバレッジ」を使うと、ファイルごとにどれくらい使われていないかと、どこが使われていないかが分かります。
ファイルによっては、中身の 90% 以上が使われていないこともあります。割合の大きいファイルから見ていくと、効き目が大きくなります。
カバレッジの画面を出す
- 調べたいページを Chrome で開き、F12 キー（Mac は Command + Option + I）で開発ツールを出す
- Ctrl + Shift + P（Mac は Command + Shift + P）でコマンドの欄を出し、「Coverage」と打って「Show Coverage（カバレッジを表示）」を選ぶ
- 開発ツールの下に「カバレッジ」の画面が出たら準備完了
調べるファイルを絞る（例：style.css）
カバレッジの画面で、記録のボタン（ページを読み込み直して記録する）を押すと、読み込んだファイルの一覧が出ます。上の欄にファイルの名前（例：style.css）を入れて絞り込むと、見やすくなります。
| 一覧の列 | 意味 |
|---|---|
| Type | CSS か JS か |
| Total Bytes | ファイル全体の大きさ |
| Unused Bytes | このページで使われなかった大きさと割合 |
使われていない場所を見る
一覧のファイルをクリックすると、ファイルの中身が開き、行ごとに使われたかどうかが分かります。
行の頭に赤い印が付いているところが、このページでは使われなかった定義です。
いきなり消さず、バックアップを取ってから少しずつ
赤い印は「このページを開いたときには使われなかった」という意味で、サイト全体で要らないとは限りません。次のようなものは、赤くても使われています。
| 赤くても使われているもの | 例 |
|---|---|
| ほかのページだけで使う定義 | お問い合わせのページだけのフォームの見た目 |
| 画面の幅で切り替わる定義 | スマホのときだけのメニュー（@media の中） |
| 操作したときに出る定義 | マウスを乗せたとき・ボタンを押して開くメニュー |
消すと元に戻すのが大変なので、まずはコメントにして様子を見ます。いろいろなページで問題がないと確かめてから消します。
要らなさそうな定義が見つかったら
調べたページだけでなく、トップ・記事・一覧・固定ページ・お問い合わせなど、主なページを一通り開いて、カバレッジでも見た目でも確かめます。スマホの幅（開発ツールの端末の切り替え）でも見ます。
どのページでも使われていない定義だけを、コメントにしていきます。
これから使うかもしれない定義（季節のバナーの見た目など）は残しておきます。
キャッシュを消しながら確かめる
CSS を直したのに、ブラウザやサーバーのキャッシュが古いままだと、直す前の見た目で確かめてしまいます。
- ブラウザ：シークレットウィンドウで開く、または開発ツールの「ネットワーク」で「キャッシュを無効化」に印を付けて読み込み直す
- サーバー：キャッシュのプラグインを使っていれば、そのキャッシュを消す
- CSS のファイルの URL にバージョン番号（?ver=…）が付くテーマなら、番号を上げる
直す前のファイルを残しておけば、あとで必要な定義を消してしまったと分かったときにも、すぐに戻せます。
