【SWELL高速化】無料プラグイン「LiteSpeed Cache」で表示速度改善

アイキャッチ

「テーマ名+高速化」のタイトルで「このテーマはPageSpeed Insightsのテストで何点以上で~」といった記事をよくみかけますが、

  • スクショでスコアを表示しているが、そのページを実測してみると実はスコアが悪い
  • なぜがその記事だけアドセンスを外している、またはそもそもアドセンスを利用していない

みたいなことが割とあります。実測値が悪いブログについては、そのときのサーバーの状況にもよるのでたまたまスコアが悪かったのかもしれません。しかし、アドセンスなしのブログは速度出て当たり前でしょ?って話で、アドセンスを利用している側にしてみれば全く参考になりません。

ここでは、アドセンスを貼っていても表示速度が落ちない環境を紹介します。

このブログの高速化施策
使用テーマ

SWELL

レンタルサーバー

ColorfulBox

高速化プラグイン

LiteSpeed Cache

不要になる高速化プラグイン
  • W3 Total Cache
  • WP Super Cache
  • Autoptimize
  • Async JavaScript
  • EWWW Image Optimizerなど

このページのPageSpeed Insightsテスト

実測値がもし悪かったら、それは「たまたま」サーバーが混みあっているんです。503エラー寸前なんです(すっとぼけ)。

モバイルのスコアはおおよそ90点付近、PCはほぼ満点で全く不満はありません。

このブログは高速化に関する専門的なカスタムを一切行っていません。LiteSpeed Cacheを導入してSWELL標準の高速化設定をしただけです。

参考:高速化前の状態(SWELL高速化機能…全OFF、LiteSpeed Cacheプラグイン…無効)

以前はサイトの高速化についてあれこれ調べてカスタムしていましたが、今の環境になってそういった苦労が全くなくなりました。みなさんが高速化の沼にハマらないように、環境だけで手っ取り早く高速化してしまう方法を紹介します。知識不要なので初心者ブロガーにおすすめの方法です。

結論、LiteSpeed採用サーバーLiteSpeed Cacheプラグインを使いましょうというお話です。高速化について悩む必要が全くなくなる&無料なのでおすすめです。

目次

SWELLの高速化設定

テーマの高速化はキャッシュとレンダリングに関するチューニングが主になります。【Autoptimize】や【Async JavaScript】といったプラグインが有名ですが、適切に使わないと効果が出ません。

SWELLはページキャッシュ機能やjavascriptの遅延読み込み、CSSのインライン化(一部β版)が標準で実装されています。ある程度はプラグインに頼らずとも高速化が可能です。

ここではSWELLの高速化設定を紹介しますが、前提は以下の通りです。

  • 【LiteSpeed Cache】を後述するページ通りに設定する
  • 他の高速化プラグインを入れていない

ページキャッシュ機能

基本的には全てONで問題ありませんが、【LiteSpeed Cache】以外のプラグインには影響する可能性があります。例えば【Widget Logic】でウィジェットの共通サイドバーを条件分岐表示させる場合、サイドバーをキャッシュするはチェックを外す必要があります。

SWELL2.6.2で制限エリアブロックに条件分岐の機能が追加になりましたが、同様にキャッシュが効いているとうまく機能しません。該当するウィジェットのキャッシュはチェックを外してください。

遅延読み込み機能

遅延読み込み機能です。画像の遅延読み込みはHTML/CSSのloading属性lazyとjavascriptlazysizes.jsを選択できるようになっています。AMP対応のテーマはjsで遅延する必要がありますが、SWELLはAMP非対応なのでloading属性lazyを選択できます。

外部スクリプトもスクリプトごとに遅延読み込みするかどうかが指定できます。もちろん、アドセンスも遅延読み込み可能です(遅延時間も調整できます)。

記事下コンテンツを遅延読み込みさせるフッターを遅延読み込みさせるは、そのエリアで不具合が出ない限りONで問題ありません。

「画像等のLazyload」はサイトに動画を埋め込んでいないのであればloading=”lazy”を使用するでOKです。動画を埋め込んでいるのであれば、FireFoxとSafariがデフォルト設定で動画未対応(2022年4月時点)なのでそれを勘案して判断しましょう。

  • 読者がスマホメインで動画も割と多め…スクリプト(lazysizes.js)を使って遅延読み込みさせるをON
  • それ以外…loading=”lazy”を使用するをON

「スクリプトの遅延読み込み」は公式マニュアルに詳しく解説されています。よく分からなければマニュアル通りで大丈夫です。

遅延させる秒数ですが、私は5秒で設定しています。

ファイルの読み込み、ページ遷移高速化

CSSのインライン化です。CSSをファイルで読み込まずにインライン化する(レンダリングブロックを防ぐ)ことでパフォーマンスは上がりますが、全てのCSSをインライン化するとそれはそれで読み込み量が増えるのでやっぱりパフォーマンスは低下します。

コンテンツに合わせて必要なCSSだけを読み込む【β機能】はおそらくファーストビュー分だけCSSを読み込む機能です。まだβとのことですが、はっきりいって神機能です。

「ファイルの読み込み」はSWELLのCSSをインラインで読み込むコンテンツに合わせて必要なCSSだけを読み込む【β機能】にチェックを入れます。表示崩れや他のプラグインで不具合が発生するようであればチェックを外します

「ページ遷移高速化」はPrefetchをおすすめします。jsを利用しているので読み込み量がほんの少し増えますが、体感で遷移が早いのでユーザーには喜ばれると思います。

LiteSpeedサーバーでLiteSpeed Cacheを導入する

無料プラグインLiteSpeed Cacheを導入するだけでPSIのスコアが上昇します。私は専門家ではないので詳しい事はわかりませんが、調べた限りではコスト的にお得な方法です。

【LiteSpeed Cache】が無料で高パフォーマンスを発揮

バックエンド(サーバー側)の高速化はキャッシュ対策が主になります。この部分はプラグインに頼るのが一般的ですが、設定の難易度が高いです。無料のプラグインだと【W3 Total Cache】が有名ですが、設定項目が多岐に渡るため、素人にはとても扱えません。おすすめ設定を公開している記事もありますが、その設定がハマらない人もいるでしょう。

【WP Super Cache】は機能をページキャッシュに限定しているので設定は簡単ですが、その分効果が薄くなりがちです。

有料プラグインだと【WP Rocket】が有名です。ほぼデフォルト設定で高速化できる優れもの。現状は高速化するならコレ一択といった感じです。たまに見かける爆速ブログはほぼこれを導入しているといっても過言ではありません。

年間49ドルは効果を考えれば安いと思いますが、収益が安定していない人には捻出できない金額です。

LiteSpeedサーバーには専用のプラグイン【LiteSpeed Cache】があります。このプラグインが無料ですさまじい効果を発揮してくれます。設定内容は思いっきり他のサイトを頼りましたが、丁寧に解説されているので誰でも簡単に設定できます(これもほぼデフォルト設定でスイッチを数か所オンオフするだけです)。

Apache + NginxLiteSpeedは同等のプランであれば費用は似たり寄ったりですが、プラグイン代が不要でPageSpeed Insightsのモバイルスコアが大幅に良化することを考えれば、トータルでLiteSpeedサーバーの方がお得です。

【LiteSpeed Cache】には画像を最適化する機能もあります。wedp変換も自動で行ってくれるので【EWWW Image Optimizer】などの画像最適化プラグインは不要になります。「次世代フォーマットでの画像の配信」の指摘ともさよならできます。


テーマ内蔵のキャッシュ系機能が他のプラグインと競合して不具合を起こすことがあります。【LiteSpeed Cache】も相性の悪いテーマは存在するようですが、SWELLとは相性が良いようです。

私の環境では全く問題ありません。SWELLの高速化設定と【LiteSpeed Cache】を併用していますが、不具合は一度も出ていません。

LiteSpeed Cacheを導入するメリットは?

強力なキャッシュ管理により、サーバー側の処理が高速になります。複数のプラグインで行っていた管理を一元化できるのも大きなメリットです。具体的には以下のプラグインは不要になります。

  • W3 Total Cache
  • WP Super Cache
  • Autoptimize
  • Async JavaScript
  • EWWW Image Optimizer
ApacheサーバーにLiteSpeed Cacheは使える?

使用できません。LiteSpeedサーバー専用のプラグインです。

LiteSpeedを採用しているレンタルサーバーは?

ロリポップ(ハイスピード/エンタープライズ)、mixhost、ColorfulBox、CORESERVER(CORE-X/Y/Z)、ラッコサーバーが代表的です。

おすすめのLiteSpeedサーバー

月1,000円程度の費用でレンタルできるLiteSpeedサーバーを3つ比較してみました。サーバー引っ越しを検討している人は参考にしてください。

ロリポップmixhostColorfulBox
プラン名ハイスピードスタンダードBOX2
プラン月額825円1,078円1,116円
874円
プランダウングレード不可差額返金なし差額返金
初期費用無料無料無料
WEBサーバーアプリLiteSpeedLiteSpeedLiteSpeed
SSD容量400GB300GB300GB
データ転送量目安無制限無制限無制限
独自ドメイン取得1個無料別料金1個無料
ドメイン数無制限無制限無制限
データベース無制限無制限無制限
メモリ非公開8GB8GB
vCPU非公開6コア6コア
WordPress簡単インストール
メールサポート
電話サポート
SSL化
自動バックアップ頻度:自分で設定
過去7回分
300円/月
頻度:毎日
過去14日分
頻度:毎日
過去14日分
WAF
管理画面オリジナルcPanelcPanel
お試し期間10日間30日間
返金保証
30日間
その他アダルト可別にアダルト用
のプラン有
各プランは12か月契約の内容です。月額は年払いの金額を1か月あたりに換算したものです。
ColorfulBoxは6月30日までのキャンペーン金額です。

表の項目から何点かピックアップして詳しく比較します。

独自ドメイン取得

ロリポップmixhostColorfulBox
独自ドメイン
取得
12か月以上の
契約で1個無料
別料金12か月以上の
契約で1個無料

ロリポップとColorfulBoxは12か月以上の契約で独自ドメインが1個、無料でもらえます。更新費用もレンタル期間中はかかりません。引っ越しを考えているならあまり関係ないかもしれませんが、新規で立ち上げるなら費用面で有利です。

サポート

ロリポップmixhostColorfulBox
電話サポート

電話サポートはmixhostとColorfulBoxにはありません(ColorfulBoxにある電話サポートは技術面についてサポート外です)。mixhostかColorfulBoxを選択する場合は、メールサポートに頼るかググるしかありません。

ただ、mixhost・ColorfulBoxどちらの情報も、ネット上で簡単に手に入れることができます(どちらも【cPanel】でググれば情報は割とあります)。自力で何とかするタイプの人であれば、サポートに頼らずともやっていけますし、もちろんメールでの問い合わせは可能です。

ちなみにロリポップの電話サポート、口コミはこんな感じです。これが本当なら電話サポートがあってもなくても同じですね。

自動バックアップ

ロリポップmixhostColorfulBox
自動バック
アップ
頻度:自分で設定
過去7回分
300円/月
頻度:毎日
過去14日分
頻度:毎日
過去14日分

ロリポップ以外のサービスは各社共通で、毎日1回バックアップを取り、過去14日分のデータを保持してくれます。復元する場合、14日分の中から好きなデータを選択できます。

ロリポップは頻度を自分で設定し、過去7回分のデータを保持してくれます。ただし有料オプションです。オプションを申し込まなかった場合でも、復元は11,000円で行ってくれますが、バックアップのタイミングは任意ではありません。

WAF

ロリポップmixhostColorfulBox
WAF
※過剰検知多い

WAF(Web Application Firewall)とはWEBサイトの保護を目的とするセキュリティシステムです。各社とも標準装備されているので共通のスペックではありますが、ロリポップはWordPressのプラグインを過剰検知する傾向があります。

都度WAFをOFFにするか、除外設定をすれば回避は可能です。

管理画面

ロリポップmixhostColorfulBox
管理画面オリジナルcPanelcPanel

mixhostとColorfulBoxはcPanelというコントロールパネルを採用しています。これは個人的な感想ですが、このcPanelが直感的に分かりにくいです。表記がなんとなく日本人には不向きな気がします。

慣れてしまえばなんてことはありませんが、cPanelが初めての人は最初のうちは戸惑うかもしれません。

ロリポップはオリジナルの管理画面で分かりやすいですが、広告が貼ってあるのが気になります。ドメインサービスとかASPだったりするので関連度が高いのは分かりますが、有料サービスの管理画面でそれやりますかね?そこから申し込んで特典があるわけでもなし、公式ページでどうぞって感じです。

お試し期間

ロリポップmixhostColorfulBox
お試し期間10日間30日間返金保証30日間

ロリポップ、ColorfulBoxは無料のお試し期間が用意されています。お試し期間終了までに決済を済ませれば正式サービスに移行できます。お試し期間中は、決済に必要な情報を入力する必要がないので気軽に試すことができます。

注意

ロリポップの「10日間お試し」は少し注意が必要です。申込時に自動更新とクレジットカード情報の入力をする欄がありますが、そこにチェックを入れて申し込むと「契約」したことになり、解約は決済後でないとできません。「10日間お試し」ではなく「10日間無料」になります。非常に分かりにくいUIです。

mixhostは30日間以内なら返金を受け付けてくれます。ただ、申込時に決済情報が必要です。気軽さでは前述の2サービスよりハードルが少し高くなります。

費用

ロリポップmixhostColorfulBox
プラン名ハイスピードスタンダードBOX2
初期費用無料無料無料
プラン月額825円1,078円1,166円
874円
プランの
ダウングレード
不可差額返金なし差額返金
バックアップ復元300円無料無料
ColorfulBoxは6月30日までのキャンペーン金額

費用面は3つとも大差ありません。バックアップの復元を行わないのであればロリポップが最安ですが、そうでなければどれも横並びです。

ColorfulBoxが唯一、プランのダウングレードに対して差額を返金してくれます。契約期間内でプランを自由に変更でき、差額がマイナスの場合(ダウングレードした場合)管理画面の残高へ返金されます。残高は次回以降の契約更新やアップグレードに利用できます。柔軟にプランを変更できるのはColorfulBoxの大きなアドバンテージです。

おすすめはColorfulBox

\ 30日間無料お試し /

プラン名BOX2
プラン月額1,166円
初期費用無料
WEBサーバーアプリLiteSpeed
SSD容量300GB
データ転送量目安無制限
独自ドメイン取得1個無料
ドメイン数無制限
データベース無制限
メモリ8GB
vCPU6コア
WordPress簡単インストール
クイックスタート
メールサポート
電話サポート
SSL化
自動バックアップ頻度:毎日
過去14日分
WAF
管理画面cPanel
お試し期間30日間
その他別にアダルト用
のプラン有
キャンペーン実施中(2022年6月30日まで)

クーポン利用で初回契約のみ25%OFF(Box2が874円/月)
クーポンコード:SV25NQ4756YUMC

※クーポンコードは公式ページ内にも記載があります

LiteSpeedサーバーへ引っ越すならColorfulBoxから試すのがおすすめです。

  • お試し期間が30日間
  • プランを柔軟に変更できる

試してダメなら引越しをやめるor他のレンタルサーバーを検討することができます。

ある程度運用してみてスペックが過剰と感じればダウングレード(Box1)することも可能です。

ネット検索してもおすすめしている人をあまり見かけませんが、超優秀なレンタルサーバーサービスです。なぜこんなに知名度が低いのかわかりません。


CWVの観点からも表示速度は上げたいし、何より表示が遅れることによってユーザーに離脱されるようではせっかくの良コンテンツが台無しです。高速化の沼にハマっている人はLiteSpeedサーバーLiteSpeed Cacheを試してみてください。記事執筆に集中できるようになります

高速化に関して悩むことがなくなるので快適です。

SWELLは高速化に限らず国産最高峰のテーマです。

  • アップデート頻度…文句なし。機能も順調に拡張し続けている。不具合対応も早い。
  • サポート…フォーラム形式で活発。開発者と回答者がフォーラムのいい雰囲気を作っている。
  • ライセンス数…制限なし。好きなだけブログを量産できる。
  • ブロックエディタ対応…完全対応。記事執筆が超快適。
  • 機能性…他テーマと比較してもトップクラス。比較記事はこちら
  • デザイン性…基調はシンプルですが、カスタムする環境は整っています。色々な方向性でデザインすることが可能。
  • 価格…17,600円(税込み)

\ ブログ運営が楽しくなる/

よかったらシェアしてね!
  • URLをコピーしました!
目次