YouTube動画やGoogle Mapsなどのiframe埋め込み。
WordPressでは簡単に設置できますが、表示速度を悪化させる原因になっていることがあります。
表示速度改善をご依頼いただくサイトでも、iframeを見直すだけでPageSpeed Insightsのスコアが改善するケースは少なくありません。
記事を書いた人は信じられる？
最初に簡単に自己紹介をさせてください。
私は独学でサイト表示速度の改善方法を学びました。
高速化作業はPageSpeed Insightsの分析結果で図ることができ、施策効果が目に見えるもので、体感的に改善を感じることもできます。
当時はAIも今ほど普及していなかったので試行錯誤でスキルを身に付けました。
そのスキルを活かして、2019年ころからサイト高速化業務に携わってきましたが、2026年現在、1,000サイトは軽く超えた作業実績があります。
自己申告なので証拠はと言われるとなかなか示しづらいところはありますが、ココナラでのWordPress高速化作業実績がNo.1なのは確固たる証拠と言えると思います。
もちろんココナラ以外にランサーズでも作業実績があり、このサイトから直接依頼されるケースも多いです。
同業者さんから難しい改善を依頼されることも多々あります。
ネット検索でのWordPressの表示速度改善方法やAIの提案はまだまだあまく、効果がないものまで紹介、提案されることすらあります。
WordPressの表示速度改善方法を紹介している記事を、PageSpeed Insightsで分析したことはありますか？
立派なことを書いているのに残念なスコアになっていたりしませんか？
もちろん、運営するこのサイトのPageSpeed Insightsのスコアはほぼ100点です。
私は日本一サイト高速化をしてきているプロ、それも証明できる実績のあるプロだと自己評価しています。
1,000サイト以上を改善してきた本当のプロが、実践で結果を出せる本当の改善方法をご紹介します。
▽coconalaでの評価
https://coconala.com/users/2093261/reviews
iframeとは？
iframeは、別のページやコンテンツを現在のページ内へ表示する仕組みです。
YouTube動画やGoogle Mapsだけでなく、予約システムやお問い合わせフォームなどにも利用されています。
WordPressではブロックエディタから簡単に埋め込めるため便利ですが、表示速度への影響は意外と大きいです。
ファーストビューには設置しない
私が表示速度改善をご依頼いただいた際、まずご提案するのが、iframeをファーストビューへ設置しないことです。
例えば、
- YouTube動画
- Google Maps
- 外部予約システム
- 外部フォーム
などは、表示速度の観点からできればページ中盤以降へ移動するのがおすすめです。
しかし、ファーストビューでアピールしたい！という需要も結構あるんですよね。
ここが難しいところです。
ファーストビューのYouTube埋め込み
どうしてもファーストビューへYouTube動画を設置したいケースもあります。
サイトの構造や趣旨上、位置を変更できないのであれば、クリックしてから動画を読み込む方法が効果的です。
初期表示ではサムネイル画像だけを表示し、ユーザーが再生ボタンをクリックしたタイミングで初めてYouTubeを読み込みます。
必要になったタイミングで読み込めば十分です。
WordPressなら「LazyLoad」というプラグインを利用すると、比較的簡単に実装できます。
似たような名前のプラグイン多いですが、↑これです。
ファーストビュー以外は遅延読み込みする
ファーストビュー以外に配置するiframeであれば、画像と同じように簡単に遅延読み込みできます。
iframeは loading="lazy" にも対応していますし、lazysizesを利用した遅延読み込みももちろん可能です。
というかWordPressならバージョン5.7からデフォルトでiframeに loading="lazy" が付いているはずです。
テーマやプラグインによって無効化されていなければですが。
おすすめしている「EWWW Image Optimizer」なら、画像の遅延読み込みを有効にするだけで、iframeも一緒に遅延読み込みされます。
特別な設定を追加しなくても利用できるため、非常に便利です。
ファーストビューに近いYouTube埋め込み
ファーストビューには表示されていないものの、そのすぐ下にYouTube動画が配置されているケースもあります。
できれば、さらにページの下へ移動したいところですが、なかなか難しいんですよね。
位置を変更できない場合は、先に紹介したクリックしてから動画を読み込む方法に加えて、遅延読み込みのしきい値を調整する方法もあります。
例えば、「EWWW Image Optimizer」でも使われているlazysizesなら data-expand 属性を利用すると、iframeを読み込み始めるタイミングを細かく調整できます。
<iframe class="lazyload" data-src="○○" data-expand="100"></iframe>こうすると、表示されている画面から約100px手前まで近付いたタイミングで読み込みが始まります。
まとめ
iframeは便利ですが、使い方によっては表示速度へ大きく影響します。
実務では、
- まず配置場所を見直す
- ファーストビュー以外は遅延読み込みする
- ファーストビューのYouTubeはクリック後に読み込む
この順番で改善を検討します。
iframeも広告タグやチャットボットと同じサードパーティリソースの一つです。
必要なものを、必要なページで、必要なタイミングに読み込む。
これが、WordPressの表示速度改善では大切だと考えています。
コメントを残す