![](https://webrent.xsrv.jp/wp-content/uploads/2021/01/cat-question.png)
SWELLの表示スピードが遅い…
Google Speed Insightsのスコアが低い…
SWELLユーザーの人って、どんな設定をしているの?
そんな疑問に答えます。
WordPress有料テーマのSWELLは表示スピードが早いとネットで評判です。それでも、なぜかGoogle Speed Insightsでスコアが低いことってありますよね?ページの読み込みスピードはSEOに影響が出るのでなるべく改善したいところ。
でもどんな設定をすれば良いか分からない人も多いと思います。この記事では当サイトで行っているSWELLの高速化設定方法について全てお話します。
ちなみに当サイトの表示スピードは以下の通りモバイルが99、パソコンが100点です。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/11/psi-mobile-1024x591.gif)
![](https://webrent.xsrv.jp/wp-content/uploads/2021/11/psi-pc-1024x591.gif)
トップページには動画、高画質の画像、記事スライダーを使っています。ありえないぐらい早いですよね?
使っているプラグインとSWELLの高速化方法を知りたい人はぜひ最後までお読みください。
SWELLの表示スピードを高速化するならWPロケットプラグイン
![SWELLの表示スピードを高速化するならWPロケット](https://webrent.xsrv.jp/wp-content/uploads/2021/01/swell-thor-speed.jpg)
当ブログでは高速化のため、「WPロケット」という有料プラグインを使っています。
WordPressにはサイトを高速化するキャッシュ系プラグインや、遅延読み込み機能プラグインなど無料のものが結構あります。そういった無料とはちょっとレベルが違うのが有料プラグインです。
WPロケットは本気でサイトを爆速にしたい人や、少しでも検索順位を上げたい人といったガチ系ユーザー向けのプラグインです。
WPロケットって何だ?
![WPロケットプラグイン公式サイト](https://webrent.xsrv.jp/wp-content/uploads/2021/10/offical-1024x622.gif)
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回測定しています。
1回目 | 2 回目 | 3回目 | 4回目 | 5回目 | 6回目 | 7回目 | 8回目 | 9回目 | 10回目 | |
---|---|---|---|---|---|---|---|---|---|---|
パソコン | 100 | 100 | 100 | 100 | 100 | 100 | 100 | 100 | 100 | 100 |
モバイル | 99 | 99 | 99 | 99 | 99 | 99 | 99 | 100 | 100 | 99 |
データを見ての通り、WPロケットには高速化の効果がありました。
モバイルで一番悪いスコアは「16」です。WPロケットの効果で「99」まで高速化できたので、予想想以上というのが正直な感想です。
ちなみにJINやアフィンガー6といったSWELL以外の有料テーマでもWPロケットの効果を測定しました。SWELLにWPロケットプラグインを導入したさいと同じぐらい効果がありました。
SWELL以外のWordPressテーマにWPロケットを導入した効果の詳細は次の記事で詳しく解説しています。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/01/themes-speed-300x169.jpg)
SWELLとの相性は良さそう
試したかぎりWPロケットプラグインとSWELLの相性は良さそうです。
SWELL開発者さんはWPロケットがSWELLで使えるよう考慮してテーマを開発している趣旨のツイートをしていました。
WP Rocketとの相性を良くする、というのも目標の一つなので、ガチ高速化する時には必要になると思います!
ツイート
SWELLは高速化とCWV(Core Web Vitals)対策強化のため、専門家のスキルシェアさんと顧問契約しています。スキルシェアさんのサイトは「SWELL+WPロケット」で運用しているので、今後もWPロケットはSWELLで使えるんだろうと推測できます。
- SWELL公式情報:高速化のプロ、「スキルシェア」さんと顧問契約を締結しました
SWELLとWPロケットプラグインの設定
![SWELLとWPロケットプラグインの設定](https://webrent.xsrv.jp/wp-content/uploads/2021/04/swell-lp-design.jpg)
SWELLでWPロケットプラグインを導入するさいの設定方法について解説します。
- WPロケットの購入
- SWELLの高速化設定
- WPロケットプラグインの設定
- その他のプラグインの設定
WPロケットの購入
WPロケットプラグインは有料プラグインです。
公式サイトでのみ販売しています。価格は45ドル、日本円で約5千円。オンライン決済で、購入後に即ダウンロードできます。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/01/themes-speed-300x169.jpg)
SWELLの高速化設定
まずはSWELL側の設定です。
SWELL本体には高速化設定のオプションが多々用意されていますが、基本全部使いません。テーマとプラグインで同じ機能が重複すると不具合が発生することがあるため、高速化はプラグインだけって考えです。この方法だと不具合があった場合に原因の切り分けがしやすいというメリットがあります。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
一応SWELL設定部分の画面をシェアします。
キャッシュ機能
全部使いません。
![SWELLの設定(キャッシュ部分)](https://webrent.xsrv.jp/wp-content/uploads/2021/11/swell-cache-1024x690.gif)
強いていえばブログカード部分だけ高速化オプションを使ってもOKです。
- 内部リンクのブログカードをキャッシュする
- 外部リンクのブログカードをキャッシュする
その下の「ブログカードのキャッシュ期間」はデフォルト値のままでOKです。変更しても構いませんが、数日違っていても高速化に違いはでません。
遅延読み込み
![SWELL設定(遅延読み込み部分)](https://webrent.xsrv.jp/wp-content/uploads/2021/11/swell-delay-1024x396.gif)
キャシュ同様に一切使いません。
ファイルの読み込み
![SWELL設定(ファイルの読み込み部分)](https://webrent.xsrv.jp/wp-content/uploads/2021/11/load-css-1024x142.gif)
「SWELLのCSSをインラインで読み込む」にチェックを入れます。
ページ遷移高速化
![ページ遷移高速化](https://webrent.xsrv.jp/wp-content/uploads/2021/11/swell-pre-1024x621.gif)
使用しません。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
高速化タブの設定は以上で終了です。
Font Awesome
![SWELL設定(font Awesome部分)](https://webrent.xsrv.jp/wp-content/uploads/2021/11/swell-font-1024x242.gif)
Font Awesomeアイコンを使っていない場合は読むこむだけ無駄です。SWELL設定内の「Font Awesome」タブから「読み込まない」を選択しましょう。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
ちなみに僕はデザイン重視でFont Awesomeを使う派なので「CSSで読み込む」を選んでいます。
機能停止
![SWELL設定(機能停止部分)](https://webrent.xsrv.jp/wp-content/uploads/2021/11/swell-stop-animation-1024x430.gif)
「ページ表示時のアニメーション」を停止するにチェックを入れましょう。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
高速化の設定という位置づけではなく、単に高速化に不要そうな機能は削ぎ落とすといったイメージです。
WPロケットの高速化設定
![WPロケットプラグイン公式サイト](https://webrent.xsrv.jp/wp-content/uploads/2021/10/offical-1024x622.gif)
続いてWPロケットプラグインの設定です。
検証したバージョン
- WPロケット:3.10.2
Dashboard
![WPロケットダッシュボード](https://webrent.xsrv.jp/wp-content/uploads/2021/11/wp-rocket-mystatus-1024x625.gif)
何も変更する必要はありません。
My Status部分にRocket AnalyticsというオプションがありますがOFFのままにしておきましょう。このオプションを有効化するとサイト情報を匿名でWPロケットの開発会社に送信するようになります。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
開発に役立つ情報かもしれませんが、できるだけ自分のサイトの負荷を無くすよう努めましょう。
CACHE
![WPロケットのキャッシュの設定](https://webrent.xsrv.jp/wp-content/uploads/2021/11/cache-1024x367.gif)
CACHE(キャッシュ)の設定です。
「Enable cashing for mobile devices」をチェック。
その下の「Separate cache files for mobile deivces」にはチェックを入れません。PC向けとスマホ向けのキャッシュを分けるかどうかというオプションです。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
SWELLの場合はチェックは不要です。
User Cache(ユーザーキャッシュ)もチェック不要です。
会員サイトなど、ユーザーログインが必要なコンテンツ運営をしている場合のオプションです。ブログや一般的なコーポレートサイトであればこのオプションは不要です。
Cache Lifespan(キャッシュの有効期間)はデフォルト値でOKです。
File Optimization
![WPロケットCSSの設定](https://webrent.xsrv.jp/wp-content/uploads/2021/11/css-1024x869.gif)
File Optimization(ファイル最適化)では、サイトで読み込むCSSとJSの設定を行います。
CSS Filesでは以下のオプションを有効化します。
- Minify CSS files
- Combine CSS files (Enable Minify CSS files to select)
- Optimize CSS delivery
JavaScript Filesでは以下のオプションを有効化します。
![JSの設定](https://webrent.xsrv.jp/wp-content/uploads/2021/11/js-755x1024.gif)
- Minify JavaScript files
- Load JavaScript deferred
- Delay JavaScript execution
Media
![WPロケットメディアの設定](https://webrent.xsrv.jp/wp-content/uploads/2021/11/media-1024x726.gif)
Media(メディア)の設定です。
LazyLoad(遅延読み込み)は以下にチェックを入れます。
- Enable for images
- Enable for iframes and videos
- Replace YouTube iframe with preview image
Image Dimensions(画像サイズ)にもチェックを入れます。
- Add missing images dimenstions
このオプションを有効化すると「width」と「height」の設定のない画像に設定を付与してくれます。Core Web VitalのCumulative Layout Shift (CLS)対策に役立ちます。
Preload
![Preloadの設定オプション](https://webrent.xsrv.jp/wp-content/uploads/2021/11/preload-1024x510.gif)
Preload Cache(プリロード)では以下のオプションを有効化します。
- Activate Preloading
Preload Links(プリロードリンク)では以下のオプションを有効化します。
- Enable link preloading
その他
Advanced Rules~ToolsはノータッチでOKです。
以上でWPロケットプラグインの設定は完了です。
その他のプラグイン
SWELLとWPロケットで高速化設定を行う場合の注意点です。
高速化機能のあるプラグインは全て無効化しましょう。
高速化に関係のないプラグインはそのままでOKです。
プラグインは少ないほど望ましいです。高速化機能のあるプラグイン以外でも削減できるものがあればガシガシ停止ししましょう。
プラグインの種類によっては動作するさいにJSやCSSファイルを読み込むことになります。読み込むファイルが増えればページはスピードは遅くなります。
参考までに当サイトで有効化しているプラグインです↓
- Blocks Animation: CSS Animations for Gutenberg Blocks
- Disable Right Click For WP
- Highlighting Code Block
- SEO SIMPLE PACK
- Useful Blocks
- Useful Blocks Pro-Addon
- Wordfence Security
- WP Multibyte Patch
- WP Revisions Control
- WP Rocket
- WPForms Lite
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
高速化機能のあるプラグインはWPロケットプラグインだけに絞っています。
【重要】高速化設定後の動作確認
WPロケットの設定完了後はサイトの動作確認を行いましょう。
チェックポイント
- サイトの表示がおかしくなっていないか?
- スマホでリンク要素がタップできるか?
- アナリティクスで記録がとれているか?
PCとスホマでサイトにアクセスし、不具合が発生していないかを確認しましょう。WPロケットに限らず、高速化プラグインを導入するとiPhone、iPadなどのIOS端末でリンクが正常に動作しないといった不具合発生することがあります。PCだけでなくスマホ、できればiPhoneの実機でリンクをタップできるかを確認するのがおすすめです。
アナリティクスに関しては、自分でサイトにアクセスしリアルタイムユーザーの数値を確認するのが確実です。ログインユーザーをカウントしない設定にしている場合は、別ブラウザでてサイトを閲覧しリアルタイムユーザーの数値の変移をチェックしましょう。
SWELLが遅くなる原因
![SWELLが遅くなる原因](https://webrent.xsrv.jp/wp-content/uploads/2021/02/sango-swell-compare-1024x619.jpg)
基本的なことですがSWELL単体でテキストだけのページを作った場合、有料テーマとは思えないぐらいページ読み込みは高速です。どれだけ適切に高速化の設定をしてもSWELLが遅くなるケースがあります。
SWELLが重くなる原因は、サイト設計や運用ミスだと思ってください。
SWELLが遅くなる原因
- コンテンツ内のファイルがデカすぎる
- SNSの埋め込み
- 外部サイトからファイルを読み込んでいる
- プラグインのCSS・JSファイルが多すぎる
- サーバーが低スペック
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
それぞれを解説します。
【遅い原因①】コンテンツ内のファイルがデカすぎる
コンテンツ内にファイルサイズの大きな静止画像、gifアニメーション、動画ファイルがあると表示に時間がかかります。
ユーザーに情報を伝えやすくするためにテキスト以外を使うのは全然OK。そのさいはファイルサイズが適切なかをチェックし、必要以上に大きいなと感じる場合はサイズを修正しましょう。
アップロード済みの画像を圧縮するプラグインもありますが、アップロード前の画像を最適化するのが一番確実です。プラグイン任せで自動圧縮をしてしまうと、圧縮率をコントロールできずに画質が劣化します。
【遅い原因②】SNSの埋め込み
コンテンツ内にファイルサイズの大きな静止画像、gifアニメーション、動画ファイルがあると表示に時間がかかります。
SNSをコンテンツ内に埋め込むと、ページを表示するたびに外部のサーバーにアクセスし情報を取得するといった読み込み通信が発生します。SWELLが高速であっても、外部サーバーの反応待ちとなるため、どうしもてページ読み込みスピードが遅くなります。
SNS
- YouTube
- インスタグラム
【遅い原因③】外部サイトからファイルを読み込んでいる
WebフォントやFont Awesome、jsファイルを外部サイトから読み込んでいる場合にページ読み込み速度は落ちます。デザイン性を高める意図であれば読み込むページだけで有効となるよう調整しましょう。
【遅い原因④】プラグインのCSS・JSファイルが多すぎる
WordPressのプラグインは無料で便利なものが多く、ついついインストールしてしまいがち。その結果、何に使っているか不明なプラグインが増えてしまう人もいるかと思います。
プラグインの入れすぎはページの読み込みスピードが遅くなる原因の一つです。プラグインを有効化すると、プラグインが動作していないページでもプラグインのJS・CSSファイルを読み込んでいます。有効化しているプラグインが本当に必要なものか精査し、できるだけプラグインを使わないサイト作りを心がけましょう。
【遅い原因⑤】サーバーが低スペック
レンタルサーバーのサーバースペックが低すぎるとサイトの表示スピードは遅くなります。
PSIで「最初のサーバー応答時間を速くしてください」と警告が出る場合はサーバーのスペックがボトルネックである可能性があります。共有サーバーを利用している場合、同じサーバーを共有しているユーザーの挙動によりサイトのレスポンスが悪くなることがあります。格安なレンタルサーバーだと起こりやすい問題で、ユーザーレベルでは解決することが出来ません。
ダッシュボードが重い場合の対処方法
![ダッシュボードが重い場合の対処方法](https://webrent.xsrv.jp/wp-content/uploads/2021/03/swell-diver.png)
ダッシュボードや記事の編集画面がモッサリと重くなってきた場合の対処方法についてです。
こんな場合の対処方法
- ダッシュボードがやたら重い
- ボタンのレスポンスが遅い
- 保存にやたら時間がかかる
【対処方法①】プラグインを停止する
ダッシュボードが遅い場合、有効化しているプラグインが原因の可能性があります。
個人的に以下のプラグインを有効化していると遅く感じることがあります。
- Jetpack
- Broken Link Checker
- Google Analytics
- W3 Total Cache
- Query Monitor
- Wordfence
プラグインを1つずつ停止しながら原因を特定するのが面倒な場合はQuery Monitorプラグインがおすすめです。このプラグインを使うとダッシュボードが遅くなっている原因をモニタリングできます。
【対処方法②】データベースのお掃除
データベースから不要なデータを削除しましょう。
WP-Optimizeプラグインが手軽でオススメです。
1点、注意点があります。WP-Optimizeプラグインはデータのお掃除作業以外にもキャッシュ系の機能がついていますが、気キャッシュ系の機能は使わないようにしましょう。実はSWELLフォーラムにこのプラグインを使っているユーザーさんから不具合の投稿がありました。データベースの掃除用に一時的に使う分には問題ありませんが、その他の機能は有効化しない点留意してください。
不安だと感じる場合は、似たような機能のプラグインを探して代用しましょう。
【対処方法③】リビジョン管理
リビジョンは記事が保存される度に溜まっていく過去ログのようなデータです。頻繁に記事の保存をしていると、信じられなくらい溜まってしまうんですが、WordPressの標準機能では保存されるリビジョンに上限はありません。
リビジョンに上限を設定し必要以上保存されないよう管理をするなら、SWELL公式ページでも推奨しているWP Revisions Controlプラグインを使いましょう。
【対処方法④】使わないブロックを無効化する
ブロックエディターが重い場合の対処方法です。使わないブロックを無効化することで速度が改善します。
ブロックエディター右上に表示される「点」のアイコンをクリックし、「ブロックマネージャー」を選択します。使わないブロックをクリックし、チェックを外しましょう。
ブログ運営だと以下のブロックは無効化してもそれほど支障はありません。
利用頻度の少ないブロック例
- アーカイブ
- カレンダー
- カテゴリー
- 最新のコメント
- RSS
- 検索
- ソーシャルアイコン
- タグクラウド
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
自分の用途にあったブロックのみ有効化した状態で、エディターのレスポンスを確認してください。
FAQ
![FAQ](https://webrent.xsrv.jp/wp-content/uploads/2021/04/graph-plugin-Visualizer.jpg)
WP Rocketプラグインを購入前に無料でテストしたい。
テスト目的のバージョンは配布していませんが、返金保証システムが付いています。
以下、WP Rocketプラグイン公式ページからの引用です。
100% の返金保証
引用元:WP Rocket公式サイト
このような事態は望まれないと思いますが、ご購入後14日以内にお申し出があれば、喜んで返金いたします
WP Rocketプラグインを安く買いたい。セルフバック的なシステムはないの?
セルフバック的なシステムはありません。割と頻繁にセールで安く販売していることがあります。セールの情報は公式サイトで確認できます。
まとめ
WordPress有料テーマSWELLの高速化についてでした。
予算があればWPロケットプラグインの導入が効果が大きくおすすめな方法です。
ぜひお試しください!