最近、ふと気づいたことがあります。

「ホームページが重いサイト」と「サクサク軽いサイト」には、決定的な違いがある。

その違いは何か?

結論から言うと…

✔ 重いサイトのほとんどは

YouTube動画をペタペタ埋め込んでいる

Googleマップを埋め込み表示している

この2つ。

どちらも便利。
どちらも見た目が良くなる。
どちらも「ついやってしまう」。

でも…
サイトが重くなる原因の “ド直球の犯人” が、この2つなんです。

特にトップページ。

「お知らせ」「サービス紹介」「店舗案内」
これらを“全部YouTube埋め込み + Googleマップ埋め込み”で並べると、
そりゃ重くなるわ…という状態になります。

■ YouTube埋め込み(iframe)が重い理由

YouTubeを <iframe> で埋め込むと、

  • YouTube本体のスクリプト
  • サムネイル画像
  • トラッキング用のJS
  • 広告や推奨動画のための読み込み

など、見えない裏側でめちゃくちゃ多くのファイルを読み込む必要があります。

1つならまだいい。
3つ、5つ、10個……と増えていくと、
スマホだとロードが追いつかず、スクロールがカクカク。

トップページの体感速度が一気に悪化するわけです。

■ Googleマップも同じく超ヘビー級

Googleマップの埋め込みも同じ構造。

地図を表示するたびに

  • 地図データ
  • スクリプト
  • ピン情報
  • 周辺情報
  • インタラクション用のファイル

などを大量に読み込みます。

“地図ひとつ” のようで、裏では膨大なデータが動いています。

■ でも…軽いサイトほど、この2つをやっていない

面白いのがここ。

軽いサイト → ほぼ埋め込みを使っていない。
重いサイト → とにかく埋め込みまくっている。

特に個人事業のホームページや店舗サイトでよくあるパターンが…

  • トップページの最初にYouTube埋め込み
  • 店舗の案内でGoogleマップ埋め込み
  • SNSもiframeで埋め込み
  • ブログにもYouTubeを直貼り

という “フル埋め込みコース”。

SEOが強いサイトや大手企業は、
これをほぼやっていません。

彼らは賢いので、

  • サムネイルだけ画像で表示
  • ユーザーがクリックした瞬間に動画を読み込む
  • Googleマップも「画像+リンク」にして軽量化

という “遅延読み込みスタイル” を徹底しています。

■ 解決策:サムネイル画像+リンクに変えるだけで爆速に

とてもシンプル。

YouTube用 → サムネイル画像 + 再生ボタン風デザイン(クリックでYouTubeへ)
Googleマップ → スクショ画像 + 「大きな地図で見る」リンク

これだけで…

  • サイト読み込み速度が激変
  • スクロールが滑らか
  • スマホの体感速度が爆上がり
  • コアウェブバイタルのスコア向上
  • SEOも改善

など、メリットしかありません。

たったこれだけの工夫で “重いホームページ” が一気に生まれ変わるのです。

■ まとめ:iframeは便利だけど「ほどほど」に

iframeは悪者ではありません。

ただ、トップページに多用するのは危険。

「ちょっと見栄えが良くなるから」と埋め込みを増やすほど、
サイトはどんどん遅く、重く、読み込みに時間がかかり、
ユーザーは離れていきます。

逆に、以下のように工夫するだけで劇的に改善します。

  • YouTube → 画像リンクで代用
  • Googleマップ → 画像リンクに変更
  • iframeは必要最低限にする

たったこれだけで、
今まで“重い”と思っていたホームページが、嘘みたいに軽くなります。

    コメントを残す