Asset CleanUp:Page Speed Boosterの使い方と設定

2020年5月1日2020年7月4日

プラグインをインストールすると、Javascript や CSS を使用している場合、
大抵の場合は Web サイトの全てのページで、Javascript や CSS がロードされてしまいます。

それが必要であれば問題は無いのですが、
例えば、お問い合わせフォームを設置するプラグインだと、
Javascript や CSS は、問い合わせフォームを設置した場所だけで必要ですよね？
他のページではロードする必要がありません。
ロードすると少なからずページの表示速度に悪影響を与えてしまいます。
なので、不要なページでは、ロードしないようにしたい。

そのような時に便利な WordPress 用プラグインがあります。
それは「Asset CleanUp:Page Speed Booster」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

10銘柄52袋入り【10gコーヒーお試しセット】
1冊ですべて身につくWordPress入門講座

Asset CleanUp:Page Speed Booster

Asset CleanUp:Page Speed Booster は、特定の Javascript と CSS ファイルを投稿・固定ページ等でロードされないようにできます。

Asset CleanUp:Page Speed Booster には、それ以外にも以下の特徴があります。

• HTML コードをの縮小（GZIP 圧縮可）
• JavaScript ファイルの縮小（インラインコードを含む）
• CSS ファイルの縮小（インラインコードを含む）
• インライン CSS ファイル（自動的に＆スタイルシートへのパスを指定して）
• スクリプトタグに defer 属性を適用可
• Google フォントの最適化と削除
• ローカルフォントの最適化
• Javascript・CSS・Google フォントファイル・ローカルフォントのプリロード化
• HTML コメントの削除
• 絵文字の削除
• ゲストユーザーのダシコンの削除
• コメント返信の削除
• Really Simple Discovery（RSD）リンクタグの削除
• Windows Live Writer リンクタグの削除
• REST API リンクタグの削除
• 投稿と固定ページの Shortlinkタグの削除
• 投稿のリレーショナルリンクタグの削除
• WordPressバージョンのメタタグの削除
• 全ての「ジェネレータ」メタタグの削除
• RSS フィードリンクタグの削除
• 埋め込み機能の無効化
• XML-RPC プロトコルの部分的または完全な無効化

Javascript ファイルと CSS ファイルの結合もできますが、
HTTP/2 の環境下で結合を行うとかえって表示速度の改善にならないケースもあります。
なので、他の設定を行ってから個別で設定を行うと良いかもです。

HTTP/2ではJSやCSSの結合は表示速度改善への妨げになるかも – WordPress 活用術

記事を作成もしくは更新時点での Asset CleanUp:Page Speed Booster のバージョン：1.3.6.1
マルチサイトでの利用:可

Gutenberg エディターでの動作

Gutenberg エディターに専用機能が追加されます。

インストール手順

Asset CleanUp:Page Speed Booster をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Asset CleanUp:Page Speed Booster – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Asset CleanUp:Page Speed Booster」と入力します。

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Asset CleanUp:Page Speed Booster を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

管理画面の「設定」メニューの下に追加されています。
デフォルトでは、「設定」メニューの中にも追加されています。

使い方

基本的な使い方の流れは、下のような感じにするみたいです。

CSS & JS Manager でロードする必要のない Javascript と CSS ファイルを選択する。
※特定の投稿や固定ページでロードさせたくない場合は、編集画面から設定可。
選択が完了したら、設定画面から縮小・結合・延期・インライン化をする。

あとは、その他の最適化設定を行う感じみたいです。

CSS & JS Manager

ホームページ・投稿・固定ページ・カスタム投稿・メディアで読み込まれているファイルが表示されるようです。
分かってないのを無理に説明すると混乱を招くので、とりあえず説明は省略します。

Assets List Layout:
アセットリストのレイアウトを変更できます。

各投稿・固定ページの編集画面から読み込み不要のリソースを選択できます。

Preload (if kept loaded)?:
プリロードさせるかどうか。

Unload on this page:
このページでロードしないようにするかどうか。

Unload site-wide * everywhere:
サイト全体でロードしないようにするかどうか。

Unload on All Pages of “post" post type:
この投稿タイプでロードしないようにするか。

チェックを付けて保存すると、Unload が Load 項目に変化します。

Inline styling associated with the handle:
インライン CSS コードを確認できます。

オプション設定もできます。

Do not minify CSS files on this page:
このページで CSS ファイルを縮小しないようにするかどうか。

Do not combine CSS files on this page:
このページで CSS ファイルを結合しないようにするかどうか。

Do not minify JS files on this page:
このページで Javascript ファイルを縮小しないようにするかどうか。

Do not combine JS files on this page:
このページで Javascript ファイルを結合しないようにするかどうか。

Do not apply any CSS & JavaScript settings on this page:
(including preloading, “async", “defer" & any unload rules)
このページに CSS と Javascript の設定を適用しないようにするかどうか。
（プリロード・非同期・遅延とアンロードルールを含む）

クラシックエディターでも同じことができます。

設定

余分なものを取り除く（Stripping the fat）

プラグインがどのように機能するかみたいな事が記載されています。

で、最後にプラグインがどのように機能するか理解できましたか？
間違ったアンロードをすると、
レイアウトとフロントエンド機能が壊れることを理解してますか？
みたいな事が書かれています。理解したらなら有効にします。

有効にしたからと言って何か変わるわけでもないです。

使用設定（Plugin Usage Preferences）

Manage in the Dashboard:
ダッシュボードでアンロード設定を行うかどうかを選択します。
有効にすると編集画面に設定項目が追加されます。

Select a retrieval way:
アセットの検索方法を選択します。

アセット一覧の表示方法を選択します。

編集画面に追加されるメタボックスの非表示設定ができます。

Hide “Asset CleanUp Pro: CSS & JavaScript Manager" meta box:
「CSS＆JavaScript Manager」メタボックスを非表示にするかどうか。

Hide “Asset CleanUp Pro: Options" meta box:
「オプション」メタボックスを非表示にするかどうか。

Hide all meta boxes for the following public post types:
特定の投稿タイプでの投稿の全てのメタボックスを非表示にしたい場合に使用します。

Manage in the Front-end:
有効にすると、ログイン時に表示するページ（ホームページ、投稿、またはページ）の下にメタボックスの機能が表示されます。

※試しに表示させてみましたが、見づらいので無効のままで良いかと思います。

Assets List Layout:
アセット一覧のレイアウトを選択します。

Hide “Asset CleanUp" from the top Admin Bar:
管理バーから専用メニューを非表示にするかどうか。

On Assets List Layout Load, keep the expandable areas:
アセット一覧を展開して表示するか、折りたたんで表示するかを選択します。

On Assets List Layout Load, keep “Inline code associated with this handle" area:
一部のアセット（CSS と JavaScript）に関連付けられたインラインコードを展開表示するかどうか。

Input Fields Style:
チェックボックス/セレクターをどのように表示するかを選択します。

Hide WordPress Core Files From The Assets List?:
アセット一覧から WordPress コアファイルを非表示にするかどうか。

Allow Usage Tracking:
プラグインの使用状況を匿名で追跡することを許可するかどうか。

Fetch assets’ caching information from:
アセットのキャッシュ情報の取得先を選択します。

Clear previously cached CSS/JS files older than (x) days:
指定した日数よりも古い CSS と JavaScript ファイルのキャッシュを削除できます。

Do not load the plugin on certain pages:
特定のページで、このプラグインを読み込みたくない場合に使用します。
URI で指定します。正規表現可。

テストモード（Test Mode）

テストモードを有効にするかどうか。
有効にすると、プラグインで行った変更を管理者のみに適用することができます。

CSS最適化（Optimize CSS）

CSS Files Minification:
CSS ファイルを縮小し、キャッシュからロードするようにするかどうか。

Minify inline CSS content within STYLE tags:
STYLE タグ内のインライン CSS コンテンツを縮小するかどうか。

Do not minify the CSS files matching the patterns below (one per line):
縮小させたくない CSS ファイルを以下で指定できます。（1 行に 1 つ）。
パターンマッチでの指定も可。

以下のものは既に最適化＆縮小されているので、縮小されません。
.min.css で終わる WordPress 本体の CSSファイル。
WooCommerce の特定の CSS ファイル

Combine loaded CSS (Stylesheets) into fewer files:
CSS ファイルを結合することができる項目ですが、
HTTP / 2 では推奨されなくなっているので省略します。

Inline CSS Files:
同じドメインにある CSS ファイルの自動インライン化もしくは、
ファイルへの相対パスを指定することで手動で配置できます

Inline Stylesheet (.css) Files Smaller Than:
指定したサイズよりも小さい CSS ファイルを自動インライン化するかどうか。

インライン化したいファイルへの相対パスまたはその一部をテキストエリアに記述できます（1 行に 1 つ）。

Defer CSS Loaded in the(Footer):
Pro 版のみの機能です。

Cache Dynamic Loaded CSS:
動的に読み込まれた CSS をキャッシュするかどうか。
このプラグインの新規インストール時または設定のリセット後にデフォルトで有効になります。

Javascript最適化（Optimize Javascript）

JavaScript Files Minification:
Javasscript ファイルを縮小し、キャッシュからロードするようにするかどうか。

Minify inline JavaScript content within SCRIPT tags:
SCROPT タグ内のインライン Javascript コンテンツを縮小するかどうか。

Do not minify the JavaScript files matching the patterns below (one per line):
縮小させたくない Javascript ファイルを以下で指定できます。（1 行に 1 つ）。
パターンマッチでの指定も可。

以下のものは既に最適化＆縮小されているので、縮小されません。
.min.js で終わる WordPress 本体の CSSファイル。
/ wp-includes / js / jquery / jquery.js の jQuery ライブラリ。

Combine loaded JS (JavaScript) into fewer files:
JavascriptS ファイルを結合することができる項目ですが、
HTTP / 2 では推奨されなくなっているので省略します。

Inline JavaScript Files:
Pro 版のみの機能です。

Move jQuery Inline Code After jQuery library is called:
ブラウザのコンソールに jQuery に関連する Javascript エラーが表示される場合にのみ有効にすること。

Move All script tags From HEAD to BODY:
Pro 版のみの機能です。

Cache Dynamic Loaded JavaScript:
動的に読み込まれた Javascript をキャッシュするかどうか。
このプラグインの新規インストール時または設定のリセット後にデフォルトで有効になります。

CDN（CDN）

Enable CDN URL rewrite?:
CDN サーバの URL への書き換えを有効にするかどうか。
CDN の CNAME / URL を入力します。

サイト全体の共通アンロード（Site-Wide Common Unloads）

Disable Emojis Site-Wide:
WordPress の絵文字（スマイルアイコン）をサイト全体で無効にするかどうか。

Disable oEmbed (Embeds) Site-Wide:
サイト全体で埋め込み機能（oEmbed)を無効にするかどうか。
記事に他の Web サイトの記事、YouTube 動画、ツイートなどを埋め込みたい場合には、
有効のままにしておきましょう。

Disable Dashicons Site-Wide For Guests:
サイト全体でゲストユーザーのダシコンを無効にするかどうか。

Disable Gutenberg CSS Block Library Site-Wide:
サイト全体で Gutenberg ブロックの CSS ライブラリを無効にするかどうか。

Disable jQuery Migrate Site-Wide:
サイト全体で jQuery Migrate を無効にするかどうか。

Disable Comment Reply Site-Wide:
サイト全体でコメント返信を無効にするかどうか。

HTMLクリーンアップ（HTML Source CleanUp）

Remove “Really Simple Discovery (RSD)" link tag?:
「Really Simple Discovery（RSD）」リンクタグを削除するかどうか。

Remove “Windows Live Writer" link tag?:
「Windows Live Writer」リンクタグを削除するかどうか。

Remove “REST API" link tag?:
「REST API」リンクタグを削除するかどうか。

Remove Pages/Posts “Shortlink" tag?:
投稿・固定ページの「Shortlink」タグを削除するかどうか。

Remove “Post’s Relational Links" tag?:
「Post’s Relational Links」タグを削除するかどうか。

Remove “WordPress version" meta tag?:
「WordPress バージョン」メタタグを削除するかどうか。

Remove All “generator" meta tags?:
全ての「ジェネレータ」メタタグを削除するかどうか。

Remove Main RSS Feed Link?:
メイン RSS フィードリンクを削除するかどうか。

Remove Comment RSS Feed Link?:
コメント RSS フィードリンクを削除するかどうか。
投稿でコメント機能を使用しない等の場合には削除できます。

Strip HTML comments?:
HTML コメントを削除するかどうか。

ローカルフォント最適化（Local Fonts）

Apply font-display: CSS property value
Pro 版のみの機能です。

Preload Local Font Files:
ローカルフォントファイル（.woff / .woff2 / .ttf）のをプリロードする場合は、
以下に URI を追加します。（1 行に 1 つ）。

Google Fonts最適化（Google Fonts）

Fonts配信の最適化（Optimize Font Delivery）

Combine Multiple Requests Into Fewer Ones:
複数のフォントリクエストを組み合わせて、リクエスト数を減らせます。

Render-blocking (default):
レンダーブロッキング（デフォルト）

Asynchronous via Web Font Loader (webfont.js):
Web Font Loader（webfont.js）による非同期

Asynchronous by preloading the CSS stylesheet:
CSS スタイルシートをプリロードすることによる非同期

Apply font-display: CSS property value
全ての Google フォント URL リクエストに「display =」を追加するかどうか。
これにより、@ font-face内に「font-display」CSSプロパティが出力されます。

Preconnect?:
事前接続をするかどうか。

Preload Google Font Files:
Google フォントファイルをプリロードしたい場合に URL を追加します。（1 行に 1 つ）。

全て削除（Remove ALL）

Remove Google Fonts:
Web サイトから 全ての Google フォントを削除するかどうか。

削除例。

XML-RPCの無効化（Disable XML-RPC）

XML-RPC ピングバック のみを無効にするか、
XML-RPC を完全に無効にするかを選択できます。

プラグインマネージャー（Plugin Manager）

Pro 版のみの機能です。

一括変更（Bulk Changes）

アンロード・プリロード・延期＆非同期・位置変更されたリソースを一覧で確認できます。
また、一括変更操作も可能です。

概観（Overview）

Asset CleanUp によって行われたあらゆる種類の変更されたリソースを確認できます。
アンロードルール、ロード例外、プリロード、メモ、SCRIPT 属性の非同期・遅延、位置変更等。

ツール（Tools）

リセット（Reset）

プラグインを初期設定に戻したり、全ての変更をリセットできます。

システム情報（System Info）

システム情報の確認とサポート用にダウンロードもできます。

ストレージ情報（Storage Info）

縮小及び連結されたファイルのストレージディレクトリを確認できます。
wp-config.php でディレクトリを変更することもできます。

デバッグ情報（Debugging）

エラーログの状態とログの場所を確認できます。

インポート＆エクスポート（Inport & Export）

設定のインポートとエクスポートができます。

代替プラグイン

Asset CleanUp:Page Speed Booster にほしい機能が無かった場合には、
Asset CleanUp:Page Speed Booster 以外にもサイトのページ表示速度の高速化ができるプラグインを記事にしています。
以下では、Asset CleanUp:Page Speed Booster を含めて 7 個を簡単に紹介しています。

サイトのページ表示速度の高速化ができるWordPressプラグイン一覧

URL

Asset CleanUp:Page Speed Booster – WordPress.org