【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

ブログ運営

WordPressブログはHTMLやCSS,JavaScriptを使って構築されていると思います。これらを圧縮して最適化することでブログの表示速度を速める事ができます。

もう少し詳しく解説をするとHTML,CSS,JavaScriptは人間にも読みやすくなるように書かれています。具体的にはコメントが書かれていたり、改行やインデントなどを適宜入れて整理することで人間にも読みやすくなります。

ですが、表示速度の高速化だけを考えるとこのコメントや空白行は無駄でしかありません。手作業でこ空行やコメントを取り除くのは非現実的ですから、プラグインを使って最適化していきます。

前置きが長くなりましたが、そこで活用するプラグインがAutoptimizeです。今回はこのAutoptimizeのインストールから設定方法まで使い方のすべてを解説します。

Autoptimizeのインストール

公開されているプラグインですので検索ウィンドウで①「Autoptimize」を検索します。プラグインの一覧からAutoptimizeの②「今すぐインストール」を選択してインストールしていきます。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

Autoptimizeのインストールが完了したら③「有効化」を選択します。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

Autoptimizeの設定

Autoptimizeは高度な設定で詳しく設定しましょう!

インストールしただけの初期設定では全く効果を発揮しません。設定をするためにプラグイン一覧画面のAutoptimizeの④「設定」をクリックします。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

Autoptimize設定画面で⑤「高度な設定を表示」を選択します。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

HTMLオプション

⑥「HTMLコードを最適化」チェックオンにします。
チェックをオンにすることでHTMLコードが圧縮され、読み込み時間の短縮につなげることができます。

「HTMLコメントを残す」はチェックオフのままです。チェックするとHTML内のコメントが残る分、HTMLの読み込み処理に時間がかかってしまいます。サイトの動作確認時など、コメントを付けた状態にしたい場合のみ使用しましょう。普段はオフのままにしておくことを推奨します。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

JavaScriptオプション

⑦「JavaScript コードの最適化」はチェックをオンにします。チェックすることでHTML同様にJavaScriptも圧縮され、読み込み時間の短縮が期待できます。

⑧「Aggregate JS-files?」もチェックをオンにします。JavaScriptファイルを集約することで圧縮効果を高めます。

「インラインの JS を連結」と「<head> 内へ JavaScript を強制」は初期設定のままチェックオフにしておきます。高度な知識が必要であったり不具合を起こす可能性があるのでオフのままの方が良いでしょう。

「Autoptimize からスクリプトを除外: 」には初期設定のまま「seal.js, js/jquery/jquery.js」が入力されている状態のままで問題ありません。もしもAutoptimizeで動作不良を起こすJavaScriptがあればこのボックスにScript名を入力して、最適化の対象外にすることで不具合を回避できます。

「try-catch の折り返しを追加」もチェックはオフのままで問題ありません。JavaScriptのエラーが発生した場合にのみ使用します。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

CSSオプション

⑨「CSSコードを最適化」はチェックオンにします。CSSコードの余分な部分を削って圧縮することで読み込み時間の短縮に繋げます。

⑩「Aggregate JS-files?」もチェックをオンにします。CSSファイルを集約することで圧縮効果を高めることができます。

⑪「インラインの CSS を連結」もチェックをオンにします。CSSファイルを連結させて読み込み時間を短縮させることができます。

それ以外の「データを生成 : 画像を URI 化」、「CSS のインライン化と遅延」、「すべての CSS をインライン化」はチェックオフのまま使用します。読み込みに時間がかかったり読み込まれるまでの間、表示が崩れたりするオプションなのでわざとチェックを外しています。

「Autoptimize から CSS を除外」欄は初期設定のまま「wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css」のみ設定をしています。Autoptimizeを使用することで動作不良を起こすCSSがあった場合は除外対象に加えることで問題を回避することができます。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

CDNオプション

「CDN のベース URL」はCDNサービスを使用している場合のみ入力します。CDNを使用していなければオフのままで問題ありません。そもそもCDNが分からない方はCDNを使用していないと思われるのでチェックオフのままで良いです。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

その他オプション

⑫「連結されたスクリプト / CSS を静的ファイルとして保存」はチェックオンにします。Autoptimizeで処理されたJavaScriptやCSSファイルを静的なファイルとしてキャッシュさせます。圧縮処理回数を減らせられる分、サーバへの負荷が軽減され、読み込み時間の短縮効果が期待できます。

⑬「ログイン中のユーザーも最適化しますか ?」もチェックをオンにします。チェックをオフにすると自分がWordPressにログインしている状態でサイトを開くとAutoptimizeが全て無効化された状態で表示されます。ソースの確認時などには有効ですが、表示崩れなどの不具合を見落とす場合があるのでチェックを入れておいた方が良い項目です。

最後に⑭「変更を保存してキャッシュを削除」を選択して設定を全て保存させます。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

以上で設定は終了です。設定後は必ず正しく動作するか確認しましょう。

PageSpeed Insightsスコアの改善内容

最後にAutoptimizeの効果をPageSpeed Insightsで測定してみました。AdSenseやGoogle アナリティクスを使用しているので高得点が狙えるサイトではありませんが、改善はみられたので効果はありそうです。

モバイルのスコアは1点改善

Autoptimize導入前は44点でした

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

Autoptimize導入後は45点になりました。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

わずか1点だけですが、スコアの改善が見られました。

パソコンのスコアは11点改善

Autoptimize導入前は79点でした

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

Autoptimize導入後は90点になりました。

【WordPressブログ高速化】AutoptimizeプラグインでHMTL,CSSを圧縮する方法

パソコン版では11点のスコアの改善が見られました。

Autoptimize導入でモバイルもパソコンでもスコア改善が見られたのでこのプラグインは使用を継続しようと思います。

コメント