Lite YouTube Embedでサイトの読込を224倍速くする方法
最近SEOの順位が少し落ちていたので、PageSpeed Insightsでサイトトップページのスコアを測ってみたのですが、、
携帯電話
デスクトップ
以前測定した時には全スコア90以上あったのですが、暫く見ないうちにめちゃくちゃスコアが落ちてる、、
サイトのコンテンツが増えるにしたがって参照するリソースが増えたというのも要因の一つかと思いますが、FIDやINPなど「サイト自体のパフォーマンス」とは別に「実際のユーザー環境での評価」を考慮するといったGoogleの「サイトの快適さ」に関する方針転換も大きく影響しているようです。
First Input Delay (FID)
First Input Delay (初回入力までの遅延時間、FID) は、読み込みの応答性を測定するための重要なユーザーを中心とした指標です。これは、応答のないページを操作する場合のユーザー体験を数値化したものであり、FID が短ければ短いほど、そのページがユーザーにとって使いやすいものであることが保証されます。
Interaction to Next Paint (INP)
Interaction to Next Paint (INP)は、2024年3月にFirst Input Delay (FID)に取って代わる予定のCore Web Vitalの指標です。INPは、Event Timing APIからのデータを使用して応答性を評価します。インタラクションによってページが応答しなくなると、ユーザーエクスペリエンスが低下します。INPは、ユーザーがページと行ったすべてのインタラクションのレイテンシを観察し、すべての（またはほぼすべての）インタラクションが下回った単一の値を報告します。INPが低いということは、ページが一貫して、ユーザーのインタラクションのすべて、あるいは大部分に素早く応答できたことを意味します。
「サイト自体のパフォーマンス改善」であれば対処療法的に対応することが可能ですが、「実際のユーザー環境での評価」が考慮されるとなると、SEO対策もより広範で曖昧なものになりそうです。
何はともあれ、手っ取り早く改善できる指標から改善していきましょう。
YouTubeの読み込みが重い、、
携帯電話のパフォーマンススコアを著しく下げている原因として、YouTube関連の未使用スクリプトの読み込みが挙げられていました。
サイト表示のタイミングでiframeの読み込みを遅延出来れば、パフォーマンススコアを上げることが出来るかもしれません。
Lite YouTube Embedとは
そこで今回導入したのが「Lite YouTube Embed」です。
仕組みを簡単に説明すると、サイト表示した際にYouTube動画自体を読み込むのでなく、YouTube側から提供されたサムネイル画像を読み込ませておくことでサイト表示速度を上げ、クリックした際に改めてiframeの読み込み＆実行を行うといったものです。
Lite YouTube Embedの導入方法
必要なソースは以下のリンクにある「lite-yt-embed.css」と「lite-yt-embed.js」の２つです。
これらをダウンロードしてサーバーに設置しましょう。例えば、CMSにWordPressを使用していて「sample」というテーマを使用しているということであれば、「wp-content/themes/sample」あたりに設置すると良いかもしれません。
wp-content/themes/sample/lite-yt-embed.css
wp-content/themes/sample/lite-yt-embed.js
こんな感じで設置しましょう。
次に使用したいページのheadタグ内で上記のファイルを参照します。
WordPressであれば、、
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/lite-yt-embed.css" />
<script src="<?php echo get_template_directory_uri() ?>/lite-yt-embed.js"></script>
こんな感じで参照できます。
最後にYouTube動画を掲載したい箇所に以下のタグを貼り付けます（「XXXXXXXXXXX」の箇所は動画IDなので、任意の動画IDと入れ替えてください）。
<lite-youtube videoid="XXXXXXXXXXX" playlabel="Play"></lite-youtube>
上記の処置でPageSpeed Insightsのスコアがどれくらい改善されたでしょうか？
Lite YouTube Embedの導入結果
携帯電話
デスクトップ
ひとまずの処置としては上出来ですね。
