「Swellは速いって聞いたのに、PageSpeedスコアが低いんです…」
こうしたご相談をいただくことがあります。
正直に言うと、Swellはテーマ自体の速度性能は優秀です。しかし、設定やプラグイン次第で速度は大きく変わります。せっかくの高速テーマも、間違った設定をしていれば宝の持ち腐れです。
この記事では、Swellの表示速度を最大化するための設定を、私が実際に行っている手順で解説します。
なぜ表示速度が重要なのか
ビジネスへの直接的な影響
表示速度は、単なる「技術的な数字」ではありません。ビジネスの成果に直結します。
| 表示速度 | 離脱率への影響 |
|---|---|
| 1〜3秒 | 離脱率 32% 増加 |
| 1〜5秒 | 離脱率 90% 増加 |
| 1〜6秒 | 離脱率 106% 増加 |
| 1〜10秒 | 離脱率 123% 増加 |
（出典：Google/SOASTA Research, 2017）
つまり、表示に5秒かかるサイトは、訪問者の約半数がページを見る前に離脱してしまいます。
GoogleのSEO評価にも影響
2021年以降、GoogleはCore Web Vitals（コアウェブバイタル）をランキング要因に含めています。Core Web Vitalsは以下の3指標で構成されます。
| 指標 | 意味 | 良好な数値 |
|---|---|---|
| LCP（Largest Contentful Paint） | メインコンテンツの表示完了時間 | 2.5秒以内 |
| INP（Interaction to Next Paint） | ユーザー操作への応答速度 | 200ミリ秒以内 |
| CLS（Cumulative Layout Shift） | レイアウトのずれ | 0.1以下 |
Swellは、これらの指標を最適化するための機能を備えていますが、正しく設定する必要があります。
Swellの高速化設定 ── テーマ側でできること
SWELL設定の「高速化」タブ
WordPress管理画面の「SWELL設定」→「高速化」タブに、速度に関する重要な設定がまとまっています。
■ キャッシュ機能
| 設定項目 | 推奨設定 |
|---|---|
| 動的なCSSをキャッシュする | ON |
| ヘッダーをキャッシュする | ON |
| サイドバーをキャッシュする | ON |
| 下部固定ボタン等をキャッシュする | ON |
| ブログカード等をキャッシュする | ON |
これらは全部ONにしてOKです。サイト更新後に表示がおかしいと感じたら、「キャッシュクリア」ボタンで解消できます。
■ ファイルの読み込み
| 設定項目 | 推奨設定 |
|---|---|
| SWELLのCSSをインラインで読み込む | ON |
| コンテンツに合わせて必要なCSSだけ読み込む | ON |
■ 遅延読み込み機能
| 設定項目 | 推奨設定 |
|---|---|
| 記事下コンテンツを遅延読み込みする | ON |
| フッターを遅延読み込みする | ON |
| 画像等のLazyload | ON（loading=”lazy”を使用） |
| スクリプトの遅延読み込み | ON |
■ ページ遷移高速化
「高速化の種類」を3つの選択肢から選ぶ形式になっています。
| 選択肢 | 推奨 |
|---|---|
| 使用しない | × |
| Prefetch | ◎（推奨） |
| Pjaxによる遷移（非推奨） | × |
結論として、「Prefetch」を選択するのが安全です。リンクをホバーしたとき（または画面内に入ったとき）に、そのリンク先ページを先読みしておく仕組みで、クリック後の表示が体感的に速くなります。プラグインとの相性問題もほぼなく、副作用が少ないのが特徴です。
一方のPjaxは、SWELL公式も「非推奨」と明記しています。ページ遷移は高速になるものの、プラグイン・広告タグ・アクセス解析が正しく動作しないケースがあり、トラブルの原因になりがちです。導入は避けるのが無難です。
なお、この機能はあくまで「次のページへの移動」を速くするもので、最初に開くページ（ファーストビュー）の読み込み速度は変わらない点に留意してください。
フォントの設定を見直す
意外と見落としがちなのがフォント設定です。
「カスタマイザー」→「サイト全体設定」→「基本デザイン」→「フォント設定」で確認します。
| フォント | 速度への影響 |
|---|---|
| 游ゴシック | ◎（システムフォント、読み込み不要） |
| ヒラギノゴシック | ◎（システムフォント、読み込み不要） |
| Noto Sans JP | △（Googleフォント、外部読み込みが発生） |
Google Fonts（Noto Sans JPなど）を使うと、外部からフォントファイルを読み込む分だけ遅くなります。速度を最優先にするなら、システムフォント（游ゴシックまたはヒラギノゴシック）がおすすめです。
ただし、デザインの統一感を重視する場合はNoto Sans JPの採用も合理的です。速度とデザインのバランスで判断してください。
画像の最適化 ── 速度改善の最大のカギ
なぜ画像が最も重要なのか
正直に言うと、サイトの表示速度を遅くしている原因の8割は画像です。
とくに多いのが、以下のようなケースです。
- デジカメやスマホで撮影した5MB以上の写真をそのままアップロード
- 幅4000pxの画像を、表示サイズ800pxの箇所に使用
- PNG形式のまま写真を掲載（JPEGの3〜5倍のファイルサイズ）
画像最適化の3つのステップ
ステップ1: アップロード前にリサイズする
ブログ記事の画像なら横幅1200pxあれば十分です。トップページのメインビジュアルでも横幅1920pxで十分。
リサイズには以下のツールが便利です。
- Squoosh（Googleが提供する無料ツール） ── https://squoosh.app/
- TinyPNG ── https://tinypng.com/
ステップ2: WebP形式に変換する
WebP（ウェッピー）は、Googleが開発した次世代画像フォーマットです。JPEGと比べて25〜35%ファイルサイズが小さくなります。
SwellはWebPの表示に対応しています。メディアライブラリにWebP画像をアップロードすれば、そのまま使用できます。
プラグイン「EWWW Image Optimizer」を使えば、アップロード時に自動でWebPに変換することも可能です。
ステップ3: 適切なサイズの画像を使い分ける
WordPressは、画像をアップロードすると複数のサイズ（サムネイル、中、大）を自動生成します。Swellはこの機能を活用し、表示場所に応じて最適なサイズの画像を出力します。
「設定」→「メディア」で、以下のサイズ設定を確認しておきましょう。
| サイズ | 推奨値 |
|---|---|
| サムネイル | 300×300 |
| 中サイズ | 600×0（高さは自動） |
| 大サイズ | 1200×0（高さは自動） |
プラグインの見直し ── 不要なプラグインが速度を落とす
プラグイン数と速度の関係
「プラグインをたくさん入れると遅くなる」という話を聞いたことがあるかもしれません。
正確に言うと、プラグインの「数」よりも「質」が問題です。10個入れても軽いプラグインばかりなら問題ありませんし、1つでも重いプラグインがあれば大幅に遅くなります。
Swellで避けるべきプラグイン
以下のプラグインは、Swellとの組み合わせで速度低下や不具合の原因になりやすいです。
| プラグイン | 避ける理由 |
|---|---|
| Elementor / Beaver Builder | Swellのブロックエディタと機能が重複。大量のCSS/JSを読み込む |
| Yoast SEO / All in One SEO | SEO SIMPLE PACKと機能が重複。Swellとの相性問題 |
| Jetpack | 多機能すぎて重い。使わない機能まで読み込まれる |
| WPBakery Page Builder | 旧式のページビルダー。大量の不要コードを生成 |
| Slider Revolution | リッチなスライダーだが非常に重い |
推奨プラグイン構成（速度重視）
コーポレートサイトで必要最小限のプラグイン構成は以下の通りです。
| プラグイン | 用途 |
|---|---|
| SEO SIMPLE PACK | SEO設定 |
| Contact Form 7 | お問い合わせフォーム |
| UpdraftPlus | バックアップ |
| Wordfence Security | セキュリティ |
| EWWW Image Optimizer | 画像最適化 |
制作者の本音として、プラグインは5〜8個に抑えるのが理想です。「あったら便利」レベルのプラグインは、速度とトレードオフであることを意識してください。
サーバー選び ── すべての基盤
サーバーが遅ければ何をしても遅い
テーマやプラグインの最適化をどれだけ頑張っても、サーバーが遅ければ根本的に速くなりません。
WordPressの表示速度は、大きく分けて以下の2つで決まります。
- サーバーの応答時間（TTFB：最初の1バイトが届くまでの時間）
- フロントエンドの描画時間（HTML/CSS/JS/画像の読み込みと表示）
いくらフロントエンドを最適化しても、TTFBが1秒以上かかるサーバーでは、PageSpeedスコアは上がりません。
おすすめのレンタルサーバー
Swellと相性が良く、速度面で評価の高いレンタルサーバーをまとめます。
| サーバー | 月額費用 | 速度評価 | 特徴 |
|---|---|---|---|
| 国内シェアNo.1の高速サーバー | 990円〜 | ◎ | 国内シェアNo.1、安定性が高い |
| 国内最速クラスの高速サーバー | 1,452円〜 | ◎ | 国内最速クラス、管理画面が使いやすい |
| コスパ重視のレンタルサーバー | 550円〜 | ○ | コスパが高い、LiteSpeedサーバー |
| 老舗レンタルサーバー | 500円〜 | ○ | 老舗、安定性重視 |
私が中小企業のお客様におすすめするのは、国内シェア上位の高速レンタルサーバーです。月額1,000円前後で、十分な速度が得られます。
正直に言うと、月額300円以下の格安サーバーでWordPressを運用するのはおすすめしません。表示速度だけでなく、セキュリティやサポート面でも差が出ます。
PageSpeedスコアの確認と改善の進め方
PageSpeed Insightsの使い方
Google PageSpeed Insights（https://pagespeed.web.dev/）にアクセスし、サイトのURLを入力するだけで、速度スコアとの改善提案が表示されます。
スコアの目安：T
| スコア | 評価 |
|---|---|
| 90〜100 | 良好（緑） |
| 50〜89 | 改善が必要（オレンジ） |
| 0〜49 | 不良（赤） |
スコアが低い場合の優先対応
PageSpeedスコアが低い場合、以下の優先順位で対応します。
- 画像の最適化（最も効果が大きい）
- 不要なプラグインの削除
- Swell高速化設定の確認
- サーバーの変更検討
- 外部スクリプト（アナリティクス、広告等）の遅延読み込み
スコア100を目指す必要はありません。モバイルで70以上、PCで90以上あれば、実用上は十分です。Googleアナリティクスや広告タグを入れると、どうしてもスコアは下がります。大切なのは実際のユーザー体験です。
まとめ ── Swell高速化チェックリスト
Swellの表示速度を最大化するためのチェックリストです。
□ SWELL設定の「高速化」タブを全項目設定
□ フォント設定をシステムフォントに変更（速度重視の場合）
□ 画像を1200px以下にリサイズしてからアップロード
□ WebP形式を活用
□ 不要なプラグインを削除（5〜8個に抑える）
□ Swellと相性の悪いプラグインを避ける
□ 高速なレンタルサーバーを使用
□ PageSpeed Insightsでスコアを定期確認
これらをすべて実施すれば、Swellの本来の速度性能を最大限に引き出せます。
「表示速度の改善を自分でやるのは難しい」「PageSpeedスコアを上げたい」という方は、お気軽にご相談ください。サイトの現状を診断し、具体的な改善策をご提案します。
