「SANGO」を使用している当ブログにおける「LiteSpeed Cache」の設定

WordPressテーマ「SANGO」の導入に際して、WordPressプラグイン「LiteSpeed Cache」の設定を見直し、表示速度の高速化を図りました。

当ブログではGoogleアナリティクスやGoogleアドセンスなどを利用しているため、PageSpeed InsightsGTmetrixといった測定ツールにおいて、かなりの高評価を取ることは難しいですが、それでも何もしないよりは改善できたので紹介します。

なお、プラグイン「LiteSpeed Cache」はMixHostなど「LiteSpeed」を採用しているサーバーでのみ利用可能なのでご注意ください。

スポンサーリンク

確認事項

はじめに、この記事を書くにあたって必要そうな情報をまとめてみました。すべて投稿日時点での情報です。

WordPress Ver.4.9.8
レンタルサーバー MixHost(旧エコノミープラン)
PHP Ver.7.1
テーマ SANGO(Ver.1.5)
プラグイン LiteSpeed Cache(Ver.2.6.0.1)
他の高速化施策 Unveil Lazy Load(Ver.0.3.1)による画像遅延ロード(記事ページのみ)

また、各種バージョンが当ブログのものと同じ場合でも、入れている他のプラグインとの相性により問題が発生する可能性もゼロではないでしょう。

そのため、当記事は参考程度に見ていただき、プラグインの項目設定の際にはあらかじめバックアップをとったうえで、自己責任のもと試していただきたく思います。

なお、当プラグインの導入自体はMixHostのサポートページに記事があります。(参考:WordPressでLiteSpeed Cacheを使用して高速化する方法

設定後の当ブログでの結果

設定内容を紹介する前に、設定後の各種ツールでの測定結果を載せておきます。使用ツールはPageSpeed InsightsTest My SiteGTmetrixの3つです。

PageSpeed Insights

モバイル:95点、パソコン:90点

Test My Site

2秒(3Gでの読み込み時間:特に良好)

GTmetrix

PageSpeed Score A(93%)、YSlow Score:C(71%)、Fully Loaded Time:4.1s

高速化のための設定内容

それでは設定内容を紹介します……と言っても当ブログでいじっているのは「最適化」タブの項目だけです。(その他はすべてデフォルトのまま)

文章で紹介すると冗長になりそうなので、各項目のオン・オフを箇条書きにしてみました。赤文字のものは後で補足があります。

  • CSS 圧縮化:オン
  • CSS 結合:オフ
  • CSS HTTP/2 プッシュ:オン
  • JS 圧縮化:オン
  • JS 結合:オン
  • JS HTTP/2 プッシュ:オン
  • CSS/JS キャッシュ TTL:604800秒
  • HTML 圧縮化:オン
  • インライン CSS の圧縮:オン
  • インライン JS の圧縮:オン
  • CSSを非同期ロード:オフ
  • クリティカル CSS を生成:オフ
  • バックグラウンドでクリティカル CSS を生成する:オフ
  • インライン CSS 非同期ライブラリ:オン
  • JS Deferredをロード:オン
  • JQueryを除外する:オン
  • DNS プリフェッチ:空欄
  • コメントを削除します:オン

プラグインの注意書きとして「このリストでオプションを有効にするときは、十分にテストしてください。」とあったため、初期設定からオン・オフを切り替えるたびに保存、キャッシュをパージ(消去)して不具合が出ないか確かめながら作業しました。

さて、先述の通り、赤文字の箇所について補足をします。

まず「CSSを結合」をオフにした理由。これはサイトの表示自体は全く問題なかったものの、PageSpeed Insightsのスコアが数点下がったためオフにしています。

複数のCSSファイルが1つになるので良さそうだと思ったのですが、当ブログの場合は結合させずに別々に読み込んだ方がスコアが高く出ました。(時間をずらしつつ10回くらい試行)

次に「CSSを非同期ロード」がオフの理由。これはオンでもPageSpeed Insightsのスコアが低下することはなかったものの、スマホで見た時にファーストビュー領域が表示されるまでの体感速度が遅くなったため。

「クリティカルCSSを生成」もオンにした状態だとまた違うのかもしれませんが、僕自身知識がなく、また「CSSを非同期ロード」はデフォルトがオフだったため、そのままオフにしています。

おわりに

以上、「MixHost」×「SANGO」で運営している当ブログにおける「LiteSpeed Cache」の設定でした。

繰り返しになりますが、上で紹介したMixHostのサポートページでも書かれているように、ワードプレスのテーマやプラグイン等の環境によって「LiteSpeed Cache」が正常に動作しないこともある点は、頭に入れておいていただければと思います。