WordPress で作ったサイトの表示速度が遅い！
「WordPress 高速化」「WordPress 早くする」「WordPress 圧縮」などで検索してみたがいいものがよくわからない。
そのような悩みを持っているあなたにはこのサイトでも使用している「Autoptimize」がおすすめです。
もしあなたのサイトよりもこのサイトの方が、ページの読み込みが早かったのであれば、これから説明する使い方を参考にAutoptimizeを使ってみてください。
「Autoptimize」を導入した当ブログのパフォーマンス・表示速度
おそらくほとんどのサイトはモバイルが30~65点程度じゃないでしょうか？
うちのサイトはかなり最適化を行ったので、相当高い点数を出せています。
現在はCWV(コアウェブバイタル)・体感速度に重きをおいた最適化を行っているため、スコアが大きく異なっています。
「Autoptimize」の最適な設定
Autoptimizeはインストールして有効化しただけでは最適化が行われません。
各自で最適化したい項目を選択する形になっています。
Autoptimizeの設定は、左メニューの[設定]->[Autoptimize]から行います。
各種設定
初期状態ではとてもシンプルに、HTML・CSS・Javascriptの最適化とCDNオプションがありますが、とりあえず最適化オプション全てにチェックを入れて有効化しておいてください。
このままでもある程度最適化はされますが、もう少し細かく設定して最適化します。
HTMLオプション
ここは基本的にこのままで構いません。
どうしても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フォントの削除]に変更して保存します。
Googleフォントは大容量で結構重いので、あるのとないのとではサイトのパフォーマンスに大きく影響します。
Autoptimizeの設定からGoogleフォントを無効化することで、Page Insightsの評価やページ読み込み速度が改善される可能性が高いです。
ここまでやりきれれば、Autoptimizeの設定は完了です。
Autoptimizeのキャッシュ容量による警告を無くすプラグイン
Autoptimizeが作成したキャッシュの容量が512MBを超えると警告を出すようになり、正常にキャッシュされなくなることがあるようです。
それを対策するための方法もありますので、必要な方は参考にしてください。
おまけ：キャッシュ系プラグインを導入する時はjavascriptの動作も確認しておく
キャッシュ系プラグインがJavaScript の最適化をしている場合、必ずJavaScript が正しく動作しているか確認しておきましょう。
簡単な例を挙げると、内部リンクをクリックすると滑らかにスクロールしていく機能です。
キャッシュ系プラグインの影響でJavaScript がエラーを起こしていた場合、この滑らかにスクロールしていく機能が正しく動作せず、瞬間的にスクロールしてしまうようになってしまいます。
「Autoptimize」も例外ではなく、利用しているテーマやほかのプラグインによってはそのようなことを聞かれないので必ず確認しておいてください。
思ったより表示スピードが改善されない場合は？
ほかのプラグインが悪さをしている可能性がある
表示速度に全く関係ないと思っていたプラグインが実は表示速度を遅くしている原因だったということがあります。
実はこのブログでもこのようなことがありまして、プラグインの配布などに使用していた「Download Manager」というプラグインが、ページの表示速度を遅くしていました。
現在はプラグインを外しているので問題も起きていませんが、納得いく速度になっていないというのであれば、一度「Autoptimize」以外のプラグインを停止して、表示速度が改善されるかどうか試してみてください。
時間はかかりますか、とにかくサイトパフォーマンスを追求するのであればそれなりに時間がかかることを覚悟しましょう。
プラグインを停止しただけで大きく改善されたのであれば、これまで利用していたプラグインのどれかが表示速度を大きく落としているいうことです。
なので、プラグインを一つずつ有効化して表示速度を調べてみてください。
面倒と思うかもしれませんがこれが一番確実です。
それでも改善されないならConoHa WINGを使うといいかも
他のレンタルサーバーを使用している方は、キャッシュ機能が優れたConoHa WINGを使うと大きく改善される可能性があります。
最近のConoHa WINGは、価格が変わらないにも関わらず急激にサーバースペックが強化されており、パフォーマンスがトップクラスに高いです。
パフォーマンスが高いにもかかわらず月額800円から利用できるのでとてもおすすめです。
最低利用期間もなく、最短1時間で解約(請求されるのは2円だけ)することもできるので、お試し利用にも最適ですよ。
WordPressのセットアップも1分かからないので、数時間だけ使って、ページの表示速度を測ってみてもいいでしょう。
