内部改善ロードマップ Vol.17【第3部】SNS埋め込みを軽くする設計：静的カード＋クリック読込で安定させる

SNSの埋め込み（X/Twitter・Instagram・TikTok）は、
“サイトを重くする三大要因” のひとつです。

タイムラインをそのまま貼るだけで、

• 外部スクリプト

• 計測タグ

• 画像の自動ロード
  などが一気に動き始め、
  INP（操作の滑らかさ）が悪化したり、スクロールがガタついたり（CLS）
  という症状がよく起こります。

でも実は、SNS埋め込みは “工夫次第でめちゃくちゃ軽くできる” 要素なんです。

ポイントは、
「自動で読まない」→「静的で見せる」→「必要なときだけ開く」
という順序に切り替えること。

今回の記事では、SNSを

• 軽くする設計

• 壊れても困らない構成（フォールバック）

• CLS/INP を悪化させない置き方

の3つセットで整理します。

SNSが原因で重くなったページを改善したい方は、この章を押さえるだけでほぼ解決できます！

📘 本記事で分かること（要点）

• SNSが「重くなる」理由（外部JS・画像自動ロード・API依存）

• 静的カード（画像＋テキスト）＋クリックで展開という基本パターン

• X/Twitter・Instagram・TikTok に共通する軽量化の型

• 初期表示で読み込ませない“遅延とユーザー主導”

• 失敗時でも読者が困らない フォールバックの作り方

• CLS・INPを悪化させない 置き方（章末／本文内制御）

• SNSを複数置くときの注意点（スクリプト多重読み込みの回避）

  

まず“埋める前提”を疑う（判断フロー）

SNS埋め込みは「ちょっと貼るだけ」のつもりが、
ページの重さやガタつきの主犯になりやすい要素です。
なぜなら、裏側で大量の外部JSと画像ロードが動く から。

でも逆に言うと、
「そもそも埋めなくていいものを埋めていない？」
という視点を持つだけで、驚くほど軽くできます。

まずは、SNS埋め込みにも使える “埋める／埋めない” の判断フロー を紹介します。
この判断を一度挟むだけで、サイト全体の負荷がかなり下がりますよ。

リンクで足りる？ — SNSアプリで見るほうが操作しやすいケースが多い

X/Twitter・Instagram・TikTok など、ほとんどのSNSは
アプリ側の操作性のほうが圧倒的に優秀 です。

つまり、わざわざページ内に埋め込まなくても、

• 「投稿はこちら（Xを開く）」

• 「Instagramで見る」

• 「TikTokで再生する」

といった 外部リンク1本 だけで十分なケースがとても多いんです。

埋め込みは “便利そうに見えるだけ” のことも多く、
あまり再生されない投稿なら、リンクでの誘導が最適解になります。

静的で伝わる？ — 投稿の画像化＋引用テキストで簡単に代替できる

SNSの投稿は、画像化するだけで8割の情報が伝わる ことが多いです。

• ポスト（ツイート）のスクリーンショット

• Instagram投稿のサムネ画像

• TikTok動画の1シーン

• 投稿本文のテキスト引用

これらを組み合わせた “静的カード” は、
埋め込みよりずっと軽く、読み込み負荷もゼロ。
さらに見た目も整えやすく、ページの世界観を崩しません。

“投稿そのもの” をページ内で再生する必要がなければ、
静的カード＋「続きを読む」リンクだけで十分です。

どうしても埋める場合 — 本文途中に置かず、1〜2枠を章末にまとめる

（約230字）

「この投稿は埋め込みで見せたい！」というケースもありますよね。
そのときは “最小限だけ、下の方にまとめて置く” が鉄則です。

• 1記事あたりの埋め込みは1〜2枠が目安

• 本文の途中には置かない（スクロール中の描画負荷が増え、INP悪化）

• 章末やページ下部にまとめて配置する

• 静的カードも併置する（障害時のフォールバック）

SNSウィジェットは、地図以上に “途中に挟むと重い” 性質があります。
そのため、重要な1本だけを残して、あとは外部リンクや静的カードに寄せる のが最適です。

これだけで、SNS埋め込みの負荷は驚くほどコントロールできます。

SNSは「静的カード＋クリックで展開」が基本

SNS埋め込みを軽くするうえで、もっとも効果が大きいのが
「静的カード（画像＋テキスト）→クリックしたら埋め込みを展開」
という基本パターンです。

動画編・地図編と同じで、SNSも
“最初から読み込ませない” だけで圧倒的に軽くできます。

SNSはとにかく外部JSが多く、初期表示で

• widget.js

• 画像の自動ロード

• トラッキング通信
  などが一気に走るため、INP（操作の滑らかさ）やCLS（レイアウト安定） に悪影響を与えがち。

でも、読み込みを 「クリックされたら初めて行う」 方式にすれば、これらの問題はほぼ消えます。

ここでは、SNS共通の軽量化設計を3つのステップで紹介します。

静的カード — 投稿の“見た目だけ”を軽く先出しする

SNS埋め込みの代わりにまず表示するのが、
“静的カード”（画像＋短いテキスト引用） です。

たとえば：

• X/Twitter → ポストのスクショ

• Instagram → 投稿画像 × 1枚

• TikTok → 動画の1シーン

• 投稿本文のテキスト引用（数行）

これらをカードとして置けば、ページは 何も読み込まずに情報だけ伝えられる 状態になります。

特にスマホでは「ちょっとだけ見たい」という人が多く、
動画全体を埋め込むよりも静的カードのほうが読みやすくて快適です。

“まず軽く見せる → 見たい人だけ開く”
この順番がSNSでは最も合理的なんです。

クリックで展開 — 押された瞬間だけ SNSウィジェットを読み込む

カードの上に 「投稿を開く」「続きはこちら」ボタン を置き、
読者が押した瞬間だけ SNS ウィジェット（iframe や外部JS）を生成します。

つまり、
見られない限り何も読み込まれない
という理想的な構造になります。

クリック後に読み込むのは次のような最低限だけ：

• widget.js（X/Twitter）

• Instagram embed.js

• TikTok player

• 必要な iframe

ここで大事なのは、初期JSをできるだけ置かない こと。
「クリック後に初めて外部JSを挿入する」ぐらいの軽さを目指しましょう。

これだけで SNS の重さは “ほぼゼロ” にできます！

複数SNSの埋め込みは“ひとまとめに展開”してJS多重ロードを防ぐ

SNSウィジェットは、サービスごとに 外部JSが1本ずつ必要 です。
そのため、

• X

• Instagram

• TikTok

などをバラバラの場所に埋め込むと、読者がスクロールするたびに
複数のJSが連続読み込みされてしまう 問題が起こります。

対策はとてもシンプルで、

• 章末にまとめて1つの“SNSコーナー”として置く

• 展開ボタンも並べて配置

• どれか1つ押されたときに必要なJSだけ読み込む

という設計にすると、JSの多重ロードを防ぎつつ、
INPの悪化も抑えられます。

フォールバック — 失敗しても読者が困らない導線づくり

SNS埋め込みは、“壊れやすい” という前提で設計することが大切です。
X/Twitter や Instagram、TikTok は

• API制限

• 表示障害

• 埋め込み仕様の変更
  などが定期的に起こるため、「昨日まで表示できていたのに、今日突然真っ白…」ということが本当に起こります。

だから SNS 埋め込みは、“表示されなくても読者が困らない設計” が必須。
これがないと、障害のたびに
「投稿が見えない…」「何も起きない…」
と UX が破綻します。

ここでは、SNS埋め込みに欠かせない フォールバック（代替導線） を3つ紹介します。

投稿が表示されなくても情報が伝わる“静的カード”を常に併置する

SNS埋め込みのすぐ上（または同じ場所）に、
静的カード（画像＋短いテキスト） を必ず置いておきましょう。

• ポスト（ツイート）ならスクショ＋本文引用

• Instagramは投稿画像1枚

• TikTokは動画の1シーン

このカードがあるだけで、万が一ウィジェットが壊れても、
読者は 「何の投稿か？」 を理解できます。

静的カード＝SNS障害に強い“保険”です。

公式アカウントや投稿URLへのリンクを必ず残す

SNS埋め込みは表示失敗時に
ボタンもテキストも消えるケース が多いため、
公式アカウントや投稿へのリンクは “別に” 必ず残しておきます。

• 「Xで見る」

• 「Instagramで開く」

• 「TikTokを再生する」

といった 外部リンクが独立して存在 していれば、
読者はウィジェット障害に関係なく目的の投稿にアクセスできます。

“外部リンクを残す” は、SNS埋め込みのもっとも重要なフォールバックです。

埋め込みが失敗したときのメッセージを表示する（読者が迷わない）

可能であれば、埋め込みが失敗したときの 簡易メッセージ を用意するのも有効です。

例：

投稿がうまく表示されない場合は、下のリンクからX/Twitterでご覧ください。

たったこれだけで、読者は “壊れてるのかな？” ではなく
「リンクから見ればいいんだ」 と理解できます。

SNSは外部依存が強いため、「失敗前提の設計」 が UX を守る鍵になります。

用語ミニ辞典

SNS埋め込みの軽量化でよく登場するキーワードを、
“考え方”に焦点を当ててシンプルに整理します。

● 静的カード（Static Card）

SNS投稿を 画像＋短いテキスト にして先出しする方法。
埋め込みを読み込まないため 最軽量。

● クリックで展開（Click-to-Expand）

静的カードの上のボタンを押したときだけ、
SNSのiframe／外部JS を読み込む方式。

● フォールバック（Fallback）

埋め込みが壊れたときの 代替導線。
スクショ、本文引用、公式リンクを残しておくのが基本。

● CLS／INP

SNSが悪化させやすい レイアウトの安定性／操作の滑らかさ の指標。

まとめ — SNS埋め込みは“静的で始めて、必要なときだけ動かす”が基本

SNS埋め込み（X/Twitter・Instagram・TikTok）は便利ですが、
外部JS・画像・API通信が一気に動く“最重量級コンテンツ” です。
そのため、何も考えずにページ内へ埋めると、
CLS（ガタつき）や INP（操作のモタつき） がすぐ悪化してしまいます。

今回紹介したように、

• 静的カード（画像＋テキスト）で先に見せる

• クリックで展開（Click-to-Expand）で初めて読み込む

• フォールバック（代替導線）を常に置く

• 章末にまとめて負荷の発火ポイントを集約する

という順で設計すれば、SNSを置いてもページは軽く安定します。

まずは “埋めない → 静的 → どうしても埋めるなら最小” の流れで考えること。
これが失敗しないSNS最適化の基本です！

別記事への導線 — 地図・動画・予約ウィジェットもまとめて軽くしよう

SNSと同じく、ページを重くする主要因は 地図・動画・予約ウィジェット の3つです。
どれも外部JSやAPI負荷が大きいので、配置と読み込みの制御 がとても重要になります。

続きは以下の記事で、それぞれを深掘りしています👇

• Vol.17-1｜動画埋め込みの最適化：サムネ＋クリック読込で軽量化する基本設計

• Vol.17-2｜地図埋め込みの最適化：静的プレビュー＋章末配置でCLSをゼロに

• Vol.17-4｜予約・チャットウィジェット：最重量級を軽く扱うための基本戦略

SNSだけ改善するより、ページ全体の埋め込みをまとめて設計 したほうが安定します。
次の記事で、さらに“速くて使いやすいページ”を一緒に作っていきましょう！

今回はここで終わりにしたいと思います！

最後までお読みいただきありがとうございました！

このブログでは「ChatGPT×副業」をテーマに、AIをフル活用したリアルな副業チャレンジを発信しています🎶

むずかしい話はナシで、「ちょっとやってみたいかも」と思えるような内容を目指しています😁

私は現在、ChatGPTを使ってTシャツのデザインを作って販売したり、

LINEスタンプのキャラ制作に挑戦したりしています👍

デザインの知識ゼロでも、AIの画像生成機能を使えばかなりいい感じになりますよ！

ブログの内容やSEO対策も、ぜんぶChatGPTに相談しながら書いています。

アイデアが出ないときも、相棒みたいに助けてくれます🎶

さらに、楽天ルームのレビュー文章もChatGPTと一緒に考えたり、

X（旧Twitter）の投稿や運用方法も提案してもらったりと、あらゆる場面でAIに頼っています。😅

「AIって便利そうだけど、自分にも使えるのかな？」

と思っている人には、ぜひ読んでほしいです。

このブログは、AI初心者でも副業が始められるように、

体験ベースでわかりやすく書いています。

私の成功も失敗もまるごとシェアしていくので、よかったら気軽に読んでいってくださいね。

Xでも日々の活動をゆるっと更新しているので、ぜひのぞいてみてください！

明日のあなたがより豊かになりますように😌

それでは、おやすみなさい😴

•