【WordPress】使っていない不要なCSSやJSを特定して削除・無効・除外する方法

こちらの記事では、ブログサイトに書き込んだスタイルシート(CSS)やJavaScriptの中で、競合していたり使っていない不要なコードを特定して、削除・無効化・除外する方法をまとめています。

サイト全体の読み込み速度を高速化するためや、いらないファイルを軽くするために使っていないcssを消しておきましょう。

特に大量のページを削除すると、使っていないcssやJSなどが出てくるので、サイトが重くなってきたり読み込みが遅く感じてきた時に確認してみましょう。

不要なCSSやJSチェックツール

1、Unused CSS

「Unused CSS」は、使用していないCSSを特定することができるサイトです。

自分のサイトURLを入力するだけで、未使用セレクタを一覧表示してくれるもので、各記事のURLの配下まで、確認できる点が優れています

▼Unused CSSの使い方

使い方は簡単で、サイトにログインした後、サイトのURLを入力して「CRAWL FOR UNUSED CSS (未使用のCSSをクロールする)」のボタンを押しましょう。

サイトの読み込みが完了すると、下記のように不要なCSSがピックアップされます。

こちらのツールの利用の注意点として、開発環境のものなのでエラーが出ることがあります。

また、「JSなどで動的に入れ込まれた要素に対して当たっているcssも不要と判断される。」場合があるので、その点を注意して使用しましょう。

2、UnCSS Online!

「UnCSS Online!」は、ログインすると左側にHTMLを貼り付け、右側にCSSを入れると、不要な物を取り除いて短縮されたcssが下記に出力されます。

▼UnCSS Online!の注意点

• 複数ページに関係しているCSSは、対象となるページ全てを左側のHTMLに入力する必要がある
• 文字数制限がある
• JavaScriptは入力できない
• サイト権限や表示方法によって見た目が変わるので事前にバックアップする

関連記事

Web制作

▼Googleアナリティクス

Googleアドセンス・アフィリエイト

サイトデザイン

▼テーマ毎のデザイン

エラー対策