かとう
BLOG

pagespeedinsightsで『レンダリングを妨げるリソースの除外』する #4

YOUTUBEの埋め込みコードを遅延ロードする
YOUTUBEの埋め込みコードを使用しているページで、『第三者コードの影響を抑えてください』を解消する方法を紹介します。
 
やりたいこと
・再生ボタンが押されるまで<iframe>を読み込まない
・<iframe>を読み込むまでサムネイル画像を表示する
 
おまけ
・YOUTUBE以外(再生ボタンが無い)の<iframe>を遅延ロードさせる

デフォルト

HTML
 
 

遅延ロード

<iframe>の[src]を空にしておき、再生ボタンが押されると、[data-src]の内容を[src]に入れ、読み込みを開始します。
また、再生ボタンが押されるまで、ページに何も表示されないので、代わりのサムネイル画像と再生ボタンを前面に表示しています。
読み込みが始まると、<iframe>を前面に表示し、IFrame Player APIを使って再生を開始します。
 
おまけで、YOUTUBE以外の<iframe>だった場合は、[data-src]の内容を[src]に入れ、読み込みを開始します。
 
HTML

CSS

JS

無料お見積もり・
お問い合わせ

お見積もり・お問い合わせ・ミーティングは無料です。
正式にご注文頂くまで費用は発生しませんのでご安心ください。
まずはお気軽にご相談ください。