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

概要説明

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

WordPressの場合はテーマを利用していると使っていない不要な定義が発生しやすい

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 特定のページでプラグインの有効・無効の制御ができるプラグイン Plugin Load Filter

  2. WordPress dashicons.min.cssファイルの読み込みをログイン時だけにする ( WordPress公式アイコン )

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

サイドバー

よく使うカスタマイズ

  1. ローカル環境構築ツール「Local」でWordPress作業環境を構築 ( Windows,Mac対応 )

    2024.04.13

  2. WordPress 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

    2024.04.12

  3. DBキャッシュ機能を実装 外部データなど任意の情報を一定期間キャッシュさせる

    2024.03.2

  4. functions.php処理内のデータをdebug.logに出力する

    2024.02.23

  5. WordPress 永続オブジェクトキャッシュAPC設定を設定して高速化 (エックスサーバー)

    2024.02.20

最近の記事

  1. WordPress 標準の検索機能を無効化 直接アクセスの際にトップページにリダイレクトさせる

    2024.05.11

  2. WordPress Simply Staticプラグインを使用している際に code 429 Too Many Requestsが発生

    2024.05.11

  3. WordPress アスキーアートや隠しメッセージをhtmlソースに追加する

    2024.05.9

  4. WordPress 記事公開前にページ確認してもらいたいときに便利なプラグイン Public Post Preview

    2024.05.9

  5. WordPress「 & 」のコードが意図していない箇所に表示される場合の対応

    2024.05.9

アニメの名言集

俺は俺の責務を全うする！
ここにいる者は誰も死なせない！！

鬼滅の刃
by 煉獄杏寿郎

アニメの名言集
実績・評価 実績・評価
WordPressセキュリティー診断サービス WordPressセキュリティー診断サービス
ご依頼はこちら ご依頼はこちら

Profile

プロフィール

フリースタイル

フリースタイルフリーランス・Webクリエイター

フリーランスとしてWebのお仕事を行っております。制作作業の合間にコンテンツの作成、思いついたアイデアを形にしています。

ランサーズ - 受賞歴

  • ・全国プロフリーランスマップ2023 岡山代表
  • ・2022 ランサーランキング 報酬部門 TOP 100
  • ・2021 ランサーランキング 報酬部門 TOP 100

運営サイト

元Google AdSense担当が教える本当に稼げるGoogle AdSense 収益・集客が1.5倍UPするプロの技60

PAGE TOP
Amazon プライム対象