【Webサイトが重い！？】一発で劇的に軽くなるチェックポイント２つ（GoogleマップとYouTubeの埋め込み）

「自分のサイト、なんか重いなぁ…」
「ページを開くのに時間がかかる」
そんなお悩み、ありませんか？

実はその原因、たった２つの要素が関係していることが非常に多いんです。
それが――
YouTube動画の埋め込みとGoogleマップの埋め込みです。

この２つを見直すだけで、
劇的にページの読み込み速度が改善します！

チェックポイント①：YouTubeの埋め込みは“サムネ画像だけ”に！

トップページやブログに、YouTube動画を何本も埋め込んでいませんか？ 実はこれ、最も重くなる原因のひとつです。

YouTubeの埋め込みコード（iframe）は、 たった1本でも数百KB〜数MBの読み込みが発生します。 5本も並べたら、もうスマホではカクつくレベルです。

解決策

埋め込みをやめて、サムネイル画像＋再生ボタン風デザインに変更しましょう。

• 表示はただの静止画（軽量！）
• クリックされたらYouTubeページにリンク
• 見た目は動画風なのでUXも損なわれない

これだけで、ページ読み込みが3〜5倍速くなることもあります。

チェックポイント②：Googleマップは“簡易画像”で代用！

次に多いのが、Googleマップの埋め込み。 特に「アクセス」ページや「店舗情報」ページにそのまま貼り付けているケースです。

地図のiframeも非常に重く、 ページ読み込みのたびにGoogleのサーバーへアクセスが発生します。

解決策

1. 簡易マップを作ろう
   ⇒もし画像編集ソフトを使える方なら「目印だけ」の簡易マップを作りましょう。正直、情報が多すぎるGoogleマップより、目印だけの簡易マップの方が新規ユーザーには見やすくて喜ばれます
2. マップ画像を静止画に
   ⇒もし「１」のように画像が作れない場合は、Googleマップの静止画を貼り付けましょう。クリックするとGoogleマップに飛ぶ。という風にするだけでもOKです

これなら見た目もほとんど変わらず、 読み込みスピードが一気に軽くなります。

【ちょっと上級者向け】functions.phpにこちらを記入

上記２つで、だいたい速度は速くなったのが実感いただけると思います。が、コンテンツが多いサイトだと「もうちょっと速くしたい」という場合が出てきます。その場合、「functions.php」に下記コードを追記してください。（一応確認ですが、子テーマを使いましょう）

▼これをfunctions.phpの末尾に貼り付ける

// ヒーロー画像を優先読み込みにする（LCP対策）
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size){
  if( is_front_page() && !empty($attr['class']) && strpos($attr['class'], 'hero') !== false ){
    $attr['fetchpriority'] = 'high';
    $attr['loading'] = 'eager';
  }
  return $attr;
}, 10, 3);

これはいったい何をしているか？

これは「ヒーロー画像」（トップページに大きく表示されるメイン画像。ユーザーが最初に目にする主役の画像）だけを優先的に読み込ませる」 ための WordPress用スニペットです。

ブラウザが「どの画像を先に読み込むべきか」を判断しやすくするために、最上部の大きな画像（ヒーロー画像）だけ “fetchpriority=high” で最優先ロードさせます。

優先順位をつけることで全部一度に読み込ませるのではなく、段階的に読み込ませることで、「ファーストビュー」がいち速く表示されるようになります。