Chrome開発ツールのカバレッジを使用して使われていない不要なCSS/Javascriptの要素を確認する ( Chrome Coverage )

概要説明

不要な記述を少しでも減らしたいという方向けのテクニック。Chrome開発ツールのカバレッジ機能を使用して作業を行いますが、使われていないという判定になったとしても複数ページでのチェック、コメントアウトを行ってから削除など少しずつ削除してく作業となります。

Chrome開発ツールのカバレッジを使用して使われていない不要なCSS/Javascriptの要素を確認する ( Chrome Coverage )

ファイルによっては全く使っていないものや90%以上使っていない定義が記述されているという場合もあります

Chromeカバレッジ画面の表示

Chrome開発ツールのカバレッジを使用して使われていない不要なCSS/Javascriptの要素を確認する ( Chrome Coverage )

開発者ツールの下に「カバレッジ」が表示されたら利用準備完了です

style.cssを対象に検証をする場合

Chrome開発ツールのカバレッジを使用して使われていない不要なCSS/Javascriptの要素を確認する ( Chrome Coverage )

確認したいファイル名でフィルタリング設定を行いうと作業が行いやすいです

検証結果の確認方法

Chrome開発ツールのカバレッジを使用して使われていない不要なCSS/Javascriptの要素を確認する ( Chrome Coverage )

一覧に表示されている対象のファイルを選択することで検証結果の確認ができます

先頭に赤いラインがついている定義が使用していないと判定された箇所になります。

バックアップを行ったうえで少しずつコメントアウト

赤いラインがついていても絶対に不要とは限らないのでバックアップを行ったうえで少しずつコメントアウトしていきます

いきなり削除するともとに戻したい場合が大変なのでコメントアウトにて対応します。最終的に問題ないことが確認できたらまとめて削除します

この要素は必要なさそうかなというものが見つかったら

該当ページだけではなく他のページでも確認してみましょう。主張なレイアウトにて一通り確認してどこでも使われていないものをコメントアウトしていきます

使っていない定義だとしても今後使うかもしれないというものは残しておきましょう

キャッシュをクリアしながら確認

コメントアウトして確認してどいう作業の際にキャッシュが残っていると修正が反映されていない状態で確認を行っていることになります。シークレットウィンドウなどを使用して確認がオススメです

修正前のバックアップファイルを残しておくことで後々必要なものを削除してしまったときにも復元が行えます

関連機能

  1. WordPress 特定の固定ページだけreCAPTCHAを有効にする ( Contact Form 7使用 )

  2. WordPress wp-cron.phpを無効 定期処理の実行タイミングをページアクセス時からcronに変更してページ表示を高速化

  3. WordPressでURLの埋め込み ( Embed機能 ) を無効化

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

人の偉さはわかりづらい
だからああやって着飾って
見た目でわかるようにするんだ

葬送のフリーレン
by フランメ

Profile

PAGE TOP
Amazon プライム対象