爆速街道：WordPress + Mixhostで表示速度を高速化簡単チューニング

この記事は 5 分で読めます

WordPress + Mixhost が高速だという記事を以前書いたのですが、最近少しこのサイトも色々カスタマイズして高速とは言いにくくなってきたため、速度改善のためにやったことをまとめます。

結果からお伝えすると、ちょっと設定をいじるだけで、モバイルの表示スコアが30台→80台まで回復したというお話です。Mixhost サーバーの神プラグインLiteSpeed Cacheのお陰で、高速街道まっしぐらです。

以前書いた記事はこちら。
WordPress高速化：Web制作者がクライアントに教えたがらない最速サーバーを教えます

SANGOテーマ最速の設定をサクっと知りたい方はこちらの記事へ。
Mixhost + LiteSpeed Cache + CloudflareCDNで最速の設定を全画像付で解説【SANGO爆速】

WordPress高速化2019年決定版の記事はこちら
WordPress高速化2019年版：たった1つのプラグインとCDNで簡単最速化

辛口のサーバーレビュー表だけサクっと見たいならコチラをクリック

この記事の見出し

遅くなった原因を調べる

当サイトの表示速度が少し落ちたので原因を調査しました。

まず、PageSpeed Insights で調べると

モバイル：30〜40台
PC：90台

となっていました。PCはまだ良いのですが、モバイルだと早いとは言えないレベルです。なぜ遅くなっているのか深掘りして調べてみることに。

調査方法は以下の3とおり。

調査1：PageSpeed Insights のレポートを確認する
調査2：P3 Plug-in Profiler で遅くなっているPlug-inが無いかチェックする
調査3：最近導入したタグ関係で遅くなっていないかチェックする

この方法で、ある程度原因の切り分けができました。

作業量的にも30分程度です。

調査1：PageSpeed Insights のレポートを確認する

まず、PageSpeed Insights で「改善できる項目」というレポートが表示されますので、ここは要チェックです。

内容を確認すると以下のような項目が目立ちます。

CSS ファイルを最小化
JavaScript の最小化
オフスクリーン画像の遅延読み込み
効率的な画像フォーマット

これらは、先日紹介した LiteSpeed Cache プラグイン側で、専門知識も必要なく設定をポチポチするだけでほぼ改善。

LiteSpeed Cache は、専門知識がなくてもこのあたりの細かいチューニングが簡単にできるのが良いですね。

ただし、環境によっては動作に支障がでる可能性もあるので十分にテストしてくださいね。

調査2：P3 Plug-in Profiler で遅くなっているPlug-inが無いかチェックする

色々とプラグインを増やすとWordPress動作自体が遅くなってしまうことがあります。

そういったことが無いかを調べるのに「P3 – Plugin Performance Profiler」というプラグインで簡単にチェックできます。

このプラグインはプラグインの新規追加で検索すると普通にでてきます。

使い方も簡単で

プラグインをインストール
ツール > P3 Plugin Profiler メニューが追加されているのでクリック
Start Scan ボタンを押す
Auto Scan ボタンでチェック開始

これで、全ページチェックしてくれるので、チェックが終わったら

View Results

というボタンが表示されるのでクリックすると結果が表示されます。

スキャンしてみた結果･･･遅くなっている原因となるプラグインはありませんでした。

あまり変なプラグインは入れていないので、まぁこんなもんかなと。

それでも、やっぱりPageSpeed Insights のモバイルのスコアは高速とまではいかず、40〜50くらいでした。

調査3：最近導入したタグ関係で遅くなっていないかチェックする

次に、手動で追加したタグ関係で遅くなっている原因が無いかチェックします。

タグ関係は、基本的に Google タグマネージャーで管理していますので、タグ関係も一つ一つ、一時停止にしながらPageSpeed Insightsをチェックするという方法です。

最近追加したタグで、表示スピードに影響がありそうなものは、、、

Zendesk サポートのウィジェット

ということで、一旦、Zendesk サポートのタグをタグマネージャーで一時停止にしてみたところ。

モバイルスコアが60前後まで改善しました

Zendesk のウィジェットを全てのページに表示させるようにしていたので、お問い合わせページのみで動作するようタグマネージャー側で調整しました。

タグマネージャー側で、Zendesk のウィジェットのトリガーをお問い合わせページのみで発火させるように設定するだけで解決です。

トリガーの設定

イベントタイプ：ページビュー

トリガーの発生場所：一部のページビュー

フィルタ：Page path 含む contact

このような形でOKです。

Mixhostの LiteSpeed Cacheでさらにチューニング

まずは定番メディア画像の圧縮

LiteSpeed Cache プラグインならメディアに登録されている画像をじゃんじゃん圧縮してくれます。

自動で定期的に最適化もしてくれますが、手動でその都度画像を最適化もしれくれるので、きになったらたまに手動で最適化しています。

メディアの画像一覧でみると、LiteSpeed の最適化が処理されているのがこんな感じでわかるじぇ〜

そのほかLiteSpeed Cacheの細かいチューニング

css や JavaScript で圧縮や結合できるものはオンにするなど、細かいところを触っているとなんとかモバイルのスコアが70台〜80台まで伸びました。

まずまずというところでしょうか。

Mixhostサーバーは相変わらず高速街道まっしぐらです

当サイト以外のクライアントのホームページなら、WordPress + Mixhost の組み合わせのサイトは、相変わらずモバイルでも90以上と、高速街道まっしぐらとなっています。

当サイトだと、Zendesk や広告関係のタグなども入れてるのと、Sangoテーマで個別に最適化していく必要がありそうな感じで、、、

90台で高速だぜぃ〜！という感じにはまだなっていないのですが、それでも70〜80は安定して出せるようになりましたよ。

使っているテーマの細かいチューニングをするとさらにもう少しスピードは改善できそう。

Sango + MIxhost + LiteSpeed Cache のオススメ設定の記事書こうかな。あんまり情報がないっぽい。

テーマのカスタマイザーの

詳細設定 > 【高速化】Gutenberg用のCSSを読み込まない

これチェック付けておくだけでスコアが10くらい上がる。たまに80台にいくんだけどもうひとこえしたい。 pic.twitter.com/aKRUUTYucy

— 🔰🤓薬師神裕樹 (@yayuyayu) June 13, 2019

薬師神

って感じなので、また別記事で、LiteSpeed Cache 側の細かい設定も別の機会にご紹介しますね〜

結論：WordPress + Mixhost は最速の組み合わせ

今回のように細かいチューニングも気軽にできるのが Mixhost のすんばらしい所です。

WordPress をお使いなら、サーバーはLiteSpeed Cacheプラグインが使える Mixhost 一択でしょう。この早さ、メンテナンス性の良さ、他サーバーは考えられません。

SSLもサクッとポチポチするだけで簡単に設定できます。

ということで、みなさんぜひ使ってみてください。高速街道を一緒に突っ走りましょう。

10日間はお試し無料なので試してみるだけでも価値あり

10日間無料で使えるので、試しにどんなものか使ってみるってだけでも良いのではと思います。

奥の手を追記（2019/06/13 22:09）

その後も少し手を入れていたのですが、奥の手があったようなので追記します。

その方法は、なんと驚き。

LiteSpeed Cache プラグインを削除して再インストールする

その発想はなかったわ〜！！

やくしじん

という感じで、実際やってみたら確かに少しスコアがまた改善しました。

データベースの最適化も簡単にできちゃいます

ついでに、リビジョンとか不要な下書きデータとかめっちゃ溜まってたのでついでに削除しておきました。

こういうのもワンクリックで削除できるので Mixhostサーバー + LiteSpeed Cache はマジで神サーバーです。

WordPress + Mixhost ＝神の領域

WordPress のオススメのサーバーを検索するといろいろなサーバーがでてきますよね。だいたいがアフィリエイト目的のゴミ情報なのですが、Mixhost だけはマジで神レベルのサーバーです。

私はほんとに良いと思ったものしかオススメしないタイプの人間な上に、嫌になったらこれでもかというくらい何に対してもディスっちゃうクソみたいな人間なんですが、Mixhost サーバーはほんとに今まで使った中で最高です。約20年くらいこの業界で色んなサーバーを使ってきましたが、神の領域の最高評価をしています。