PageSpeed Insightsで97点を取得した記事で導入したプラグインの一つ、「Asset CleanUp: Page Speed Booster」。このプラグインを導入することで、不要なファイルを取り除くことができ、パフォーマンス改善に大いに貢献します。
今回はAsset CleanUpを使って、不要なファイルを読み込まないようにするにはどうやって設定したらいいかを焦点に、プラグインを使い方と初期設定についてご説明します。
目次
Asset CleanUpはどんな目的のプラグインか
WordPressを使ってサイト制作する場合、複数のプラグインを導入して機能実現を果たすことが多いですが、その場合プラグインを有効にすることで関連するcssやJavaScriptが有効になります。サイト全体で利用する場合は問題有りませんが、中には問い合わせフォームや目次自動生成、人気記事ランキングやスライダーなど特定のページでしか利用しない機能があります。
例：
- Contact Form 7 でお問合せフォームを作成しているが、問い合わせページのみの利用
- Table of Contents Plus で記事の目次を自動生成しているが、記事ページのみの利用
- WordPress Popular Posts で人気記事ランキングを作成しているが、記事ページ、カテゴリー等のアーカイブページのサイドバーのみに表示
- MetaSlider でスライダーを作成しているが、トップページのみの利用
- TablePress で表を作成しているが、利用しているのは特定の固定ページや記事のみ
このような場合、利用していないページでは使わないcssやJavaScriptを読み込んでも利用先がないため、無駄な状態です。プラグインが増えれば増えるほど、無駄なリソースを読み込んでいる状態になってしまいます。
そこで「使っていないファイルを読み込まないように設定する」という目的を果たすのが、Asset CleanUpプラグインです。このプラグインを使うことで不要なファイルの読み込みを減らし、ページサイズの減少、つまりパフォーマンス改善に繋がり、結果的に閲覧者にとってストレスの少ないサイトとなります。結果的にPageSpeed Insights等の表示速度検証ツールでのスコア上昇に寄与します。
「CSSの最適化」「JavaScriptの最適化」といった設定も可能ですが、キャッシュ系プラグインとバッティングする機能となり（WP Rocketを使っている環境だと有効にできないようになっていました）、今回は目的から外れるため本記事では特に触れません。
また、全項目の説明をしているとあまり関係のないところもあるため、初期設定とファイルの読み込みの管理に関する部分をピックアップして説明します。
Asset CleanUpの設定方法
WordPress公式プラグインディレクトリ（ Asset CleanUp: Page Speed Booster ）からダウンロードしてインストールするか、WordPressの管理画面からプラグインをインストールします。
Stripping the “fat” を読んで理解したことを保存
プラグインを有効化後、サイドメニューにAsset CleanUpが追加されました。Settingをクリックすると「Stripping the “fat”」という画面が表示され、プラグインについての説明やどんな影響があるかが書いてあります。
- このプラグインの主な目的はCSSやJavaScriptの不要なファイルを取り除くこと
- まずはトップページなど最適化したいページを対象にすることをおすすめ
- 他のキャッシュ系プラグインを使っている場合はCSS、JavaScriptの最適化は行わないこと
- キャッシュ系プラグインがどのように連携しているのかの説明
- 不要なファイルを読み込まないように設定すれば速くなるが、その他の要因が影響することもある
- Asset CleanUpがフロントで読み込むファイルを追加することはない
上記のようなことが書いてあるので、読んで理解したらページ最下部にあるチェックをクリックし、既読にして保存します。
プラグインの利用するための基本設定
「Plugin Usage Preferences」はプラグインの利用するための基本設定の項目です。
WordPressのコアファイルを隠すか
「Hide WordPress Core Files From The Assets List?」はWordPressのコアに関するファイルを制御したい場合に有効化します。例えば、jquery、wp-embed、comment-reply、dashicons等です。jQueryをテーマ側で読み込んでいて重複していたり、URLの埋め込みカードは不要だったり、コメント機能を使っていなかったする場合は有効化してファイルの読み込みを管理できるようにします。これらについて対応しない場合は隠したままで構いません。
テストモード
「Test Mode」はAsset CleanUpの設定中はサイト訪問者は設定を反映させないようにするテストモードという機能です。必要なファイルまで読み込まないようにしてしまった、ということは大いに考えられるため、設定中はテストモードを有効化し、訪問者は安全にページを閲覧できる状態にしておきましょう。
サイト全体で読み込まないファイルの設定
「Site-Wide Common Unloads」はサイト全体で読み込むファイルの管理ができる項目です。
絵文字の読み込みを無効化
「Disable Emojis Site-Wide」はWordPress 4.2からは絵文字を利用できる機能が追加されましたが、ブログがメインとしてWordPressを使っている場合や、絵文字を利用する機会があるという場合は以外は不要ですので、絵文字を読み込まないように設定します。
埋め込み機能を無効化
「Disable oEmbed (Embeds) Site-Wide」は他サイトやYoutubu等のリンク（URL）を埋め込む際にリンクを設置するだけでリンク埋め込みができる機能です。対応している外部サイトの場合、ブログカードとして表示されます。
ブログをメインとして使っていて、既に埋め込み機能を使っている場合は無効化にすると表示が変わります。例えばブログカードとして埋め込まれていたのが、URL（リンクは活きる）の表記に変わります。
埋め込み機能を使っていなくて、今後も使う予定がない場合は無効化します。
アイコン（dashicons）を無効化
「Disable Dashicons if Toolbar is hidden (Site-Wide)」はWordPressにログインしている状態の場合、上部にツールバーが表示されますが、ここで使われているアイコンが非ログイン状態でも読み込まれている場合があります。その場合は不要なので無効化します。
コメント機能を無効化
「Disable Comment Reply Site-Wide」はブログ運営では必要なことの多いコメント機能を無効にできる機能です。
今やWordPressはブログ構築にとどまらず、企業のコーポレートサイトやサービスサイト、ブランドサイトに多く採用されています。そのような場合はコメント機能は使っていないことが多いため、コメントのために読み込まれているJavaScriptファイル(/wp-includes/js/comment-reply(.min).js)が不要です。その場合は無効化します。
各ページでCSSとJavaScriptを読み込まないようにする設定
ここからがAsset CleanUpの本題です。例えばトップページでは問い合わせフォーム用に読み込まれているCSSとJavaScriptを読み込まないように設定する、固定ページではスライダー用のCSSとJavaScriptを読み込まないなど、各ページで読み込まないCSSとJavaScriptを設定します。それが「CSS & JS MANAGER」です。
ページにアクセスすると、横並びのタブメニューとして「Homepage」「Posts」「Pages」……といったように各ページが並んでいます。「Category」「Tag」等、一部Pro版の機能として制限があるため、無料版で設定できるページは限られています。無料版でも十分設定できるので、まずは設定し、制限をクリアしたいと思ったらPro版購入を検討しましょう。
まず表示されているのは「Homepage」となり、トップページで読み込まれた各CSSとJavaScriptを読み込まないように設定します。「読み込む必要のない」ファイルを選択するという点に注意してください。（読み込むファイルじゃないですよ）
テストモードが有効になっているかどうか念の為確認しておきましょう。
特定のページのみ読み込まないようにする
例えば冒頭にあったように、「トップページでは問い合わせフォーム用に読み込まれているCSSとJavaScriptを読み込まないように設定する」場合。下の方にスクロールし、「Contact form 7」と表示されている箇所を探します。
すると、CSSとして「/contact-form-7/includes/css/styles.css」、JavaScriptとして「/contact-form-7/includes/js/index.js」が1つずつ読み込まれているようです。
トップページのみこの2ファイルを読み込まないようにするため、「Unload on this page」をクリックし有効化します。これによって、トップページのみ読み込まないようになり、その他のページは読み込みます。
有効にしたら、画面最下部にある「Update」をクリックし保存します。トップページを見て、該当のソースコードが読み込まれていないか確認します。
確認方法はソースコードを表示してでもいいですし、デベロッパーツールから見てもやりやすい方法で構いません。ここではデベロッパーツールをのNetwork機能を使って確認しました。
Network機能に移動した上で再読み込みすると読み込まれるファイルが表示されるので、「CSS」でフィルタするとCSSのみ表示されるので便利です。Asset CleanUp適用前は「styles.css?ver=5.4.2」というContact form 7で読み込まれているファイルがあるのですが、
Asset CleanUp適用後は該当CSSがなくなっているのが確認できました。
こんな感じで、不要なプラグインを読み込まないよう設定し、設定後に画面確認します。もちろん、画面自体が崩れていたり不具合がでていないか確認します。
他のプラグインも同じように、目的とするプラグインを探し出し、CSSやJavaScriptを読み込まないように設定します。
一部のページだけ有効にし、ほかは読み込まないようにしたい場合
一方、特定のページだけ有効として、あとのページは全て読み込まないようにしたい場合。その場合は「サイト全体で一旦読み込まないように設定してから、特定のページだけ読み込む」という設定を行います。
例えば、問い合わせフォームは問い合わせページだけでしかフォームがないため、それ以外のページでフォームを使っていないとします。その場合は以下のようにサイト全体で読み込みをしないようにした上で、特定ページのみで有効とします。
保存後、タブメニューの「Pages」へ移動し、「読み込みを有効としたい」ページをページ名や投稿IDをいれて検索します。するとサジェストで表示されますので、クリックします。
該当のページに対しての読み込み設定が表示されるので、Contact Form 7箇所を探します。「Keep site-wide rule」にチェックが入っているのを確認した上で、「Make an exception from any unload rule & always load it:」の「On this page」にチェックをいれましょう。JavaScriptに関しても同じように設定します。
保存して先程と同じように画面を確認します。
WordPressのコアファイルの表示
WordPressのコアファイルを隠さない設定にしている場合は、WordPressコアファイルについても表示されています。注意書きがありますが、WordPressアイコンのある設定箇所はコアファイルのため、どうしたらいいかわからなければそのままにして分かる人と相談して、と書いてあります。
表示されていない場合は「Plugin Usage Preferences」に隠すかどうかの設定があるので表示したい場合は「Hide WordPress Core Files From The Assets List?」を無効化します。（上部参照）
テストモードを解除して設定を適用する
上記を各プラグイン、テーマ、場合によってはWordPressコア等に設定します。テストモードであればログインしていない一般アクセスには影響がありませんので、恐れることなく設定して問題有りません。
一通り設定が終わったら各画面を確認します。不具合等が発生しないか、以前と異なる部分はないか。トップ、投稿記事、固定ページ、カテゴリーやタグ一覧、検索結果画面や404ページ等も。ブラウザのキャッシュが残っている可能性があるかもしれないため、シークレットモードやプライベートウィンドウで確認します。
問題ないようであれば、テストモードを解除して完了です。
キャッシュ系プラグインを導入している場合は機能衝突に注意
キャッシュ系プラグインを導入している場合、いくつかの機能はバッティングしてしまうため、Asset CleanUp側は設定しないほうがよさそうです。以下は衝突しそうな機能の一例です。
- HTML Source CleanUp
- Local Fonts
- Google Fonts
- Disable XML-RPC
個人的にはWP Rocketを導入することが多いため、上記は一切有効化していません。WP Rocketについては以前記事を書いたので興味があれば御覧ください。
設定後はPageSpeed Insights等をチェック
以上、Asset CleanUpプラグインの設定方法のご紹介でした。
設定完了後はどのくらい変わったか、PageSpeed InsightsやWebPageTest等のチェックツールでどのくらい改善したか実施前と実施後で見比べてみましょう。
レンダリングを妨げるリソースの除外やJavaScriptの実行にかかる時間の低減あたりが改善されているかと思います。
正しく設定されていれば以前より点数はきっと上がっているはずです。体感でもスピードアップしているのを感じられるかもしれません。
コメントを残す