PR

SWELLの高速化設定を解説!表示速度を上げる5つのコツ

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

未経験者が「なぜブログで10万稼げたのか?」その秘密を暴露します。 「今年こそは絶対稼ぎたい!」という人は今すぐご覧ください。


あっさり10万稼ぐためのメルマガ

 

 

それでは始めます。

 

SWELLにテーマを変えたのに、思ったほど表示速度が速くならず「こんなはずじゃ…」と感じていないでしょうか。

この記事では、SWELLの高速化設定を、初心者の方でも迷わず触れるように整理してお届けします。

この記事で分かること

  • SWELL設定の「高速化」タブで何ができるのか
  • キャッシュ・遅延読み込み・ファイル読み込みのおすすめ設定
  • トラブルを避けるためのチェックポイントと確認方法

先に結論を言うと、「なんとなく全部オン」にするのではなく、自分のサイトに合った高速化設定だけを選んで組み合わせるのが一番安全で、結果的に速くなりやすいです。

 

  ブログ収益化の教科書プレゼント

↓ ↓ ↓

ba15a

 

SWELL設定で高速化すると何が変わる?

ごとう
ごとう

ここでは、SWELLの高速化設定を見直すと何がどう変わるのか、全体像をざっくりイメージできるようにしておきます。ページの表示速度は、検索結果や滞在時間、成約率など、ブログ運営のあらゆる数字に影響します。難しい理屈はひとまず置いておいて、「どのくらい改善を狙えるのか」を先に掴んでおきましょう。

SWELLテーマは「設定次第」でまだまだ速くなる

SWELLはもともと表示速度に配慮されたテーマですが、初期状態のままだとポテンシャルを活かしきれていないケースがよくあります。

私も、高速化タブを理解しないまま放置していて、後からしっかり設定したら「もっと早くやればよかった…」と感じたタイプです。

ざっくり、設定前と設定後の違いは次のようなイメージです。

項目 設定前のよくある状態 高速化設定を整えた後
ファーストビューの表示 白い画面が続き、読者を少し待たせてしまう ぱっと記事が出てきて、ストレスが少ない
画像の読み込み スクロールのたびに一瞬カクッと止まる スッと画像が現れて、流れが途切れにくい
スマホでの離脱率 読み込み中に戻るボタンを押されがち 最初の数秒で離脱されにくくなる
運営側の管理 どこを触ればいいか分からず手を付けにくい SWELLと少数のプラグインだけで管理しやすい

大事なのは、「全部にチェックを入れる=正解」ではないということです。

SWELLの高速化設定の中から、自分のブログに合うものだけを選んでいくイメージで進めていきましょう。

SWELL高速化設定の4つの柱をざっくり掴む

SWELLの高速化タブには、次の4つのブロックがあります。

  • キャッシュ機能
  • 遅延読み込み機能
  • ファイルの読み込み
  • ページ遷移高速化(Prefetch/Pjax)

このうち、多くのサイトで特に効果が出やすいのは「キャッシュ」「遅延読み込み」「ファイルの読み込み」の3つです。

一方で、「ページ遷移高速化」は、内部リンクの移動が速くなる反面、プラグインや広告との相性問題が出やすいので、慎重に使いたい少し上級者向けの機能と考えておくと安心です。

SWELL設定「高速化」タブを開く前の準備

ごとう
ごとう

ここから具体的な操作に入りますが、その前に少しだけ準備をしておくと、トラブルが起きたときに戻しやすくなります。一度にすべてを変えるのではなく、落ち着いて一つずつ進めていきましょう。

管理画面から高速化タブを開く手順

まずは、WordPressの管理画面からSWELLの高速化タブを開きます。

  • WordPress管理画面にログインする
  • 左メニューの「SWELL設定」をクリックする
  • 上部タブの中から「高速化」を選ぶ

<pこの画面に、これから触っていく高速化関連の項目がまとまっています。

変更前の状態を残しておきたい場合は、スマホで画面を撮影しておくと、後から「どこを変したか分からない」となった時の保険になります。

高速化前にチェックしておきたいサイト環境

高速化タブを触る前に、最低限次のような点を確認しておくと安心です。

  • キャッシュ系や高速化系のプラグインを複数入れていないか
  • すでにAutoptimizeなどの最適化プラグインを使っていないか
  • 契約しているレンタルサーバーのプランが極端に低スペックではないか
  • 画像圧縮プラグインやCDNなど、別の高速化施策をどこまで使っているか

すでに強力な高速化プラグインを使っている場合は、いったんそちらの機能を弱めてから、SWELL側の設定をメインにしていく方が管理しやすくなることが多いです。

キャッシュ機能のSWELL設定で高速化する

ごとう
ごとう

ここからは、SWELLの高速化タブの中身を一つずつ見ていきます。まずは効果が大きく、比較的トラブルも少ない「キャッシュ機能」から整えていきましょう。

キャッシュ機能の項目とおすすめ設定

キャッシュとは、一度作ったデータを保存しておき、次回以降の表示を素早くする仕組みです。

SWELLでは、ヘッダーやサイドバー、ブログカードなど、よく使うパーツごとにキャッシュのオン・オフを選べます。

代表的な項目と、基本の考え方は次のとおりです。

キャッシュ項目の例 おすすめ度 コメント
動的なCSSをキャッシュする ほとんどのサイトでオン推奨、表示の軽量化に直結する
ヘッダー・サイドバーをキャッシュする メニュー構成が固まっているならオンにして問題ないことが多い
ブログカードをキャッシュする 内部リンクが多いサイトほど効果大、外部リンクのキャッシュ期間も調整可能
トップページコンテンツをキャッシュする トップページを頻繁に作り変えないならオンにする価値が高い

基本的には、「特別なカスタマイズをしていなければ、キャッシュ項目はほぼ全部オン」で問題ないことが多いです。

ただし、デザイン調整の最中やプラグインを入れ替えている時期は、あえて一部をオフにしておくと作業しやすくなります。

キャッシュ関連で起こりやすいトラブルと対処法

キャッシュ機能は便利な一方で、「編集したのに反映されない」という相談が多い部分でもあります。

よくあるパターンと対処の流れをまとめておきます。

  • 色やレイアウトを変えたのに表示が変わらない場合は、SWELLのキャッシュ削除ボタンで一度キャッシュをクリアする
  • プラグインを入れ替えたあとに表示がおかしくなったら、いったんキャッシュ項目をオフにして、問題の有無を確認する
  • 特定のページだけ古い情報が残っている場合は、そのページを更新し直したり、ブログカードのキャッシュ管理画面からリセットする

「画面がおかしいな」と思ったら、まずキャッシュを疑うクセを付けておくと、原因にたどり着くのが早くなります。

遅延読み込み機能で画像・スクリプトを軽くする設定

ごとう
ごとう

次は、体感の速さに大きく影響する「遅延読み込み機能」を見ていきます。特に画像が多いブログでは、この部分の設定を整えるだけでかなり読みやすくなります。

画像・コンテンツを遅延読み込みするメリット

遅延読み込みとは、画面に表示されていない部分の読み込みを後回しにして、目に見える範囲を優先して表示する仕組みです。

全部まとめて読み込むのではなく、「必要になったタイミングで読み込む」イメージですね。

SWELLの遅延読み込みで、まず押さえておきたい項目は次の3つです。

遅延対象 基本設定の目安 ポイント
記事下コンテンツ オン推奨 読み終えるころに表示される場所なので、遅延しても違和感が少ない
フッター オン推奨 ウィジェットや画像が多いほど、遅延の効果が出やすい
画像のLazyload オン推奨 スクリプト方式かブラウザ標準かを選べるが、まずは推奨設定でOK

画像やフッターなど、「少し遅れて表示されても困らない部分」から遅延させていくと、違和感を出さずに高速化しやすくなります。

「使用していないJavaScript」警告を減らすコツ

PageSpeed Insightsで計測すると、「使用していないJavaScriptを削減してください」といったメッセージが出ることがあります。

SWELLの遅延読み込み機能やスクリプトの設定を使うことで、こうした警告をある程度やわらげることが可能です。

 

 

 

【稼げるキーワード教えます】
▼  ▼  ▼
ba15a

 

 

 

とはいえ、むやみに全部遅延させると、逆にフォームや計測ツールが動かなくなる危険もあります。

  • まずは記事下コンテンツやフッターなど、後から読まれる部分だけを遅延対象にする
  • 問い合わせフォーム、チャットウィジェット、アクセス解析タグなどは、いきなり遅延対象にしない
  • 設定後は必ずフォーム送信や広告クリックが正常に動くかテストする

「少しずつ試す」「重要な機能ほど慎重に」が、遅延読み込み設定と付き合うときのポイントです。

ファイルの読み込み設定でCSS・JSを最適化

ごとう
ごとう

続いて、「ファイルの読み込み」のブロックです。ここでは、CSSやJavaScriptの読み込み方を工夫して、速さと安定表示のバランスを取っていきます。

SWELLのCSSをインライン化するかどうか

SWELLの高速化タブには、「SWELLのCSSをインラインで読み込む」「コンテンツに合わせて必要なCSSだけを読み込む」といった項目があります。

名前だけ聞くと難しそうですが、ざっくり次のようなイメージで捉えれば大丈夫です。

設定項目 オンにした場合のメリット 気をつけたいポイント
SWELLのCSSをインラインで読み込む 外部ファイルの読み込みが減り、初期表示が速くなりやすい HTMLのサイズが増えすぎると、環境によっては逆効果になることもある
コンテンツに合わせて必要なCSSだけを読み込む そのページで使わないCSSを極力カットできる 一部のカスタムCSSやプラグインのスタイルが効かなくなる可能性がある

多くのサイトでは、まず「コンテンツに合わせて必要なCSSだけを読み込む」をオンにして様子を見るのがおすすめです。

そのうえで、スコアや体感速度を見ながらインライン読み込みを追加するかどうかを判断すると、失敗しにくくなります。

高速化プラグインとの相性を確認する

すでにAutoptimizeなどの高速化プラグインを使っている場合、CSSやJSの結合・圧縮処理がSWELLの設定とバッティングして、表示崩れの原因になることがあります。

そうしたときは、次の順番で確認してみてください。

  • 高速化プラグイン側の「CSS最適化」「JS最適化」を一度オフにする
  • SWELLの「ファイルの読み込み」だけで問題なく表示されるか確認する
  • 問題がなければ、プラグイン側の機能を必要最低限だけオンに戻す
  • どちらかを切らないと崩れる場合は、「きちんと表示される設定」を優先する

最終的には、「SWELLの機能をベースにして、足りない部分をプラグインで補う」という考え方に落ち着くことが多いです。

ページ遷移高速化(Prefetch/Pjax)の使い方と注意点

ごとう
ごとう

ここからは少し上級編である「ページ遷移高速化」の話に入ります。内部リンクをクリックしたときの体感速度を上げられる一方で、相性が悪いと不具合の原因にもなりやすい部分です。

PrefetchとPjaxの違いと向き・不向き

ページ遷移高速化には、「Prefetch」と「Pjax」の2種類があります。

ざっくり違いを整理すると、次のようになります。

種類 おおまかな動き 向いているサイト 注意点
Prefetch リンクにカーソルを乗せた段階などで、次のページを先に読み込み始める 関連記事を次々と読むブログ型サイト アクセスが多いとサーバー負荷が増えやすい
Pjax 必要なコンテンツ部分だけを差し替えるようにページを切り替える 構成がシンプルなサイトやポートフォリオ フォームや一部プラグイン、広告などが正常に動かない場合がある
使用しない ページ遷移高速化機能をオフにする トラブルを確実に避けたい一般的なブログ 内部リンククリック時の体感速度は通常のまま

私の感覚としては、「よほどこだわりがなければ最初はオフ」「条件が合っていそうなら、Prefetchだけ試す」という順番で検討するくらいがちょうどいいと思っています。

ページ遷移高速化によるトラブルを防ぐチェックリスト

もしPrefetchやPjaxをオンにする場合は、次のポイントを必ず確認しましょう。

  • 問い合わせフォームが正常に送信できるか
  • 会員制プラグインやショッピングカートを使っている場合、ログイン状態が正しく維持されるか
  • アドセンスやクリック計測系の広告が、ページ遷移後も正しくカウントされているか
  • アクセスが多い時間帯にサーバーの負荷が急に跳ね上がっていないか

どれか一つでも不安な動きがあれば、速さよりも安定を優先してオフに戻す勇気も大事です。

SWELL設定以外でできる高速化チェックリスト

ごとう
ごとう

ここからは、SWELLの高速化設定だけではカバーしきれない「サイト全体の見直しポイント」を整理していきます。このあたりを押さえておくと、テーマの高速化機能がより効きやすくなります。

プラグイン・画像・サーバーの見直し

WordPressの表示速度に大きく関わる代表的な要素を、表にまとめると次のようになります。

項目 チェック内容 対策の例
プラグイン 似た機能のプラグインが重複していないか 使っていないもの、役割がかぶっているものは停止・削除する
画像サイズ 元画像が必要以上に大きくないか アップロード前に長辺を適度なサイズまで縮小しておく
画像圧縮 圧縮プラグインを使っているか EWWW Image Optimizerなどで自動圧縮する
サーバー 極端に安いプランや共有スペースを使っていないか WordPress向けの高速プランや、評判の良いサーバーへの乗り換えを検討する

特に「プラグイン」と「画像」は、少し意識するだけで体感速度が変わりやすい部分です。

SWELLの高速化設定を整えるタイミングで、一緒に見直しておくと相乗効果が期待できます。

すぐできる「やりすぎない」高速化のコツ

最後に、私が実際に試して「これはやってよかった」と感じた、簡単な高速化のコツをいくつか挙げておきます。

  • アイキャッチ画像は、テーマ推奨サイズを目安に大きくしすぎない
  • 不要になったプラグインは、停止だけでなく削除まで行う
  • サイドバーやフッターのウィジェット、広告の数を絞り、「本当に見てほしいもの」だけを残す
  • SWELLの高速化タブは、一気にいじらず、「1ブロックずつ変更→表示チェック」の流れを徹底する

高速化は、やろうと思えばいくらでも細かく追い込めますが、やりすぎると管理が大変になったり、逆にトラブルが増えたりします。

「読者が快適に読めること」と「自分が運営しやすいこと」の両方を満たすラインを探っていきましょう。

用途別SWELL高速化おすすめ設定プリセット

ごとう
ごとう

ここまで読んで、「結局、自分のサイトでは何をオンにすればいいの?」と思った方もいると思います。そこで、用途別にざっくりとしたおすすめ設定の組み合わせを作ってみました。

ブログ運営者・アフィリエイト向けの例

一般的なブログ、広告多めのサイト、デザイン重視サイトそれぞれで、SWELLの高速化設定の方向性をまとめると次のようになります。

用途 キャッシュ 遅延読み込み ファイルの読み込み ページ遷移高速化
一般的なブログ キャッシュ項目は基本的に全オン 記事下とフッター、画像を中心にオン 必要なCSSだけ読み込むをオン、インラインは様子を見て導入 原則オフ
広告多めのアフィリエイト キャッシュは基本オンだが、調整しながら運用 画像はオン、広告周りの遅延は慎重に 必要なCSSだけ読み込むをオン トラブル回避のためオフ推奨
デザイン・演出重視サイト 更新頻度が高い部分はキャッシュを控えめに アニメーションとの相性を見ながら調整 インラインよりも「表示崩れしないこと」を優先 サイトの構成を理解したうえで、必要なら慎重に検証

あくまでスタートラインなので、ここから少しずつ自分のサイト用にカスタマイズしていくイメージでOKです。

設定を変えたあとは、必ず実際のページを開いて、見た目や動きに違和感がないかを確認しましょう。

SWELL設定 高速化に関するよくある質問

ごとう
ごとう

最後に、SWELLの高速化設定についてよくいただく質問を、Q&A形式でまとめます。迷ったときのチェックリストとしても活用してみてください。

Q1. SWELLの高速化設定だけで他の高速化プラグインは不要ですか?

A. サイトの作り方によって変わりますが、SWELLのキャッシュ・遅延読み込み・ファイル読み込みをきちんと整えれば、追加の高速化プラグインがなくても十分な表示速度が出るケースは多いです。

ただし、画像圧縮やCDNのように、SWELLとは役割が違う機能については、専用プラグインを使ったほうが楽な場合もあります。

まずはSWELLの高速化設定を一通り見直し、それでも足りない部分だけをプラグインで補う、という順番で考えるのがおすすめです。

Q2. ページ遷移高速化(Prefetch/Pjax)は、どちらを使うべきですか?

A. 正直なところ、「どちらも使わない」という選択肢も十分ありです。

PrefetchやPjaxは、うまくハマると体感速度がグッと上がりますが、その一方でフォームや広告、計測ツールが正しく動かなくなるリスクも抱えています。

内部リンク回遊が多く、フォームや会員機能が少ないブログなら、まずPrefetchだけを試してみるのはアリです。

その際は、問い合わせフォームの送信テストや広告のクリック計測など、重要な部分が問題なく動作しているかを必ず確かめてください。

Q3. SWELLの高速化設定を触ったらデザインが崩れてしまいました…

A. 多くの場合、「ファイルの読み込み」や「遅延読み込み」の設定が影響していることが多いです。

次の手順で、一度落ち着いて原因を切り分けてみてください。

  • SWELLの高速化タブで、ファイルの読み込み関連のチェックをいったんすべてオフにする
  • 同じく遅延読み込みの項目も最小限だけ残してオフにし、もう一度ページを表示して様子を見る
  • 崩れが直ったら、どの項目で崩れるのかを一つずつオンにしながら絞り込む

「一気に全部オンにしない」「おかしくなったら一度リセットする」というルールを決めておくだけでも、大きなトラブルをかなり防げます。

SWELL設定 高速化 設定のまとめ

この記事の内容をまとめます

  • SWELLの高速化タブは「キャッシュ」「遅延読み込み」「ファイルの読み込み」「ページ遷移高速化」の4本柱で考えると分かりやすい
  • まずはキャッシュと遅延読み込み、ファイルの読み込みから整え、トラブルが出にくい項目から設定していくのがおすすめ
  • ページ遷移高速化(Prefetch/Pjax)は、効果よりも安定性を優先し、必要なサイトだけ慎重に検証しながら使う
  • プラグイン・画像・サーバーなど、テーマ以外の部分も一緒に見直すと、SWELLの高速化設定がより活きてくる

今日からできる最初の一歩としては、「SWELL設定 > 高速化」タブを開き、キャッシュ機能と遅延読み込み機能の中から、安全そうな項目を一つだけオンにしてみることです。

そのたびに実際のページを開いて、表示や動きに問題がないかを確認しながら、自分のサイトにとってちょうどいい高速化設定を探していきましょう。

 

 

記事を読んだらコチラ
▼  ▼  ▼
ba15a