この記事の概要
WordPress で作ったサイトの表示速度が遅い！
「Wordpress 高速化」「Wordpress 早くする」「Wordpress 圧縮」などで検索してみたがいいものがよくわからない。
そのような悩みを持っているあなたにはこのサイトでも使用している「Autoptimize」がおすすめです。
もしあなたのサイトよりもこのサイトの方が、ページの読み込みが早かったのであれば、これから説明する使い方を参考にAutoptimizeを使ってみてください。
ちなみにこのサイトはエックスサーバーで運用していますので、100~500円程度の安価なレンタルサーバーを利用している人は、私のブログと同じぐらい高速化することはどんなキャッシュプラグインを使っても出来ない可能性が高いので、そのことを理解した上で最適化を頑張ってみてください。
「Autoptimize」を導入した当ブログのパフォーマンス・表示速度
おそらくほとんどのサイトはモバイルが30~65点程度じゃないでしょうか？
うちのサイトはかなり最適化を行ったので、相当高い点数を出せています。
※一応ほかのプラグインも併用してます
パソコンに関しては余裕の100点ですよ。
おまけに私のサイトを自分で回遊した動画も撮りましたので、最適化したWordpressサイトの様子をご覧ください。
「Autoptimize」の最適な設定
Autoptimizeはインストールして有効化しただけでは最適化が行われません。
各自で最適化したい項目を選択する形になっています。
Autoptimizeの設定は、左メニューの[設定]->[Autoptimize]から行います。
各種設定
初期状態ではとてもシンプルに、HTML・CSS・Javascriptの最適化とCDNオプションがありますが、とりあえず最適化オプション全てにチェックを入れて有効化しておいてください。
このままでもある程度最適化はされますが、もう少し細かく設定したいので、画面右上の[高度な設定を表示]をクリックします。
そうすると設定できる項目が増えるので、それぞれ触っていきます。
HTMLオプション
ここは基本的にこのままで構いません。
どうしてもHTML上のコメントを残したい場合は、[HTML コメントを残す]にチェックを入れておきましょう。
私は不要なので外してます。
JavaScriptオプション
ここが結構重要です。
| 項目 | 効果 |
|---|---|
| Aggregate JS-files | 翻訳をかけてもよく分からないと思いますが、ページ表示速度を大きく上げる事ができる項目でもあるのでチェックしておいてください |
| インラインの JS を連結 | 外部ファイル読み込み回数を減らすことが出来、ページの表示速度を大きく上げることが出来ます。ただし JavaScript のエラーが起きる可能性もあるので、有効化したあとに目視での動作チェックが必要です。 |
| <head>内へJavascriptを強制 | Autoptimize導入によってJavascriptがエラーを起こした場合はチェックを入れてみましょう。 表示速度のパフォーマンスは落ちるので基本的には未チェック推奨です。 |
| Autoptimize からスクリプトを除外 | エラーを起こしてる JavaScript を特定できた場合は、ここに最適化しないJavascriptのファイルパスを入力します。初期状態では少しだけ入力されていますが、初めはそのままで大丈夫です。 |
| try-catch の折り返しを追加 | 主にデバッグ用です。基本的には未チェックでオーケーです。 |
はじめはこの設定で OK です。
JavaScript のエラーが見つからなかった場合は、除外するスクリプトの項目を空白にして構いません。
私のサイトでは空白です。
CSS オプション
ここの設定は JavaScriptオプションと似ていますので一部説明を割愛しますが、以下の画像のようにチェックを入れてもらえれば OK です。
一番下の[Autoptimize から CSS を除外]は始めから色々書かれていますが、そのままで大丈夫です。
その他オプション
[CDNオプション]や[キャッシュ情報]は飛ばしてしまって、一番下にある設定項目です。ここは[連結されたスクリプト / CSS を静的ファイルとして保存]にだけチェックを入れておいてください。
最後に青いボタン[変更を保存したキャッシュを削除]をクリックして設定を保存します。
最後にもうひと押し！パフォーマンスを大きく下げるGoogleフォントを削除します
これで設定完了と思った思ったらもう少し設定するところがありますので、[追加]タブに移動してください。
このページに移動したら、一番上に[Google Fonts]とありますが、ここの設定を[Googleフォントの削除]に変更して保存します。
こうすることで、Page Insightsの評価やページ読み込み速度が改善される可能性が高いです。
ここまでやりきれればAutoptimizeの設定は完了です。
Autoptimizeのキャッシュ容量による警告を無くすプラグイン
Autoptimizeが作成したキャッシュの容量が512MBを超えると警告を出すようになり、正常にキャッシュされなくなることがあるようです。
それを対策するためのAutoptimize拡張プラグインを作成していますので、必要な方は利用してください。
インストールして有効化するだけで警告ラインを512MB(0.5GB)から100GBに引き上げれるようにしています。
[download id=”1817″]
おまけ： キャッシュ系プラグインを導入する時はjavascriptの動作も確認しておく
キャッシュ系プラグインがJavaScript の最適化をしている場合、必ずJavaScript が正しく動作しているか確認しておきましょう。
簡単な例を挙げると、内部リンクをクリックすると滑らかにスクロールしていく機能です。
キャッシュ系プラグインの影響でJavaScript がエラーを起こしていた場合この滑らかにスクロールしていく機能が正しく動作せず、瞬間的にスクロールしてしまうようになってしまいます。
「Autoptimize」も例外ではなく、利用しているテーマやほかのプラグインによってはそのようなことを聞かれないので必ず確認しておいてください。
思ったより表示スピードが改善されない場合は？
ほかのプラグインが悪さをしている可能性がある
表示速度に全く関係ないと思っていたプラグインが実は表示速度を遅くしている原因だったということがあります。
実はこのブログでもこのようなことがありまして、プラグインの配布などに使用していた「Download Manager」というプラグインが、ページの表示速度を遅くしていました。
現在は「Download Monitor」という別のダウンロード管理プラグインをインストールしているので改善されていますが、納得いく速度になっていないというのであれば、一度「Autoptimize」以外のプラグインを停止して、表示速度が改善されるかどうか試してみてください。
それで改善されたのであれば、これまで利用していたプラグインのどれかが表示速度を大きく落としているいうことですので、プラグインを一つずつ有効化して表示速度を調べてみてください。
面倒と思うかもしれませんがこれが一番確実です。
それでも改善されないなら当ブログと同じエックスサーバーを使うといいかも
他のレンタルサーバーを使用している方は、私と同じようにエックスサーバーを利用すると大きく改善される可能性があります。
エックスサーバーは昔はそこまで早くなかったのですが、今は使用しているサーバーやネットワークがかなり強化されて、驚くほどのスピードを叩き出せるようになっています。
クレジットカードを登録せず無料で10日間使えるので、その期間を利用してWordpress環境を作って、ページの表示速度を測ってみてもいいでしょう。