SWELLの遅延読み込みで表示速度アップ！初心者向け5ステップ

SWELLに変えたのにブログが重い、表示が終わるまで少し待たされる、そんなモヤモヤってありますよね。

この記事では、SWELLの遅延読み込みの仕組みと考え方、実際の設定例、不具合が出たときのチェックの順番までを詳しく解説していきます。

SWELLの遅延読み込みとは？まず全体像をサクッと理解しよう

SWELLの遅延読み込みで何が変わる？基本イメージ

遅延読み込み（Lazyload）は、かんたんに言うと「まだ画面に映っていない部分の読み込みを後回しにする仕組み」です。

ページを開いた瞬間に全部まとめて読み込むのではなく、「今見えているところから優先して読み込む」ことで、最初の表示を軽くします。

イメージしやすいように、遅延あり・なしを表で比べてみます。

項目	遅延なし（通常読み込み）	遅延あり（SWELLで遅延読み込み）
読み込み対象	ページ内の画像やスクリプトを一気に読み込む	画面外の画像・コンテンツ・スクリプトは後回し
ファーストビューの表示	重くなりやすく、完了まで少し時間がかかる	最初に見える部分が表示されるまでが軽くなりやすい
通信量	最初から大きくなりがち	最初は少なめで、スクロールに合わせて増える
向いているケース	要素が少ないシンプルなページ	画像・広告・埋め込みが多いページ

私のブログでも、画像が多いトップページに遅延読み込みを取り入れたところ、体感のもっさり感がかなり減りました。

ただし、やりすぎると「画像が出ない」「目次がズレる」といった副作用が出ることもあります。

このバランスをどう取るかが、SWELLの遅延読み込みを使いこなすポイントです。

SWELLのどこで遅延読み込みを設定するの？

SWELLの遅延読み込みに関する設定は、基本的に次の場所にまとまっています。

WordPressの管理画面で「SWELL設定」を開き、「高速化」というタブをクリックすると、いくつかの項目が並んでいるはずです。

ざっくり分類すると、こんなイメージです。

ブロック	主な役割	遅延読み込みとの関係
キャッシュ機能	ページの一部を保存して再利用する	表示そのものを軽くする仕組み
コンテンツの遅延読み込み	記事下やフッターなどを後から読み込む	ページ下部のコンテンツの読み込みタイミングを調整
画像等のLazyload	画像・動画・iframeの読み込みを後ろにずらす	いわゆる「画像の遅延読み込み」を担当
スクリプトの遅延読み込み	JavaScriptの読み込みを遅らせる	広告や解析、SNSなどのスクリプト向け

この記事では、この中でも「コンテンツ」「画像」「スクリプト」の3つに絞って、順番に見ていきます。

設定をいじる前に、今の状態をスクリーンショットやメモに残しておくと、「戻したいとき」に慌てずに済むのでおすすめです。

SWELL 遅延読み込みの基本設定｜コンテンツ・画像・スクリプト

管理画面でSWELLの高速化タブを開く手順

まずは入口です。

ここまでたどり着ければ、あとは順番に項目を見ていくだけです。

手順は次の通りです。

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

この高速化タブの中に、さきほど紹介した「コンテンツの遅延読み込み」「画像等のLazyload」「スクリプトの遅延読み込み」などが並んでいます。

設定を触る前に、テーマやプラグインの更新前後であれば、バックアップを取っておくとより安心です。

コンテンツの遅延読み込み｜記事下とフッターのおすすめ設定

最初に見るのが「コンテンツの遅延読み込み」です。

ここでは、ページの下の方にあるブロックを後から読み込むかどうかを決めます。

よく出てくるのは、次の2項目です。

• 記事下コンテンツを遅延読み込みさせる
• フッターを遅延読み込みさせる

それぞれをON／OFFにしたときのイメージをまとめると、こんな感じです。

項目	設定内容	メリット	注意点
記事下コンテンツ	遅延読み込みをON	記事本文の読み込みが軽くなりやすい	記事下に重いウィジェットがあるほど効果が出やすい
フッター	遅延読み込みをON	ページ最下部の読み込みを後ろにずらせる	遅延対象のパーツ内ウィジェットはページ分岐が効かなくなる
共通	両方ON	ファーストビュー〜本文の表示がスムーズになりやすい	フッターの出し分けをしている場合は挙動を要確認

公式の説明でも、「遅延読み込みされるエリアのウィジェットではページ分岐が無効になる」と書かれています。

たとえば「フッターの人気記事をトップページでは非表示にする」といった細かい出し分けをしている場合、フッター遅延をONにすると思った通りに動かないことがあります。

私のおすすめとしては、次の順番で試すことです。

• まずは「記事下コンテンツの遅延読み込み」だけONにする
• 問題がなければ「フッター」もONにしてみる
• フッターの出し分けで不具合が出た場合は、記事下だけONに戻す

画像等のLazyload｜nativeとスクリプト、どちらを選ぶ？

次が、いわゆる「画像の遅延読み込み」にあたる「画像等のLazyload」の設定です。

SWELLでは、主に次のような選択肢から1つを選びます。

• 使用しない
• loading=”lazy”を使用する（ブラウザ標準）
• スクリプトを使って遅延読み込みさせる（lazysizes.js）

それぞれの特徴をざっくり表にすると、こんなイメージになります。

設定	仕組み	向いているサイト	おすすめ度
使用しない	すべて通常読み込みで表示	ほとんど画像がないページ	あまりおすすめしない
loading=”lazy”	ブラウザ標準のLazyloadを使う	一般的なブログや情報サイト	まずはここからが無難
スクリプトで遅延	lazysizes.jsで画像やiframeを遅延	画像・動画・埋め込みが多いリッチなページ	使いこなせる人向け

はじめてSWELLの遅延読み込みを触るなら、「loading=”lazy”を使用する」を選ぶのが一番扱いやすいです。

WordPress本体もこの仕組みに対応しているので、プラグインやテーマとの相性も取りやすく、トラブルが少なめです。

一方で、lazysizes.jsなどのスクリプトによるLazyloadは、うまくハマると画像・動画・iframeまでしっかり遅延できて強力ですが、目次からのジャンプ位置がズレたり、レイアウトが崩れる原因になることもあります。

「それなりにカスタマイズに慣れていて、もし崩れても自分で切り分けできそう」という人向けの選択肢と考えておくと安心です。

スクリプトの遅延読み込み｜入れすぎ注意の設定ポイント

3つ目のポイントが「スクリプトの遅延読み込み」です。

ここは、広告タグやアクセス解析、SNSの埋め込みスクリプトなどを、どこまで遅らせるかを決める部分です。

一般的に、次のようなスクリプトが遅延候補になります。

スクリプトの種類	例	遅延したときのメリット	注意点
アクセス解析	Googleアナリティクス、タグマネージャーなど	計測系の読み込みでページが重くなるのを抑えられる	計測開始が少し遅れることがある
広告系	AdSenseや各種アドネットワークのタグ	広告読み込みによるカクつきを減らせる	広告の表示が少し遅れたり、タグによっては相性問題が出る
SNS関連	X（旧Twitter）埋め込み、Facebookウィジェットなど	SNSボタンやタイムラインが多いページの体感速度が上がる	ウィジェットの表示が遅れる

ここでのコツは、「とりあえずありそうなもの全部」を遅延させないことです。

解析タグ、広告タグ、SNSウィジェットのように、もともと読み込みが重いパーツから優先して遅延させ、それ以外は様子を見ながら少しずつ広げていく方が安全です。

SWELLの公式サイトでは、実際に使われている遅延対象キーワードの例も紹介されています。

スクリプトの遅延を有効にする場合は、そうした具体例も参考にしながら、「必要なものだけを遅らせる」という意識で調整していきましょう。

SWELL 遅延読み込みで起こりがちなトラブルと対処法

画像・サムネイルが表示されない／消えてしまうとき

SWELLの遅延読み込みを有効にしたあと、「アイキャッチやサムネイルが出ない」「一覧で一部の画像だけ真っ白」という相談はかなり多いです。

原因として多いのは、次のようなパターンです。

• 画像等のLazyloadの設定がサイトに合っていない
• SWELLと画像最適化プラグインの両方で遅延読み込みを行っている
• キャッシュ系プラグインに古い情報が残っている

とくに注意したいのが、「テーマ側とプラグイン側の二重Lazyload」です。

どこで遅延を担当するのかを整理した方が、トラブルは確実に減ります。

Lazyloadの担当	メリット	デメリット
SWELLのみ	テーマ側で完結するので管理がシンプル	画像圧縮などの細かい制御は別プラグインで行う必要がある
プラグインのみ	画像最適化とセットでLazyloadを管理しやすい	テーマとの相性を自分で確認する必要がある
SWELL＋プラグイン両方	設定次第で挙動が変わるが管理が複雑	画像が表示されないなどの不具合につながりやすい

私も以前、EWWW Image Optimizer側の遅延とSWELLのLazyloadを両方ONにしていて、アーカイブページのサムネイルだけ妙に表示が遅くなることがありました。

最終的には「SWELL側のLazyloadを使い、プラグイン側の遅延はOFF」にしたところ、挙動が安定しました。

画像まわりでおかしさを感じたら、いったんどちらか一方の遅延を止めて確認してみてください。

YouTubeや動画が表示されない・動かないとき

YouTubeの埋め込みや動画が多いページでは、遅延のかけ方を間違えると、動画がなかなか再生されなかったり、プレーヤー自体が表示されなかったりすることがあります。

チェックしたいポイントは、次のあたりです。

• 動画やYouTubeを埋め込んでいるブロックが、「コンテンツの遅延読み込み」の対象になっていないか
• 画像等のLazyloadで、iframeや動画もまとめて遅延していないか
• 外部スクリプト（プレーヤー用のJSなど）を、スクリプト遅延の対象に入れてしまっていないか

動画が止まる・出てこない場合は、まず「スクリプトの遅延読み込み」を一度OFFにし、それでも直らなければ「画像等のLazyload」の設定も見直してみてください。

その上で、どのスクリプトをどの程度遅らせるかを少しずつ追加していく方が、結果的に早く安定した設定にたどり着きます。

目次からのスクロール位置ズレ・スライダー崩れなど

遅延読み込みは、単に「速度」だけでなく、ページの高さやレイアウトにも影響します。

その結果、次のような症状が出ることがあります。

• 目次から見出しへジャンプしたときに、微妙に位置がズレる
• トップのスライダーの高さが変になったり、画像が途切れたりする
• フェードインなどのアニメーションのタイミングがおかしくなる

こうしたときは、次のような対処を検討してみてください。

• ファーストビューにあるメインビジュアルやスライダー画像は、遅延対象から外す
• 目次のスクロール位置ズレが気になる場合は、スクリプトによるLazyloadではなくloading=”lazy”に変更してみる
• 特定のページだけスクリプト遅延をOFFにして差を確認する

SWELLでは、「no-lazyload」といったクラスを画像に付けて遅延対象から外したり、フィルターフックを使って特定ページの遅延を無効化したりすることもできます。

コードを書くのが苦手な場合でも、「問題が出た場所の遅延を弱める・外す」という考え方だけ覚えておくと、原因探しの方向性が見えやすくなります。

サイトタイプ別｜SWELL 遅延読み込みおすすめ設定の考え方

ブログ・個人メディア向けのSWELL 遅延読み込み

日記系ブログや、レビュー・ノウハウ記事が中心の個人メディアでは、そこまで極端に重いパーツが乗っていないことが多いです。

私がよく採用している、ブログ向けのざっくりした方針は次のようなイメージです。

• コンテンツの遅延読み込みは、まず「記事下コンテンツ」をONにして様子を見る
• 画像等のLazyloadは、基本的にloading=”lazy”を選ぶ
• スクリプトの遅延は、解析タグと広告タグから少しずつ試す

このくらい控えめな設定でも、PageSpeed Insightsのスコアや体感速度がそこそこ変わるケースは多いです。

いきなり攻めた設定にするのではなく、「安定重視で軽くする」くらいの感覚で調整していくと、精神的にも楽です。

アフィリエイト・広告が多いサイト向け設定

アフィリエイトサイトや、広告が多めのメディアサイトでは、広告タグや外部スクリプトが速度のボトルネックになっていることがよくあります。

そうしたサイトでは、SWELLの遅延読み込みをうまく使うと、かなり体感速度が変わります。

考え方の例としては、こんな感じです。

• コンテンツの遅延読み込みは、「記事下」「フッター」両方ONで試す
• 画像等のLazyloadは、loading=”lazy”かスクリプトによるLazyloadを比較しながら調整する
• スクリプトの遅延では、広告タグやSNSウィジェットを重点的に遅らせる

ただし、広告には配信側のルールや推奨設定があるため、「遅延させすぎて広告の表示機会を損ねていないか」は必ずチェックしてください。

表示されるけれどクリックできない、タグの発火が正しく行われない、といった状態は避けたいので、タグの挙動をブラウザの検証ツールなども使いながら確認しておくと安心です。

企業サイト・LP向けのSWELL 遅延読み込み

企業サイトやランディングページでは、「ブランドイメージを壊したくない」「CTAボタン周りは絶対に崩したくない」といったニーズが強いです。

この場合は、「最初に見える部分は極力遅延させない」「下の方の要素を中心に遅延する」という考え方が扱いやすくなります。

サイトタイプ別のざっくりした設定例をまとめると、次のようなイメージです。

サイトタイプ	コンテンツ遅延	画像Lazyload	スクリプト遅延	ポイント
企業サイト（コーポレート）	フッターのみ遅延。重要なセクションは通常表示	基本はloading=”lazy”、メインビジュアルは遅延から除外も検討	アクセス解析を中心に軽く遅延	デザイン崩れを防ぐことを最優先にする
LP・セールスページ	ページ下部のセクションを中心に遅延	メインビジュアルやCTA付近の画像は遅延しない	チャットボットや外部ウィジェットを遅延	コンバージョン周りは確実な表示を優先する

同じSWELLでも、サイトの目的によって「どこまで遅延をかけていいか」は変わります。

この記事で紹介した考え方をベースに、「うちのサイトはどのタイプが近いかな？」と照らし合わせながら調整してみてください。

よくある質問｜SWELL 遅延読み込みの疑問をまとめて解決

Q1. SWELL 遅延読み込みを全部OFFにしたらダメですか？

A. ダメということはありません。

むしろ、不具合の原因を切り分けるために、いったんすべての遅延読み込み機能をOFFにしてから、少しずつ戻していくのは、とても良いやり方です。

ただ、常に全OFFのままだと、高速化の恩恵を受けられないのも事実です。

私なら次の順番で進めます。

• 一度すべての遅延読み込み設定をOFFにして、ページが正しく表示されるか確認する
• 問題が解消したら、「コンテンツ → 画像 → スクリプト」の順で1つずつONにしていく
• どこかで崩れたら、その項目をメモして別の設定に変えるか、OFFに戻す

この流れで進めれば、「どの設定が原因か分からない」という状況を避けやすくなります。

Q2. SWELLの画像Lazyloadとプラグインの遅延読み込み、どっちを使えばいい？

A. 基本的には、どちらか一方だけを使う方が安全です。

SWELLのLazyloadと、EWWW Image OptimizerやAutoptimizeなどのプラグイン側の遅延機能を同時に動かすと、意図しない挙動になりやすくなります。

迷ったときは、次のように試してみてください。

• まずはプラグイン側の遅延機能をOFFにし、SWELLのLazyload（loading=”lazy”など）だけで確認する
• それで問題なく表示されるなら、そのままSWELL側で運用する
• どうしてもプラグイン側の細かい制御が必要な場合は、SWELLのLazyloadをOFFにして、プラグイン側に寄せる

どちらが正解というより、「管理しやすい方に寄せる」「二重にかけない」がポイントです。

Q3. スクリプトの遅延読み込みでSEOが悪くなったりしませんか？

A. 一般的には、適切な範囲での遅延はむしろSEOにプラスに働きやすいです。

ページ表示が早くなれば、ユーザーにとってのストレスも減るからです。

ただし、次のようなケースには注意が必要です。

• 計測タグを遅らせすぎて、データが極端に抜け落ちてしまう
• 重要なコンテンツの表示まで遅れてしまい、ユーザーが「遅い」と感じる
• 広告やコンバージョン計測タグが期待通りに発火しない

SWELLのスクリプト遅延は、「コンテンツより外側にある周辺要素を遅らせる」くらいのイメージで使うと、SEO的にも運用的にもバランスを取りやすくなります。

まとめ｜SWELL 遅延読み込みは欲張りすぎず、ポイントを絞って使おう

ここまでの内容を整理します

そして、今日からできる「最初の一歩」はとてもシンプルです。

まずは自分のサイトで「SWELL設定 → 高速化」タブを開き、現在の遅延読み込み設定をスクリーンショットかメモで控えておきましょう。

その上で、この記事の内容を参考にしながら、

• コンテンツ遅延は控えめに試す
• 画像のLazyloadはloading=”lazy”から始める
• スクリプト遅延は欲張らず、重そうなものから少しずつ

という順番で調整してみてください。いきなり完璧を目指さなくて大丈夫です。少し変えて、表示を確認して、また少し変える。この繰り返しだけでも、SWELLの遅延読み込みはきっとあなたのサイトの力になってくれるはずです。