【SWELL高速化】表示スピードが遅い場合の改善方法｜プラグインならWPロケット一択

そんな疑問に答えます。

WordPress有料テーマのSWELLは表示スピードが早いとネットで評判です。それでも、なぜかGoogle Speed Insightsでスコアが低いことってありますよね？ページの読み込みスピードはSEOに影響が出るのでなるべく改善したいところ。

でもどんな設定をすれば良いか分からない人も多いと思います。この記事では当サイトで行っているSWELLの高速化設定方法について全てお話します。

ちなみに当サイトの表示スピードは以下の通りモバイルが99、パソコンが100点です。

トップページには動画、高画質の画像、記事スライダーを使っています。ありえないぐらい早いですよね？

使っているプラグインとSWELLの高速化方法を知りたい人はぜひ最後までお読みください。

SWELLの表示スピードを高速化するならWPロケットプラグイン

当ブログでは高速化のため、「WPロケット」という有料プラグインを使っています。

WordPressにはサイトを高速化するキャッシュ系プラグインや、遅延読み込み機能プラグインなど無料のものが結構あります。そういった無料とはちょっとレベルが違うのが有料プラグインです。

WPロケットは本気でサイトを爆速にしたい人や、少しでも検索順位を上げたい人といったガチ系ユーザー向けのプラグインです。

公式 WordPress高速化プラグイン「WPロケット」

WPロケットって何だ？

WPロケットはWordPress向けに開発された高速化プラグインです。海外のプラグインなんですがここ最近日本でもブログやコーポレートサイトの高速化に導入されるケースが増えています。

有名ブロガーのヒトデさん運営の「ヒトデブログ」、SWELLと業務提携している速化専門スキルシェアさんのサイトでもWPロケットプラグインは使われています。

WPロケットを導入している人

どれぐらい高速化の効果があるの？

ページ読み込み速度をGoogle Page Speed Insights で測定したデータをシェアします。

SWELLでページ読み込み速度の遅いページ作り、Page Speed Insightsで測定しました。その後、WPロケットを有効化しして同じページを繰り返し測定してみました↓

17→99に爆上げした

Page Speed Insightsのスコアは0～100で表示されます。公式サイトによると80点以上が及第点という位置づけです。 Page Speed Insightsは測定のタイミングで数値が変動する傾向があるため、WPロケット導入前後に各10回測定しています。

データを見ての通り、WPロケットには高速化の効果がありました。

モバイルで一番悪いスコアは「16」です。WPロケットの効果で「99」まで高速化できたので、予想想以上というのが正直な感想です。

ちなみにJINやアフィンガー6といったSWELL以外の有料テーマでもWPロケットの効果を測定しました。SWELLにWPロケットプラグインを導入したさいと同じぐらい効果がありました。

SWELL以外のWordPressテーマにWPロケットを導入した効果の詳細は次の記事で詳しく解説しています。

SWELLとの相性は良さそう

試したかぎりWPロケットプラグインとSWELLの相性は良さそうです。

SWELL開発者さんはWPロケットがSWELLで使えるよう考慮してテーマを開発している趣旨のツイートをしていました。

WP Rocketとの相性を良くする、というのも目標の一つなので、ガチ高速化する時には必要になると思います！

ツイート

SWELLは高速化とCWV（Core Web Vitals）対策強化のため、専門家のスキルシェアさんと顧問契約しています。スキルシェアさんのサイトは「SWELL＋WPロケット」で運用しているので、今後もWPロケットはSWELLで使えるんだろうと推測できます。

SWELLとWPロケットプラグインの設定

SWELLでWPロケットプラグインを導入するさいの設定方法について解説します。

WPロケットの購入

WPロケットプラグインは有料プラグインです。

公式サイトでのみ販売しています。価格は45ドル、日本円で約5千円。オンライン決済で、購入後に即ダウンロードできます。

SWELLの高速化設定

まずはSWELL側の設定です。

SWELL本体には高速化設定のオプションが多々用意されていますが、基本全部使いません。テーマとプラグインで同じ機能が重複すると不具合が発生することがあるため、高速化はプラグインだけって考えです。この方法だと不具合があった場合に原因の切り分けがしやすいというメリットがあります。

WPロケットプラグインを使うことが前提の設定です。

キャッシュ機能

全部使いません。

強いていえばブログカード部分だけ高速化オプションを使ってもOKです。

その下の「ブログカードのキャッシュ期間」はデフォルト値のままでOKです。変更しても構いませんが、数日違っていても高速化に違いはでません。

遅延読み込み

キャシュ同様に一切使いません。

ファイルの読み込み

「SWELLのCSSをインラインで読み込む」にチェックを入れます。

ページ遷移高速化

使用しません。

Font Awesome

Font Awesomeアイコンを使っていない場合は読むこむだけ無駄です。SWELL設定内の「Font Awesome」タブから「読み込まない」を選択しましょう。

機能停止

「ページ表示時のアニメーション」を停止するにチェックを入れましょう。

WPロケットの高速化設定

続いてWPロケットプラグインの設定です。

検証したバージョン

Dashboard

何も変更する必要はありません。

My Status部分にRocket AnalyticsというオプションがありますがOFFのままにしておきましょう。このオプションを有効化するとサイト情報を匿名でWPロケットの開発会社に送信するようになります。

CACHE

CACHE（キャッシュ）の設定です。

「Enable cashing for mobile devices」をチェック。

その下の「Separate cache files for mobile deivces」にはチェックを入れません。PC向けとスマホ向けのキャッシュを分けるかどうかというオプションです。

User Cache（ユーザーキャッシュ）もチェック不要です。

会員サイトなど、ユーザーログインが必要なコンテンツ運営をしている場合のオプションです。ブログや一般的なコーポレートサイトであればこのオプションは不要です。

Cache Lifespan（キャッシュの有効期間）はデフォルト値でOKです。

File Optimization

File Optimization（ファイル最適化）では、サイトで読み込むCSSとJSの設定を行います。

CSS Filesでは以下のオプションを有効化します。

JavaScript Filesでは以下のオプションを有効化します。

Media

Media（メディア）の設定です。

LazyLoad（遅延読み込み）は以下にチェックを入れます。

Image Dimensions（画像サイズ）にもチェックを入れます。

このオプションを有効化すると「width」と「height」の設定のない画像に設定を付与してくれます。Core Web VitalのCumulative Layout Shift （CLS）対策に役立ちます。

Preload

Preload Cache（プリロード）では以下のオプションを有効化します。

Preload Links（プリロードリンク）では以下のオプションを有効化します。

その他

Advanced Rules～ToolsはノータッチでOKです。

以上でWPロケットプラグインの設定は完了です。

その他のプラグイン

SWELLとWPロケットで高速化設定を行う場合の注意点です。

高速化機能のあるプラグインは全て無効化しましょう。

高速化に関係のないプラグインはそのままでOKです。

プラグインは少ないほど望ましいです。高速化機能のあるプラグイン以外でも削減できるものがあればガシガシ停止ししましょう。

プラグインの種類によっては動作するさいにJSやCSSファイルを読み込むことになります。読み込むファイルが増えればページはスピードは遅くなります。

参考までに当サイトで有効化しているプラグインです↓

【重要】高速化設定後の動作確認

WPロケットの設定完了後はサイトの動作確認を行いましょう。

チェックポイント

PCとスホマでサイトにアクセスし、不具合が発生していないかを確認しましょう。WPロケットに限らず、高速化プラグインを導入するとiPhone、iPadなどのIOS端末でリンクが正常に動作しないといった不具合発生することがあります。PCだけでなくスマホ、できればiPhoneの実機でリンクをタップできるかを確認するのがおすすめです。

アナリティクスに関しては、自分でサイトにアクセスしリアルタイムユーザーの数値を確認するのが確実です。ログインユーザーをカウントしない設定にしている場合は、別ブラウザでてサイトを閲覧しリアルタイムユーザーの数値の変移をチェックしましょう。

SWELLが遅くなる原因

基本的なことですがSWELL単体でテキストだけのページを作った場合、有料テーマとは思えないぐらいページ読み込みは高速です。どれだけ適切に高速化の設定をしてもSWELLが遅くなるケースがあります。

SWELLが重くなる原因は、サイト設計や運用ミスだと思ってください。

SWELLが遅くなる原因

【遅い原因①】コンテンツ内のファイルがデカすぎる

コンテンツ内にファイルサイズの大きな静止画像、gifアニメーション、動画ファイルがあると表示に時間がかかります。

ユーザーに情報を伝えやすくするためにテキスト以外を使うのは全然OK。そのさいはファイルサイズが適切なかをチェックし、必要以上に大きいなと感じる場合はサイズを修正しましょう。

アップロード済みの画像を圧縮するプラグインもありますが、アップロード前の画像を最適化するのが一番確実です。プラグイン任せで自動圧縮をしてしまうと、圧縮率をコントロールできずに画質が劣化します。

【遅い原因②】SNSの埋め込み

コンテンツ内にファイルサイズの大きな静止画像、gifアニメーション、動画ファイルがあると表示に時間がかかります。

SNSをコンテンツ内に埋め込むと、ページを表示するたびに外部のサーバーにアクセスし情報を取得するといった読み込み通信が発生します。SWELLが高速であっても、外部サーバーの反応待ちとなるため、どうしもてページ読み込みスピードが遅くなります。

SNS

【遅い原因③】外部サイトからファイルを読み込んでいる

WebフォントやFont Awesome、jsファイルを外部サイトから読み込んでいる場合にページ読み込み速度は落ちます。デザイン性を高める意図であれば読み込むページだけで有効となるよう調整しましょう。

【遅い原因④】プラグインのCSS・JSファイルが多すぎる

WordPressのプラグインは無料で便利なものが多く、ついついインストールしてしまいがち。その結果、何に使っているか不明なプラグインが増えてしまう人もいるかと思います。

プラグインの入れすぎはページの読み込みスピードが遅くなる原因の一つです。プラグインを有効化すると、プラグインが動作していないページでもプラグインのJS・CSSファイルを読み込んでいます。有効化しているプラグインが本当に必要なものか精査し、できるだけプラグインを使わないサイト作りを心がけましょう。

【遅い原因⑤】サーバーが低スペック

レンタルサーバーのサーバースペックが低すぎるとサイトの表示スピードは遅くなります。

PSIで「最初のサーバー応答時間を速くしてください」と警告が出る場合はサーバーのスペックがボトルネックである可能性があります。共有サーバーを利用している場合、同じサーバーを共有しているユーザーの挙動によりサイトのレスポンスが悪くなることがあります。格安なレンタルサーバーだと起こりやすい問題で、ユーザーレベルでは解決することが出来ません。

ダッシュボードが重い場合の対処方法

ダッシュボードや記事の編集画面がモッサリと重くなってきた場合の対処方法についてです。

こんな場合の対処方法

【対処方法①】プラグインを停止する

ダッシュボードが遅い場合、有効化しているプラグインが原因の可能性があります。

個人的に以下のプラグインを有効化していると遅く感じることがあります。

プラグインを1つずつ停止しながら原因を特定するのが面倒な場合はQuery Monitorプラグインがおすすめです。このプラグインを使うとダッシュボードが遅くなっている原因をモニタリングできます。

【対処方法②】データベースのお掃除

データベースから不要なデータを削除しましょう。

WP-Optimizeプラグインが手軽でオススメです。

1点、注意点があります。WP-Optimizeプラグインはデータのお掃除作業以外にもキャッシュ系の機能がついていますが、気キャッシュ系の機能は使わないようにしましょう。実はSWELLフォーラムにこのプラグインを使っているユーザーさんから不具合の投稿がありました。データベースの掃除用に一時的に使う分には問題ありませんが、その他の機能は有効化しない点留意してください。

不安だと感じる場合は、似たような機能のプラグインを探して代用しましょう。

WP-Optimizeプラグインは利用後、必ず無効化しましょう。

【対処方法③】リビジョン管理

リビジョンは記事が保存される度に溜まっていく過去ログのようなデータです。頻繁に記事の保存をしていると、信じられなくらい溜まってしまうんですが、WordPressの標準機能では保存されるリビジョンに上限はありません。

リビジョンに上限を設定し必要以上保存されないよう管理をするなら、SWELL公式ページでも推奨しているWP Revisions Controlプラグインを使いましょう。

【対処方法④】使わないブロックを無効化する

ブロックエディターが重い場合の対処方法です。使わないブロックを無効化することで速度が改善します。

ブロックエディター右上に表示される「点」のアイコンをクリックし、「ブロックマネージャー」を選択します。使わないブロックをクリックし、チェックを外しましょう。

ブログ運営だと以下のブロックは無効化してもそれほど支障はありません。

利用頻度の少ないブロック例

FAQ

まとめ

WordPress有料テーマSWELLの高速化についてでした。

予算があればWPロケットプラグインの導入が効果が大きくおすすめな方法です。

ぜひお試しください！

公式 WordPress高速化プラグイン「WPロケット」