インスタを埋め込むとサイトは重くなる?｜読み込むものと表示速度の確かめ方
「インスタの投稿一覧を貼ったら、ホームページが重くなるのでは」という心配はもっともです。写真をたくさん並べるのですから、何も読み込まないページよりは読み込みが増えます。大事なのは、何をどれだけ読み込むのかを知り、自分のサイトで実際に測って判断することです。この記事では、Social Feed by grip space のウィジェットがページを開いたときに何を読み込むのか、画像をいつ読むのかをコードに沿って説明し、PageSpeed Insights とブラウザの開発者ツールで影響を確かめる手順、軽くするための設定をまとめます。表示速度の数値はサイトや回線によって大きく変わるため、この記事では「このくらい速い」といった数値は示さず、測り方を紹介します。埋め込みの基本の流れはInstagramの投稿を自社サイトに埋め込む方法をご覧ください。
更新日：2026年10月12日
先に結論
- 読み込むのは、埋め込みタグの script 1本と、Instagramから配信される画像です。そのほかに、表示数を数えるための小さな通信が1回あります。
- グリッドでは、最初の1段(設定した列数の枚数)だけを先に読み込み、それより下の画像は見える位置に近づいてから読み込みます。
- スライダーは、送った先が空白にならないよう、表示件数ぶんの画像を最初にすべて読み込みます。
- 動画やリールの本体は、投稿を押して拡大表示を開いたときに初めて読み込みます。一覧に並ぶのは静止画のサムネイルです。
- 影響の大きさはサイトによって違うので、PageSpeed Insights と開発者ツールで「貼る前と後」を比べて確かめてください。
ウィジェットがページで読み込むもの
| 読み込むもの | 配信元 | いつ読み込むか | 補足 |
|---|---|---|---|
| 埋め込みタグの script 1本 | Social Feed のサーバー | ページを読んでいく途中で、タグの位置に来たとき | 投稿の情報と表示の処理が1本にまとまっている。別のCSSファイルやライブラリ、Webフォントは読み込まない |
| アカウントのアイコン画像 | ウィジェットを描いたとき | 「アカウント情報を表示」でアイコンを出す設定のときだけ | |
| 投稿の画像(グリッド) | 1段目はすぐ。2段目以降は見える位置に近づいたとき | 1段目の枚数は、設定した列数と同じ | |
| 投稿の画像(スライダー) | ウィジェットを描いたとき、すべて | 表示件数ぶん | |
| 動画・リールの本体 | 拡大表示を開いたとき | 開くまで読み込まない | |
| 表示数を数える通信 | Social Feed のサーバー | ウィジェットを描いたとき | 画像1枚ぶんの小さな通信を1回 |
ウィジェットは iframe を使わず、タグを置いた位置にそのままページの一部として描かれます。iframe の中に別のページを丸ごと読み込む方式ではないので、そのぶんの読み込みはありません。また、ウィジェットは Cookie や localStorage を使いません。
埋め込みタグの script は、ページが開かれるたびに最新の投稿と設定を入れて作られます。そのため、ブラウザには保存(キャッシュ)させない設定にしています。投稿の画像は、Instagramの画像配信サーバーから直接読み込みます。訪問者のブラウザがInstagramのサーバーと通信することになるので、外部送信の扱いが気になる場合は個人情報保護法と外部送信規律の記事もあわせてご覧ください。
script はタグの位置で読み込まれる
埋め込みタグは、async や defer を付けていない、ふつうの script タグです。ブラウザはページのHTMLを上から読み、このタグの位置に来たところで script を取りに行き、実行してから続きを読みます。web.dev の「サードパーティの JavaScript のパフォーマンス」でも、外部のサーバーから同期的に読み込むスクリプトはHTMLの解析を遅らせることがあると説明されています。
このため、タグを置く位置が大切です。ウィジェットはタグを置いた位置に描かれるので、表示したい場所に置くのが前提ですが、ページの先頭(head)にまとめて置くようなことはしないでください。ページの下のほうに置けば、それより上の本文や画像はタグの影響を受けずに先に読み込まれます。タグは書き換えずに、コピーしたまま貼ってください。
画像の遅延読み込みのしくみ
ブラウザには、画像に loading="lazy" という指定を付けると、画面に近づくまで読み込みを待つ機能があります。web.dev の解説では、この指定はページを開いた直後に見えない画像にだけ使い、開いた直後に見える画像には使わないよう勧めています。最初に見える画像まで待たせると、かえって表示が遅れるからです。
ウィジェットはこの考え方に沿っています。グリッドの1段目は、多くの場合ウィジェットが見えたときに最初に目に入る段なので、すぐ読み込みます。2段目より下は loading="lazy" にしているので、訪問者がそこまで画面を動かさなければ読み込まれません。たとえば4列・16件のグリッドなら、すぐ読み込むのは4枚で、残りの12枚は必要になるまで待ちます。ウィジェットをページの下のほうに置いた場合は、1段目も画面に入るまでは目に見えませんが、読み込みは始まります。
スライダーだけは考え方が違います。横にスクロールする一覧では、遅延読み込みが間に合わず、送った先の画像が空白のまま見えてしまうことがあるため、表示件数ぶんをすべて先に読み込みます。スライダーで件数を多くするほど、最初に読み込む画像が増える点を覚えておいてください。
| 設定の例 | すぐ読み込む投稿の画像 | あとで読み込む投稿の画像 |
|---|---|---|
| グリッド・4列・16件 | 4枚 | 12枚(画面に近づいたら) |
| グリッド・3列・9件 | 3枚 | 6枚(画面に近づいたら) |
| スライダー・4列・12件 | 12枚 | なし |
| スライダー・5列・30件 | 30枚 | なし |
投稿の画像はInstagramから配信されたものをそのまま使い、正方形のタイルに合わせて表示しています。表示する大きさに合わせて画像を縮小し直す処理はしていないので、1枚ごとの容量はInstagram側の画像によって決まります。読み込む量を減らしたいときに効くのは、すぐ読み込む画像の枚数を減らすことです。
レイアウトのずれ(CLS)について
ページを読み込んでいる途中で、あとから表示されたものに押されて本文がずれることがあります。これを測る指標が CLS(Cumulative Layout Shift)です。良好の目安は0.1以下です(後述の表)。原因としては、大きさを指定していない画像や、あとから大きさが変わる広告やウィジェットが挙げられています。
ウィジェットのタイルは、画像が届く前から正方形の枠として場所を取っています。そのため、画像が1枚ずつ届いても、まわりの文章が押し下げられることはありません。一方で、ウィジェット全体はタグの script が実行された時点で描かれ、その直後に置いた場所の幅に合わせて列数を調整します(スマホで列数が減るのはこの処理です)。この調整でタイルの大きさが変わることがあるので、実際のページで CLS を測っておくと安心です。
Wix、STUDIO、Googleサイトのように、埋め込みが決まった高さの枠の中に表示されるサービスでは、枠の高さはサービス側で決めます。枠の大きさは変わらないので、ページのほかの部分がずれることは起きにくくなります。枠の高さの決め方はWix、STUDIO、Googleサイトの記事で説明しています。
PageSpeed Insights で確かめる
PageSpeed Insights は、Googleが提供している、ページの表示の速さを調べるツールです。URLを入れると、モバイルとパソコンのそれぞれについて結果が表示されます。公式ヘルプ「PageSpeed Insights について」によると、結果には性質の違う2種類のデータがあります。
| フィールドデータ | ラボデータ | |
|---|---|---|
| 何のデータか | 実際の訪問者の体験(Chrome ユーザー エクスペリエンス レポート) | 決まった条件でページを読み込んだシミュレーション(Lighthouse) |
| 期間 | 過去28日間 | 調べたその時点 |
| 向いている使い方 | 訪問者が実際にどう感じているかを知る | 原因を探す、変更の前後を比べる |
| 注意点 | 訪問の少ないページではデータが出ないことがある | 調べるたびにスコアが少し変わる |
主な指標と「良好」の目安は、公式ヘルプで次のように示されています。フィールドデータでは、それぞれ75パーセンタイルの値で評価されます。
| 指標 | 何を表すか | 良好の目安 |
|---|---|---|
| LCP(Largest Contentful Paint) | いちばん大きな内容が表示されるまでの時間 | 2.5秒以内 |
| INP(Interaction to Next Paint) | 操作してから画面が反応するまでの時間 | 200ミリ秒以内 |
| CLS(Cumulative Layout Shift) | 表示中のレイアウトのずれ | 0.1以下 |
貼る前と後を比べる手順は次のとおりです。
- ウィジェットを貼る前のページを PageSpeed Insights で調べ、モバイルとパソコンのラボデータの各指標を書き留めます。スコアは毎回少し変わるので、3回以上調べて真ん中の値を使います。
- ウィジェットを貼って公開し、同じ条件でもう一度調べます。
- 差を比べます。特に LCP と CLS が「良好」の範囲に収まっているかを見ます。
- すでに公開しているページで比べたいときは、同じ内容のテスト用ページを作るか、ウィジェットを一時的に「非公開」にして比べます。非公開のあいだ、埋め込みタグは何も表示しません。
結果の下に出る診断の項目には、ページで使われている外部のサービスや、転送量の大きいリクエストの一覧が出ることがあります。Instagram の画像や Social Feed のサーバーがどのくらいの割合を占めているかの手がかりになります。項目の名前や並びは Lighthouse の版によって変わることがあります。
ブラウザの開発者ツールで中身を見る
もう少し詳しく見たいときは、Chrome の開発者ツールの「Network」パネルを使います。
- Chrome でページを開き、Windows は Control+Shift+J、Mac は Command+Option+J で開発者ツールを開き、「Network」タブを選びます。
- 再読み込みボタンを長押しして「キャッシュの消去とハード再読み込み」を選ぶと、すべてをサーバーから読み込んだときの様子が見られます。
- リソースの種類の絞り込みで画像を選ぶと、画像だけが並びます。ページを下へ動かしていくと、グリッドの2段目以降の画像があとから読み込まれる様子がわかります。
- 回線が遅いときを試すには、スロットリングのプルダウンで遅い回線を選びます。
- ウィジェットがない場合と比べたいときは、Social Feed の script のリクエストを右クリックしてブロックし、再読み込みして比べます。
軽くするための設定
| やること | 効果 | 設定する場所 |
|---|---|---|
| スライダーの表示件数を減らす | 最初に読み込む画像が減る | 表示件数 |
| たくさん並べるならグリッドにする | 2段目以降が遅延読み込みになる | レイアウト |
| グリッドの列数を必要以上に増やさない | 1段目(すぐ読み込む枚数)が減る | 列数 |
| ページの下のほうに置く | 本文や上の画像が先に読み込まれる | タグを貼る位置 |
| 全ページ共通の場所に置くのを見直す | ウィジェットが要らないページで読み込まなくなる | タグを貼る位置 |
| 1ページに複数置くのを控える | 読み込む script と画像が減る | タグを貼る位置 |
| アイコンを出さない | アイコン画像1枚ぶん減る | 表示する要素 |
全ページ共通のフッターにウィジェットを置くと、訪問者が見るすべてのページで読み込まれ、表示数もそのぶん数えられます。見てほしいページを絞って置くほうが、速さの面でも表示数の面でも無駄がありません。ページごとに件数や形を変えたいときはウィジェットを複数作る方法、見た目の調整はインスタ埋め込みのデザインをサイトに合わせるをご覧ください。
よくある質問
Instagram公式の埋め込みと比べて重いですか、軽いですか?サイトや貼る件数によって変わるため、この記事では比べた数値を示していません。両方を同じページで試し、PageSpeed Insights で比べるのが確実です。それぞれの方法の違いはホームページにInstagramを表示する3つの方法にまとめています。
PageSpeed Insights にフィールドデータが出ません。実際の訪問のデータが足りないページでは、フィールドデータが出なかったり、サイト全体の値が代わりに出たりします。その場合は、ラボデータで貼る前と後を比べてください。
script に async を付けてもよいですか?タグはコピーしたまま貼ってください。ウィジェットはタグの位置に描く作りなので、書き換えると表示の位置などが変わるおそれがあります。読み込みのタイミングは、タグを貼る位置で調整するのがおすすめです。
ウィジェットが表示されないのは、重いからですか?表示されない原因は、多くの場合、速さではなく設定や貼り方です。表示されない原因と直し方を順に確認してください。
まとめ
インスタの埋め込みで読み込むのは、script 1本と Instagram からの画像、表示数を数える小さな通信です。グリッドは1段目だけを先に読み込んで残りは遅延読み込みにし、スライダーは表示件数ぶんを先に読み込み、動画は拡大表示を開いたときに読み込みます。影響の大きさはサイトによって違うので、PageSpeed Insights と開発者ツールで貼る前と後を比べ、件数や置く場所で調整してください。まずは無料で登録して、テスト用のページで試せます。プランの違いは料金プラン、製品の紹介はSocial Feed by grip spaceのページにあります。
参考にした資料
Google for Developers「PageSpeed Insights について」 https://developers.google.com/speed/docs/insights/v5/about?hl=ja
PageSpeed Insights https://pagespeed.web.dev/
web.dev「ウェブ向けのブラウザレベルの画像遅延読み込み」 https://web.dev/articles/browser-level-image-lazy-loading?hl=ja
web.dev「Cumulative Layout Shift(CLS)」 https://web.dev/articles/cls?hl=ja
web.dev「サードパーティの JavaScript のパフォーマンス」 https://web.dev/articles/third-party-javascript?hl=ja
web.dev「遅いサードパーティの JavaScript を特定する」 https://web.dev/articles/identify-slow-third-party-javascript?hl=ja
Chrome for Developers「ネットワーク アクティビティを検査する」 https://developer.chrome.com/docs/devtools/network?hl=ja
