WooCommerceを導入したWordPressの表示速度を改善するAsset Clean Up
新宿の映画館で「劇場版FLASH」を観たNNです。今回はフラッシュのようにWordPressの表示をスピードアップするプラグインをご紹介します。
WooCommerceをインストールしたウェブサイトの表示速度や動作を改善するプラグインAsset Clean Upをご紹介します。もちろんWooCommerceをインストールしていないウェブサイトでも表示速度や動作を改善することができます。
WooCommerceはリソースを消費するため動作が重い上に、WooCommerceに関連するプラグインも複数インストールする事になるため、さらにリソースを消費して動作を重くしてしまいます。
そのため、WordPressで制作されたブランドサイトに、WooCommerceを導入するとEC以外のページも表示速度が遅くなってしまいます。
動作を重くしてしまう主な原因は、WooCommreceやプラグイン、テーマ独自のCSSやJavaScriptによるものです。
プラグインAsset Clean Upは、CSSやJavaScriptを必要なページにだけ適用することで動作を軽くすることを目的としたプラグインです。
同様のプラグインは複数ありますが、Asset Clean Upは細かい設定ができ、効果も高いプラグインです。
WooCommerceを使用していないウェブサイトにも表示速度アップの効果があり、特にWooCommerceでは劇的な改善があります。
Asset Clean Upプラグイン導入前の注意事項
設定を誤ると、ページの表示が崩れたり、正常に動作しないことがあります。
設定によるトラブルに対応する「テストモード」と「設定のリセット」が用意されています。
テストモード
設定はログインしているウェブマスターのみに反映されます。ユーザーがアクセスしたページには設定は反映されません。
メニューのテストモード「Enable Test Mode?」をEnable（有効）にすることでテストモードとなります。
設定のリセット
設定によるトラブルを解消する最終手段として設定のリセットが用意されています。
メニューの「TOOLS」から、設定をリセットすることができます。
設定方法
設定方法として「ウェブサイト全体の設定」と「固定ページ、カテゴリーや、カスタム投稿タイプ、ポストなど個別に設定」する設定と方法があります。
絵文字やコメントなどウェブサイト全体で不要な機能は、ウェブサイト全体でDisable（無効）として、WooCommerceや、お問い合せなどは、個別にCSSやJavaScriptをEnableまたはDisableにしていくことになります。
ウェブサイト全体の設定
まずはウェブサイト全体で不要な機能をDisableにしていきます。
設定は「Site-Wide Common Uploads」になります。
Disable Emojis Site-Wide
WordPressの絵文字機能になります。絵文字機能を使用していない場合は不要です。Disableにします。
Disable oEmbed (Embeds) Site-Wide
外部コンテンツ（YouTube、Twitter等）の埋め込みプレビュー機能になります。不要な場合はDisableにします。
Disable Dashicons if Toolbar is hidden (Site-Wide)
管理ツールバーのアイコンフォントの表示・非表示設定となります。ユーザーに不要なためDisableにします。
Disable Gutenberg CSS Block Library Site-Wide
ブロックエディターを使用している場合はEnableにします。クラシックエディターを使用している場合はDisableにします。
Disable jQuery Migrate Site-Wide
古いプラグインやテーマを使用している場合のjQuery互換性ライブラリで、該当しない方はDisableにします。
Disable Comment Reply Site-Wide
コメント機能のJavascriptで、コメント機能を利用していない場合は不要です。Disableにします。
CSSの圧縮、結合、最適化
設定「Optimize CSS」で、CSSの圧縮や結合ができます。ウェブサイト全体の設定になります。
キャッシュ系プラグインや専用のminifyプラグインで設定されている場合は設定は不要です。
CSS Files Minification
CSSの改行やコメントを削除してCSSを圧縮します。
LINK tags with "href" attribute (default）は、リンクで読み込んでいるCSSを対象にして圧縮します。
STYLE tags with inline CSS codeは、HTMLに直接記述されているインラインのCSSを対象にして圧縮します。
All LINK & STYLE tagsは、リンク、インライン両方のCSSを対象にして圧縮します。
入力欄には、圧縮を除外するCSSファイルを指定します。正規表記にも対応しています。
Combine loaded CSS (Stylesheets) into fewer files
CSSを１つのファイルに結合します。Disableを推奨します。
現在、多くのサーバがHTTP2に対応しており効果が限定的な反面、結合によるトラブルの方が多いからです。
Inline CSS Files
小さいCSSファイルをインラインにすることでレンダリングを向上させることができます。Enableにする場合は4KB程度のCSSファイルをインラインにすると良いでしょう。
インラインから除外したいファイルは入力欄に記入します。
Critical CSS Status
ファーストビュー（Above the fold）のレンダリングに必要なCSSを自動的にインライン化して表示速度を向上させます。
Load any critical CSS...は、Critial CSSがEnableとなります。
Do not load any critical CSS...は、Critial CSSがDisableとなります。
Critical CSSをプラグインで自動させるのではなく、任意のCritical CSSを設定することができます。
「CSS & JS MANAGER」から「MANAGE CRITICAL CSS」で設定できます。
Cache Dynamic Loaded CSS
圧縮、結合したCSSをキャッシュさせることができます。
JavaScriptの圧縮、結合、最適化
設定「Optimize JavaScript」は、JavaScriptの圧縮、結合などの設定ができます。ウェブサイト全体の設定となります。
JavaScript Files Minification
JavaScriptファイルの圧縮を行う場合はEnableに設定します。
SCRIPT tags with "src" attribute (default)は、リンクで読み込むJavaScriptファイルを対象に圧縮します。
SCRIPT tags with inline JS codeは、HTMLに直接記述されているJavaScriptを対象に圧縮します。
All SCRIPT tags * both optionsは、リンク、インラインどちらのJavaScriptファイルも対象にして圧縮します。
圧縮の対象から除外する.jsファイルは入力フォームに記入します。
Combine loaded JS (JavaScript) into fewer files
JavaScriptファイルを結合する場合はEnableにします。ただしJavaScriptファイルの結合は不具合を発生しやすいので、検証しながら設定した方が良いでしょう。
Apply it only for guest visitors (default)は、ユーザーにだけ圧縮したJavaSciptを有効にします。通常はこちらを選択します。
Apply it for all visitors (not recommended)は、管理者、ユーザー、全てに対して圧縮したJavaScirptを有効にします。
Defer loading JavaScript combined files from <body>は、結合されたスクリプトの読み込みが遅延してページの初期表示が高速化します。通常はチェックします。
Wrap each JavaScript file included in the combined group in its own try Catchは、JavaScriptエラーが表示される場合にのみ有効にします。
Move jQuery Inline Code After jQuery library is called
jQueryを利用するインラインのjavascriptをjQueryを読み込んだ後に実行するようにします。jQuery is undefinedエラーとなる場合にEnableにします。
Cache Dynamic Loaded JavaScript
圧縮、結合したJavaScirptをキャッシュする場合はEnableにします。
HTMLソースのクリーンアップ
設定「HTML Source CleanUp」はウェブサイト全体の設定となります。不要なmetaタグなどを削除する設定になります。
Remove "Really Simple Discovery (RSD)" link tag
XML-RPCディスカバリー用のリンクタグになります。Windows Live Writerの利用やFlickrと連携させていなければ不要です。Disableにします。
Jetpackを利用している場合は必要となります。
Remove "REST API" link tag
REST APIのエンドポイント情報になります。WooCommerceやその他プラグインでも利用されるため必要です。Enableにします。
Remove Pages/Posts "Shortlink" tag
WordPressの短縮URL機能です。スラッグが日本語でなければ不要です。Disableにします。
Remove "WordPress version" meta tag
WordPressのバージョン情報を表示します。セキュリティの面でもDisableにします。
Remove All "generator" meta tags
プラグインの情報を表示します。セキュリティの面でもDisableにします。
Remove "Post's Relational Links" tag
前後の投稿へのリンク情報になります。WordPress 5.6以降では非推奨となっており不要です。Disableにします。
Remove "Windows Live Writer" link tag
Windows Live Writer対応用のリンクになります。Windows Live Writerを利用していない場合は不要です。Disableにします。
Strip HTML comments
HTMLコメントを削除します。コメント機能を利用していない場合は不要です。Disableにします。
Internet Explorer用の条件付きコメントは保持されます
特定のコメントを保持したい場合は、例外パターンを設定できます
キャッシュプラグインによって追加されたコメントは完全には削除できない場合があります
ローカルフォントの最適化
設定「Local Fonts」は、CSSで読み込ませているフォントファイル、プラグインによるフォントファイルの読み込みと表示を最適化するウェブサイトサイト全体の設定となります。
Apply font-display: CSS property value
CSSのfont-displayプロパティを全てのフォントに適用します。フォントを読み込んでいる時でもテキストが表示される「swap」を選択するのが良いでしょう。
Overwrite any existing "font-display" value?
既存のfont-displayプロパティを上書きするか？の設定では「No」を選択します。
「Yes」した場合、テーマやプラグインの設定に上書きされるため、表示トラブルの原因となります。
Preload Local Font Files
特定のフォントファイルを優先的に読み込む事ができます。フォントファイルへのURLを記載します。
/wp-content/themes/theme/fonts/main-font.woff2
/wp-content/themes/theme/fonts/heading-font.woff2
Google フォントの最適化
Google webフォントの利用や停止、フォントファイルの読み込みや表示を最適化します。
Combine Multiple Requests Into Fewer Ones
複数のGoogle フォントのリクエストを１つにまとめます。通常はEnableにします。
読み込み方式は下記から選択します。
「Render-blocking」は、フォントを完全に読み込んでレンダリングします。フォントがデザインに影響する場合は「Render-blocking」を選択します。
「Asynchronous via Web Font Loader」は、JavaScriptを使用してフォントを読み込みます。複数のフォントを読み込む場合にお薦め。
「Asynchronous by preloading the CSS stylesheet」は、HTML、CSSを利用してフォントを読み込みます。フォントがシンプルな場合にお薦め。
Apply font-display: CSS property value
font-displayプロパティの設定になります。通常は「swap」を選択します。
Preconnect?
fonts.gstatic.comへの接続を早める事ができます。通常はEnableにします。
Preload Google Font Files
優先的に読み込むGoogleフォントを指定します。複数のGoogleフォントを利用している場合などに利用します。
Remove All
全てのGoogle フォントの設定を無効にします。
RSS Feedの最適化
設定「Disable RSS Feed」は、RSS Feedの配信・停止を設定できます。ウェブサイトサイト全体の設定となります。
Disable RSS Feed?
RSS Feedを配信しない場合はDisableにします。入力欄にはRSSリーダーでのエラーメッセージを記載します。
Remove Main RSS Feed Link?
RSS Feedのリンクを表示します。RSS Feedの配信を停止している場合はmataタグは不要です。Disableにします。
Remove Comment RSS Feed Link?
コメントのRSS Feedリンクを表示します。RSS Feedの配信を停止している場合はmataタグは不要です。Disableにします。
XML RPCの最適化
設定「Disable XML-RPC」は、XML-PRCの停止を設定することができます。ウェブサイトサイト全体の設定となります。
XML-RPCは、WordPressの遠隔操作や外部アプリケーションとの連携に使用されるプロトコルになります。セキュリティ上の脆弱性になる可能性があり、利用していない場合はDisableを推奨します。
Keep it enabledは、XML-RPCが有効となります。Jetpackを利用している場合は必要となります。
Disable XML-RPC Completelyは、完全に無効化します。
Disable XML RPC Pinback Onlyは、XML-RPCの中でも特にセキュリティリスクの高いPingback機能のみを無効にします。プラグインがXML RPCを利用している可能性がある場合は、Pinback機能だけでもDisableにします。
CDNの最適化
設定「CDN Rewirete assets URLs」は、CDNの設定になります。CloudflareなどのCDNを利用している場合はEnableにします。CDNを利用していない場合は設定は不要です。
設定を有効にすると、ウェブサイトのアセットURLがCDNのURLに自動的に書き換えられます。
プラグインのメニュー設定やキャッシュ設定
設定「Plugin Usage Preferences」は、キャッシュのパージ設定や、設定を固定ページに表示する設定などを行えます。
CSS/JS Management
Manage in the Dashboard
Asset CleanUpの設定画面でCSS、JSの一覧を取得して表示します。通常はEnable（有効）とします。
Directは、管理者としての設定になります。通常はこちらを選択します。
WP Remote POSTは、ゲストとしての設定となります。
Show "Asset CleanUp: CSS & JavaScript Manager
固定ページや投稿ページにCSSやJavaScriptのロード、アンロードの設定を表示します。通常はDisable（無効）にします。
固定ページや投稿ページを設定する時のみEnableにすると良いでしょう。
Manage in the Front-end
ログイン時のフロントエンドにアセット一覧が表示されます。通常はDisableにして、デバッグの時にEnableにします。
Allow managing assets to
プラグインのCSS、JSの管理権限を持つユーザーを設定します。通常は「any administrator」を設定します。
Assets List Layout
CSS、JSのロード、アンロードの表示カテゴリーの設定になります。
お好みの表示方法を選択します。
表示方法は「Expanded (Default)」を選択します。
On Assets List Layout Load, keep the groups:
設定のリスト表示方法で「Contracted（縮小）」を選択します。
On Assets List Layout Load, keep "Inline code associated with this handle" area:
設定をロードした時のエリアの表示方法で「Contracted」を選択します。
Hide WordPress Core Files From The Assets List?
WordPressのコアファイルを設定の一覧から非表示にします。通常はDisableを設定します。
CSS/JS Cache
CSS、JSファイルのキャシュを有効にしている場合、キャッシュの保存先とパージする期間を設定します。
Fetch assets' caching information from
キャッシュの保存先を設定します。通常は「Disk」を選択します。
Clear previously cached CSS/JS files older than (x) days
キャッシュを保存する期間を設定します。14日～30日が良いでしょう。
Accessibility
設定のEnable、Disableをトグルタイプにするのか？ チェックタイプにするのか？を選択できます。デフォルトで良いでしょう。
Visibility
Asset Clean Upのメニューをアドミンバー、サイドバーの非表示設定を行えます。
Hide it from the top admin bar
アドミンバーから非表示にする場合はチェックします。
Hide it from the left sidebar within the Dashboard
サイドバーから非表示にする場合はチェックします。
Analytics
利用情報を匿名で提供する場合は、Enableにします。
No Load on certain fronted page
特定のページでAsset Clean Upが機能しないようにする事ができます。
Prevent Asset Clean Up from triggering on certain pages
特定のページでAsset Clean Upが起動しないようにする事ができます。入力欄にドイメインを含めないURLを記入します。
Prevent features of Asset Clean Up from triggering on certain pages
特定のページで、特定の動作をしないようにする事ができます。
When URI contains/matches
指定するURLを記入します。例えば「/product/」など。
DO NOT load these features
無効化する機能を指定します。例えば「Minify javascript、inline CSS」など。
Plugin Access
Asset Clean Upの設定ができるユーザー権限を設定できます。通常は無設定で良いでしょう。
以上でウェブサイト全体の基本設定が完了です。
続いて、個別に固定ページや投稿タイプのCSS、JSファイルの設定を行っていきます。
固定ページ、投稿タイプ、カテゴリーなどの個別設定
トップページやカテゴリー、カスタム投稿タイプなど、個別にロードするCSS、JavaScriptを設定していきます。
ページで使用されていないCSS、JSファイルを確認する方法
ブラウザChromeのデベロッパーツールの「カバレッジ」で「使用されていないバイト」が100%のファイルはページでは使用されていません。（要確認）
Asset Clean Upの個別ページ設定で、アンロードしていきます。
固定ページのAsset Clean Up設定
メニューの「せCSS & JS MANAGER」から「MANAGE CSS/JS」にある「page」の「Load assets manager forの入力欄」に固定ページにIDを入力すると該当する固定ページが表示されて設定できます。
CSSをアンロードしてみます。
「Unload on this page（このページはアンロード）」をONにすると下記のようになります。
Chromeのカバレッジで確認すると該当するCSSファイルが読み込まれていないはずです。
ウェブサイト全体でアンロードされているJSファイルを、このページだけロードするようにしてみます。
「On this page（このページではロードする）」にチェックすると、ロードする設定になります。
JSファイルのasync、deferの設定は有料版のみとなります。
ロード、アンロードが視覚的に良く分かるUIになっています。
記事やカテゴリー、タグのAsset Clean Up設定
記事やカテゴリー、タグなどで読み込むCSS、JSの設定を行います。
サンプルではカスタム投稿タイプ「NEWS」の設定を行ってみます。
メニューの「せCSS & JS MANAGER」から「MANAGE CSS/JS」にある「Custom Post Type」の「Post Type」を選択してから「Load assets manager forの入力欄」に、適当な投稿記事のIDを入力すると該当する投稿記事が表示されて設定できます。
アンロード設定するCSSファイルを表示します。
「Unload CSS on all pages」にチェックを入れて、投稿タイプNEWS全体でアンロードする設定にしてみます。
カスタム投稿タイプ「NEWS」全体で、このCSSはアンロードされるようになりました。
カテゴリー・タグではロードする機能は有料版となります。
以上の方法を繰り返しながら固定ページや投稿タイプで読み込むCSSやJSファイルを設定していきます。
根気のいる作業ですが、プラグインによって表示が遅いWordPressは劇的に表示速度が改善されます。
