ワードプレス、cocoonでブログ作成を行っていますが、このような不具合が発生するようになってしまいました。
- スマホでアイキャッチ画像が表示されない
- ワードプレス自体の動作が遅い
cocoonの高速化設定や、プラグイン EWWW Image Optimizer を使っている際に不具合が発生するので、この辺が原因だと推測しました。
cocoonの高速化を辞め、EWWW Image Optimizerを削除し、WP-Optimize というプラグインを入れたら解決した上に、高速化までできました。
アイキャッチ画像が表示されない
画像圧縮にはEWWW Image Optimizerを使っていましたが、
- スマホでアイキャッチ画像が表示されない
- スマホで投稿中の画像が表示されない
- スマホでGoogleアドセンスが表示されない
など画像系の不具合が頻発しておりました。
PCだとアイキャッチは表示されます。
しかし、スマホだと表示されません。
EWWW Image Optimizerを無効化し、cocoonの高速化をオフにするとアイキャッチは表示されます。つまり、原因はこの二つのようです。
早速、EWWW Image Optimizerは削除しました。このプラグインはcocoonとの相性が悪いのでしょうか。その割には使っている方が多いようで、不具合は出ないのでしょうか。私にはこのプラグインが諸悪の根源にしか思えません。
画像圧縮も高速化もしていない状態なので Google PageSpeed Insightsでのパフォーマンスは67と悪くなります。
※PageSpeed Insightsなら誰でもサイトのパフォーマンスを計測できます。
ワードプレス自体の動作が遅い
大まかですが調べてみると、このような原因があることがわかりました。
- サーバーのスペックが低い
- キャッシュが重くなっている
- リビジョン（自動保存の下書き）がたまっている
- 画像が容量をとっている
- プラグインを入れすぎている
それぞれ対応してみることにします。
■サーバーのスペックが低い
→エックスサーバーはそんなに低くない
当ブログはエックスサーバーを使用しておりますが、スペックが低いということはなさそうですので対応はしません。
■キャッシュが重くなっている
→キャッシュ削除
まず、ブラウザキャッシュを削除します。Google Chromeであれば、設定→閲覧履歴データの削除で「キャッシュされた画像とファイル」にチェックを入れて実行です。
続いて、ワードプレス内のキャッシュを削除します。
cocoonであれば、cocoon設定→キャッシュ削除→「全てのキャッシュの削除」を実行します。
仕上げに画面上部の「キャッシュをパージ」も実行すれば完璧です。
キャッシュの削除に関しては定期的に実行することが必要です。
さて、残りの3つの原因を解決していきます。
■リビジョン（自動保存の下書き）がたまっている
→リビジョンを削除する
■画像が容量をとっている
→画像を圧縮する
■プラグインを入れすぎている
→もともと少ない上に、EWWW Image Optimizerを削除済
実はこれらの3つは一気に解決できます。
リビジョンを削除、データベースを最適化、画像の圧縮、サイトの高速化ができるプラグイン「WP-Optimize」を導入するだけです。
ちなみに、WP-Optimizeからの案件ではありませんし、1円ももらっていません。ただただ、便利で有効だったのでご紹介しているだけです(笑)
WP-Optimizeを導入する
ワードプレスのプラグイン→プラグインを追加より、「WP-Optimize」を検索してインストールします。
無事インストールが出来ました。
WP-Optimizeでリビジョンを削除する
WP-Optimizeを使って、この問題を解決していきます。
■リビジョン（自動保存の下書き）がたまっている
→WP-Optimizeでリビジョンを削除する
データベース→設定
データを保持する期間と、リビジョンの保存回数を指定します。クリーンアップの予約設定もできるので、ここでしておけばあとは自動で実行されます。
データベース→最適化タブ
最適化したい項目を選択して実行ボタンを押します。
リビジョン以外にも、ごみ箱やスパム、コメントなどもクリーンアップできます。併せて最適化してくれるのがうれしいですね。windowsのクリーンアップとデフラグのようなものです。
これでリビジョンの削除は完了です。ついでにデータベースの最適化までできました。
WP-Optimizeで画像を圧縮する
WP-Optimizeを使って、この問題を解決していきます。
■画像が容量をとっている
→画像を圧縮する
画像メニューより、画像を圧縮、
- 新しく追加された画像を自動的に圧縮する
- 画像のダッシュボードメディアページに圧縮メタボックスを表示します。
をオンにします。
下へスクロールして非圧縮画像を選択して圧縮します。
圧縮にはそこそこ時間がかかります。
WebP変換はチェックをするだけで実行されます。
✓ Create WebP version of image
これで画像の圧縮が完了しました。ついでにWebP変換もできました。
以上で、全ての原因に対して対策をしました。
対策後はどうなったのか
■スマホでアイキャッチ画像が表示されない
→cocoonの高速化をオフ
→EWWW Image Optimizerを削除し、WP-Optimizeで画像を圧縮
スマホでもアイキャッチ画像が表示されるようになりました。
圧縮後すぐにGoogle PageSpeed Insightsでパフォーマンスを測定しましたが67→69へ少し変化しました。たかだか2ポイントですから、圧縮とWebP変換がまだ全て完了していないのかもしれませんね。
■ワードプレス自体の動作が遅い
こちらは数値化できないのですが、体感的には少し早くなった気がします。保存ができなかったり、画像が読み込めないことはなくなりました。
これで一通りの対策は完了しましたが、Google PageSpeed Insightsでのパフォーマンスは69と低いままです。cocoonの高速化を使えばパフォーマンスは改善されるかもしれませんが、アイキャッチ画像が表示されなくなってしまいます。
そこで、WP-Optimizeの高速化機能を使用して、さらなるパフォーマンス改善を目指します。
WP-Optimizeでキャッシュを有効化
cocoonの高速化設定は全てオフです。
当ブログの場合、オンにするとアイキャッチ画像が表示されなってしまいます。
WP-Optimizeを開いて、
→キャッシュ→ページキャッシュ
「ページキャッシュを有効化」にチェックし、変更を保存します。
キャッシュ→先読み
「今すぐプリロードする」を実行します。
「キャッシュプリロード予約を有効にする」をチェックして、変更を保存します。
プリロードは、その名の通り、プリ（事前）にキャッシュをロード（読み込む準備）する機能です。プリロードしなければ、最初のユーザーの訪問まではキャッシュが生成されないので表示速度は遅いです。
WP-Optimizeで高速化
もともと不具合の解消から始まったWP-Optimize導入ですが、最終的には高速化まで行きついてしまいました。
- スマホでアイキャッチ画像が表示されない問題を解決
- ワードプレス自体の動作が遅い問題を解決
- データベースの最適化、画像圧縮、キャッシュ有効化による高速化
全ての対策を終えて、Google PageSpeed Insightsでパフォーマンスを計測します。
9:28 67（対策前）
10:40 69（画像圧縮直後）
11:05 95（キャッシュ有効化直後）
13:06 98（キャッシュ有効化後経過観察）
13:13 99!（キャッシュ有効化後経過観察）
すごいことになりました。
ブログをやるなら
ブログを始めるのに必要なのは3点
必要なモノ
- レンタルサーバー
- 独自ドメイン
- wordpress
実際はレンタルサーバーを決めてしまえば、そこで独自ドメインもwordpressも導入できてしまいますのであまり難しくはないです。
私は、このように選びました。
選び方
- サーバー、独自ドメイン、wordpressまでセットで簡単に導入できる
- イニシャルコスト、ランニングコストが安い 月額1,000円以下
- ネット上に出回っている情報が多く、検索すればすぐに情報が見つかること
この条件を満たしたのがエックスサーバーでした。
ブログを始めてみようと思ったら、レンタルサーバー、wordpress導入、独自ドメインがセットになったエックスサーバーが安くて簡単で便利です。
エックスサーバーの詳細はこちらからどうぞ。
また、エックスサーバーのブログでは、サーバーの導入からブログの運営まであらゆることが解説されていますので、困ったときに見ると大体解決できます。私も大変お世話になっています。
もはやサポートというレベルのエックスサーバーのブログ
まとめ
- cocoonの高速化設定とプラグイン EWWW Image Optimizerは相性が悪い
- WP-Optimizeなら最適化、画像圧縮、高速化が同時にできる
- cocoonユーザーにはEWWW Image OptimizerよりWP-Optimize
ありがとうございました。
