Mixhost + LiteSpeed Cache + CloudflareCDNで最速の設定を全画像付で解説【SANGO爆速】

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

この記事内容を実施する際のご注意

作業の前に

今回の記事はMixhostサーバー、LiteSpeedCacheプラグイン、CloudflareCDNサービス、SANGOテーマを利用しています。機能が重複するプラグインを適用されている場合や、ご利用のサーバーの種類、テーマなどご利用の環境が違う場合は同じ結果が得られるとは限らないことにご注意ください。キャッシュ機能は一時的なデータを保存することで高速表示を可能にする機能です。そのため、設定中や設定反映直後はキャッシュ機能によって設定結果が即反映されないといったケースもありますので、その場合はWordPress側のキャッシュをクリアする、Cloudflare側のキャッシュをパージするなどの作業が必要です。
不具合が生じた場合もすぐに元に戻せるように注意しながら作業してください。

■2019/06/18追記

LiteSpeedCash の設定を変更：Cloudflare のCDNを連携
WebP画像に対応
遅延読み込み系を有効に

■2019/06/24追記
AdSense/外部JavaScript対策で以下を変更しました。

AdSense当の対策でJavaScriptの圧縮/結合をオフに
HTML圧縮化をオフ
DNSプリフェッチを設定
JS除外を設定
Iframes 遅延読み込みをオフに

合わせてキャプチャも更新しています。

当サイトはWordPressのSANGOというテーマで構築しています。

SANGOテーマは、月間300万PVの超人気ブログメディアサルワカさんが発売している、おしゃれで使いやすいWordPressテーマです。このSANGOテーマ、人気が高くいろんなブログメディアで使われているのを見かけます。

サルワカさんのサイトと、SANGOテーマのサイト。

参考サルでも分かる図解説明マガジンサルワカ参考つい長居したくなる、居心地の良いデザインWordPressテーマ「SANGO」

とても使い勝手が良いので、当サイトでも大変便利に使っているのですが、最近になって、すこし表示スピードが気になりはじめてきました。

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

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

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

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

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

この記事の見出し

SANGO + Mixhost のベストな設定を見極めたい

弊社は、当サイト以外にもいろいろなホームページを制作、運営しているのですが、サーバーはこちらのMixhostを利用しております。

Mixhost サーバーのホームページはこちら

当サイト以外で運営しているサイトはお客様のホームページだったり、工務店業界に特化したホームページサービス、治療院向けに特化したホームページサービスなど、特定の業種に特化したホームページが多く、WordPressをベースにホームページを開発しています。

お客様のホームページのテーマはオリジナルのテーマを開発していますが、Mixhost サーバーのおかげでどのホームページも高速表示ができています。

SANGOテーマはチューニングが必要？

同じMixhostサーバーでも、なぜかSANGOテーマだけはちょっと表示速度が高速とは言いにくい状況が続いていて、、、色々と設定を掘り下げていました。

その時の記事はこちら。
爆速街道：WordPress + Mixhostで表示速度を高速化簡単チューニング

色々と試行錯誤を繰り返したところ、まぁまぁ納得のいく速度まで安定して改善できたので、LiteSpeed Cache の細かいセッティング含め全て公開したいと思います。

ちなみに、色々ネットで調べていくなかで、他にもMixhost サーバー + SANGOテーマを利用されている方もいらっしゃったのですが、この記事を書いている時点（2019年6月14日）で実際にPageSpeed Insights で計測してみたところ、当サイトより早いところは見当たりませんでした。

いくつかほかのサイトを調べてみた結果

『SANGO Mixhost 速度』などGoogle検索をして「SANGOテーマで早くなった」系の記事を見ると、、、

PageSpeed Insights で90台でました！
Test my site で2秒台でました！
高速です！

みたいな感じなので、実際にPageSpeed Insightsで計測してみました。

PageSpeed Insightsとは

Gogoleが無料で提供している、ホームページの表示速度を計測し、表示速度の改善ポイントなどをチェックすることができるサービスです
参考 PageSpeed InsightsGoogle ページスピードインサイト

やくしじん

実サイトを出すと角が立ちそうなので計測結果だけ･･･3つのサイトの結果を貼りますね。
どんなサイトか気になる方は、実際にチェックしてみてください。

実際に計測してみると･･･

うーん。。。。

本家サルワカさんの表示速度スコアは？

SANGOテーマの本家であるサルワカさんのホームページも、余計なお世話かと思いますが計測してみました。

おお！さすが本家！

コンテンツがたくさんあって、ページ内容もデザインもSANGOよりも凝っているにもかかわらずこのスコア。

私はとても凄いと思いました。

やくしじん

サルワカさん、名指しでやり玉に挙げるような形になって申し訳ありません！

SANGOテーマは広く多くの方に愛されているテーマですし、私も本当に気に入って使わせて頂いているので、悪気があってやり玉に挙げてるとかじゃないんです！

MixhostサーバーやLiteSpeed Cache との相性、細かいセッティングで悩まれている方もいらっしゃると思うので、そのような方に有益な情報となるようにこの記事を書いていますので、その点ご容赦ください。。。

SANGOテーマとMixhostサーバーの組み合わせで高速なメディア運営を実現できる人が一人でも多く増えることを願っているだけですので…

という感じで少し言い訳させて頂きつつ、当サイトのスコアもお見せします。

当サイトのモバイル表示のスコア：83

計測するタイミングで上下はするのですが、2019年6月18日 02:00時点では83でした。

何度か計測し直すと90台がでたりすることもありますが、おおよそ75〜80台の間で落ち着いています。

※全てモバイルでのスコア

で、ここから、実際に当サイトで行っている設定を全て大公開していきます。

SANGOテーマ + Mixhost の最速チューニング決定版

SANGOテーマをMixhostサーバーで利用されている方で、表示速度の改善に取り組みたい方向けに、当サイトで行った調整と、肝心の神プラグインLiteSpeed Cache の細かいセッティングを全部公開します。

念のためですが、今回の記事を試しても同じ結果が得られるとは限りません。動作など保証しませんので自己責任という前提でお試しください。

LiteSpeed Cacheプラグインの設定を全てキャプチャ掲載

主要画面を全てキャプチャで掲載しますので、参考にしてください。

※ここからは画像ファイルをクリックすると別ウィンドウで大きな画像が開くようにしています

LiteSpeed Cache 全般

LiteSpeed Cache 除外

URIsをキャッシュしない という項目に「お問い合わせページ」のURLを指定しています。

お問い合わせページのキャッシュトラブル対応

これは速度表示改善には関係ありません。LiteSpeed Cacheのキャッシュで、まれにお問い合わせフォームで「以前問い合わせた人の情報が確認画面に表示される」という現象を確認しました。

それ以来、お問い合わせフォームページではキャッシュしないよう設定しています。

LiteSpeed Cache を使用される場合は、同じように設定しておくと良さそうなのでご紹介しまいした。

LiteSpeed Cache 最適化（2019/06/24更新）

AdSense当の対策でJavaScriptの圧縮/結合をオフに
HTML圧縮化をオフ
DNSプリフェッチを設定

AdSenseなどを利用される場合は上記の設定が良いです。たまに広告が表示されないケースがあるので、ここは広告表示優先する場合トレードオフ（最適化を諦める）項目になります。

LiteSpeed Cache チューニング（2019/06/18更新）

Cloudflare のCDN導入に伴い項目全体を見直しました。
AdSenseのタグを「JS除外」「JS 繰延を除外」に設定してみました。さらにヒートマップのJSも追加。

LiteSpeed Cache メディア（2019/06/18更新）

Cloudflare CDN連携に伴い内容を見直しました。
画像遅延読み込み関連をオンにしました。
WebP画像関連の設定もオンにしました。
AdSense対策で以下オフにしました。
Iframes 遅延読み込みをオフにしました。
インラインレイジーロードイメージライブラリをオフ

LiteSpeed Cache CDN（2019/06/18更新）

Cloudflare CDN を連携しました。（さらにめっちゃ早くなりました）

LiteSpeed Cache 高度

LiteSpeed Cache 管理メニュー

管理メニューのDBオプティマイザタブの中の不要なデータは、定期的にクリアしておくと良いでしょう。

LiteSpeed Cache 画像の最適化メニュー

ここで手動で画像の最適化も実行できます。たまに気付いたら手動で最適化を実行します。

連続でやり過ぎるとエラーになるので、気付いたらって感じですね。

基本的に自動で画像最適化処理はされますので、放置しておいても問題ないです。

そのほか：プラグインも全部お見せします

プラグインを多用するとWordPressの速度が遅くなると良く言われますが、実は当サイトでは結構ゴリゴリに入れてます。

現時点で、有効化してるのだけで18個！

しかし、今のところ動作に支障を出しているプラグインは無いのでこのままにしています。

SANGOテーマと相性が悪いプラグインがあるようで、そういうのは入れない方が良いでしょう。

一応、動作に支障を出しているプラグインが検証できるP3 (Plugin Performance Profiler) でチェック済みで、動作は検証済みなので、ゴリゴリ入れてますがあまりプラグインの数は気にしてないですね。

有効にしているプラグインをリストで書き出しておきます。これだけ入れても遅くな〜い！

AddQuicktag （任意のタグをエディタに追加できる）
Avatar Manager （書いた人とかのアイコンを表示させる）
Classic Editor （クラシックエディタ派：GutenbergをOFFるため）
Disable Comments （必要ない固定ページ等にコメント欄を非表示にする）
Duplicate Post （投稿を複製する）
Easy Table of Contents (目次パーツ)
Google XML Sitemaps （サイトマップ用）
Intuitive Custom Post Order （SANGOテーマに入ってた）
LiteSpeed Cache （今回主役の神プラグイン）
P3 (Plugin Performance Profiler) （動作が遅いプラグインが無いかチェックできる）
PS Auto Sitemap （静的サイトマップ作成）
Reading Time WP （この記事は○○分で読めるってやつを表示させる）
Search Regex （DBの文字列を置き換える）
Simple 301 Redirects （301リダイレクトの設定ができる）
TinyMCE Advanced （エディタ用）
WP Google My Business Auto Publish （Googleマイビジネス連携用）
WP Robots Txt （手動でrobots.txtを管理する）
IP Geo Block（IPアドレスの確認やセキュリティ機能の強化）

SANGO + Mixhost で高速化のためにやっておくべきこと

Gutenberg用のCSSのチェックは外しておこう！

これ、めっちゃ大事です。

外観 > カスタマイズ からテーマカスタマイザーを開いて

詳細設定 にある【高速化】Gutenberg用のCSSを読み込まない のチェックは必ず入れておきましょう。

このチェックだけで、PageSpeed Insights のスコアが10くらい変わります。

Gutenbergのエディターじゃなきゃブログが書けない！という方は使う必要がありますが、クラシックエディタ派の方は忘れずチェックを入れておきましょうね。

そのほかやったこと

こちらの記事にそのほかの深掘り内容をとりまとめていますが、そのほかのポイントとして。

AdSenseとかのタグを入れるとどうしても遅くなるよ
外部サービスなどのタグ入れると遅くなるよ（当サイトの場合はAdSenseとZendeskのウィジェットがそうでした）
プラグインもWordPressも最新の状態に更新しておこうね
色々やってスッキリしないならLiteSpeed Cache プラグインごと削除して入れ直しちゃえ

って感じです。

色々とLiteSpeed Cache プラグインの細かい設定含めて検証してみたのですが、最適化タブ、チューニングタブのCSSやJavaScriptの圧縮結合まわりは、単独でONにすると逆に遅くなったりと、組み合わせの相性があるようで試行錯誤しました。理屈はわからないのですが、今のところこの設定で、過去最高速度スコアになっている感じなので落としどころとして記事にしました。

LiteSpeed Cache プラグイン1本でWordPressの最適化周りの設定は全てできる

WordPressの速度改善については、いろいろなプラグインを入れて

画像圧縮
画像の遅延読み込み
キャッシュの処理
コードの圧縮/結合
CDNの連携

みたいなことをやっている方が多いと思いますが、Mixhost の神プラグイン LiteSpeed Cache なら、全てこれ1本で処理できるのが凄いところです。

技術的なことは私もよく分かっていません。（サーバーまわりやキャッシュ処理などは専門外なので）

でも、よくわかんなくても、高速化できればOKです。そういうのが簡単にできるのが、Mixhost サーバーの神プラグイン LiteSpeed Cache です。

SANGOテーマの高速化も、なんか良くわかんないのですが、本家サルワカさんよりも早くできたので、それはそれで良いことじゃないでしょうか。入れてる広告の数とか諸々の条件が違うので単純比較はできませんが、スコア80台が出せればSANGOテーマの中では高速の部類に認定されても良いような気がしますので、みなさんもぜひ試してみてください。

最後に、当サイトのその他のスペック的なものを記載しておきます。