• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / Asset CleanUp の基本的な設定

Asset CleanUp の基本的な設定

池田祐太郎 | 2021年9月3日 公開 コメントを書く

PageSpeed Insightsで97点を取得した記事で導入したプラグインの一つ、「Asset CleanUp: Page Speed Booster」。このプラグインを導入することで、不要なファイルを取り除くことができ、パフォーマンス改善に大いに貢献します。

今回はAsset CleanUpを使って、不要なファイルを読み込まないようにするにはどうやって設定したらいいかを焦点に、プラグインを使い方と初期設定についてご説明します。

目次

  • 1 Asset CleanUpはどんな目的のプラグインか
  • 2 Asset CleanUpの設定方法
    • 2.1 Stripping the “fat” を読んで理解したことを保存
    • 2.2 プラグインの利用するための基本設定
      • 2.2.1 WordPressのコアファイルを隠すか
    • 2.3 テストモード
    • 2.4 サイト全体で読み込まないファイルの設定
      • 2.4.1 絵文字の読み込みを無効化
      • 2.4.2 埋め込み機能を無効化
      • 2.4.3 アイコン(dashicons)を無効化
      • 2.4.4 コメント機能を無効化
    • 2.5 各ページでCSSとJavaScriptを読み込まないようにする設定
      • 2.5.1 特定のページのみ読み込まないようにする
      • 2.5.2 一部のページだけ有効にし、ほかは読み込まないようにしたい場合
      • 2.5.3 WordPressのコアファイルの表示
    • 2.6 テストモードを解除して設定を適用する
    • 2.7 キャッシュ系プラグインを導入している場合は機能衝突に注意
  • 3 設定後はPageSpeed Insights等をチェック

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の管理画面からプラグインをインストールします。

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」をクリックし有効化します。これによって、トップページのみ読み込まないようになり、その他のページは読み込みます。

CSSを読み込まないように設定
JavaScriptを読み込まないように設定

有効にしたら、画面最下部にある「Update」をクリックし保存します。トップページを見て、該当のソースコードが読み込まれていないか確認します。

確認方法はソースコードを表示してでもいいですし、デベロッパーツールから見てもやりやすい方法で構いません。ここではデベロッパーツールをのNetwork機能を使って確認しました。

Network機能に移動した上で再読み込みすると読み込まれるファイルが表示されるので、「CSS」でフィルタするとCSSのみ表示されるので便利です。Asset CleanUp適用前は「styles.css?ver=5.4.2」というContact form 7で読み込まれているファイルがあるのですが、

デベロッパーツールのNetwork機能。Asset CleanUp利用前はこのように表示されている

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アイコンのある設定箇所はコアファイルのため、どうしたらいいかわからなければそのままにして分かる人と相談して、と書いてあります。

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については以前記事を書いたので興味があれば御覧ください。

WP Rocketの設定方法と使い方

設定後はPageSpeed Insights等をチェック

以上、Asset CleanUpプラグインの設定方法のご紹介でした。

設定完了後はどのくらい変わったか、PageSpeed InsightsやWebPageTest等のチェックツールでどのくらい改善したか実施前と実施後で見比べてみましょう。

レンダリングを妨げるリソースの除外やJavaScriptの実行にかかる時間の低減あたりが改善されているかと思います。

正しく設定されていれば以前より点数はきっと上がっているはずです。体感でもスピードアップしているのを感じられるかもしれません。

わかりづらかった部分などあればコメント欄やtwitter、問い合わせ等でお知らせください。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress 関連タグ:Webサイト高速化

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース
2022年3月9日
タグ: Webサイト高速化, プラグイン
カテゴリー: WordPress
KUSANAGIの技術を取り入れた最新Xserverに移行後のパフォーマンス比較結果
2022年2月25日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress
Xserver 新サーバー移行時は注意。発生したエラーと対応方法
2022年2月17日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.