TwitterとInstagramとYouTubeの埋め込みを少しでも速く表示させる方法

自分の写真結城永人 -

TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。

通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。

サイトで外部ファイルを優先的に読み込む方法としてHTMLのリソースヒントの一つとしてpreload（先読み）のソースコードがあるので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。

Twitterの埋め込みコードを先読みする

Twitterの埋め込みコードを取得できる状態
Bloggerのバージョン２のテンプレートにページネーションを付ける記事のコメントに返信した｜結城永人

ツイートの右上の「…」のメニューから「ツイートを埋め込む」を選ぶと埋め込みコードを取得することができる。

Twitterの埋め込みコードの外部ファイル

現在、Twitterの埋め込みコードの最後のscriptタグがコンテンツを表示するために必要なJavaScriptプログラムを記載した外部ファイルの読み込み用になっている。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

scriptタグのsrc属性のURLがTwitterの埋め込みコードを少しでも速く表示するための先読みの対象になる。

Twitterの外部ファイルには「async」が付いているから他のコンテンツと並行的に処理される。なので読み込みも実行も普通よりも速い。もっと効率を上げるにはそれだけを抜き取ってサイトのソースコードの上の方に置く。head内などに記載すれば読み込みが早々に開始されて望ましい。

Twitter用の二種類の先読みのソースコード

HTMLかJavaScriptでTwitterの外部ファイルへのrel-preloadのマークアップを行う。

linkタグのマークアップ

<link href="//platform.twitter.com/widgets.js" rel="preload" as="script">

※URLの「https:」は付けても付けなくても構わない。
※XMLだと最後は「/>」と閉じタグが必須となる。

サイトのhead内にTwitterの埋め込みコードの外部ファイルのURLを入れたrel-preloadのlinkタグを記載する。

JavaScriptのプログラム

<script>
const plot = document.createElement("link");
plot.rel = "preload";
plot.as = "script";
plot.href = "//platform.twitter.com/widgets.js";
document.head.appendChild(plot);
</script>

※URLの「https:」は付けても付けなくても構わない。

HTMLのrel-preloadのlinkタグと同じものを生成してhead内に挿入するプログラムで、Twitterの埋め込みコードよりも先に実行されないと意味がないので、サイトのheadタグの閉じタグの中に置くべきだ。

Twitterの埋め込みコードは全て共通の外部ファイルを使用するので、かりに埋め込みコードを増やしてもう一方のblockquote（引用）タグがコンテンツ毎に必要になるとしても外部ファイルのscriptタグの方は埋め込みを行うページに一つだけあれば十分なんだ。

先読みのソースコードもそれに合わせて埋め込みコードを使用するページに、一つ以上、記載する必要はない。

Instagramの埋め込みコードを先読みする

Instagramの埋め込みコードを取得できる状態
大きな公園の縁に敷き詰められた紫の芝桜｜結城永人

投稿の右上の「…」のメニューから「埋め込み」を選ぶと埋め込みコードを取得することができる。

Instagramの埋め込みコードの外部ファイル

現在、Instagramの埋め込みコードの最後のscriptタグがコンテンツを表示するために必要なJavaScriptプログラムを記載した外部ファイルの読み込み用になっている。

<script async src="//www.instagram.com/embed.js"></script>

scriptタグのsrc属性のURLがInstagramの埋め込みコードを少しでも速く表示するための先読みの対象になる。

Instagramの外部ファイルには「async」が付いているから他のコンテンツと並行的に処理される。なので読み込みも実行も普通よりも速い。もっと効率を上げるにはそれだけを抜き取ってサイトのソースコードの上の方に置く。head内などに記載すれば読み込みが早々に開始されて望ましい。

Instagram用の二種類の先読みのソースコード

HTMLかJavaScriptでInstagramの外部ファイルへのrel-preloadのマークアップを行う。

linkタグのマークアップ

<link href="//www.instagram.com/embed.js" rel="preload" as="script">

※URLの「https:」は付けても付けなくても構わない。
※XMLだと最後は「/>」と閉じタグが必須となる。

サイトのhead内にInstagramの埋め込みコードの外部ファイルのURLを入れたrel-preloadのlinkタグを記載する。

JavaScriptのプログラム

<script>
const ploi = document.createElement("link");
ploi.rel = "preload";
ploi.as = "script";
ploi.href = "//www.instagram.com/embed.js";
document.head.appendChild(ploi);
</script>

※URLの「https:」は付けても付けなくても構わない。

HTMLのrel-preloadのlinkタグと同じものを生成してhead内に挿入するプログラムで、Instagramの埋め込みコードよりも先に実行されないと意味がないので、サイトのheadタグの閉じタグの中に置くべきだ。

Instagramの埋め込みコードは全て共通の外部ファイルを使用するので、かりに埋め込みコードを増やしてもう一方のblockquote（引用）タグがコンテンツ毎に必要になるとしても外部ファイルのscriptタグの方は埋め込みを行うページに一つだけあれば十分なんだ。

先読みのソースコードもそれに合わせて埋め込みコードを使用するページに、一つ以上、記載する必要はない。

YouTubeの埋め込みコードを先読みする

>YouTubeの埋め込みコードを取得できる状態

パソコン版の動画の概要欄の「共有」のメニューから「埋め込む」を選ぶと埋め込みコードを取得することができる。

YouTubeの埋め込みコードの外部サイト

現在、YouTubeの埋め込みコードのiframeタグのsrc属性のURLがコンテンツを表示する配信元のサイトになっている。

<iframe width="560" height="315" src="https://www.youtube.com/embed/WW-ilyTaXqE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

iframeタグのsrc属性のURLがYouTubeの埋め込みコードを少しでも速く表示するための先読みの対象になる。

およそiframeタグによる埋め込みコードは外部サイトの一意のアドレス（埋め込まれるコンテンツ毎に異なるもの）を指定しているから全ての埋め込みコードでsrc属性のURLが同じになることはない。

YouTube用の二種類の先読みのソースコード

HTMLかJavaScriptでTwitterの外部ファイルへのrel-preloadのマークアップを行う。

linkタグのマークアップ

<link href="埋め込みコードのsrc属性のURL" rel="preload" as="document">

※帯文字の部分を実際のURLの文字列と置き換える。
※URLの「https:」は付けても付けなくても構わない。
※XMLだと最後は「/>」と閉じタグが必須となる。

サイトのhead内にTwitterの埋め込みコードの外部ファイルのURLを入れたrel-preloadのlinkタグを記載する。

JavaScriptのプログラム

<script>
const ploy = document.createElement("link");
ploy.rel = "preload";
ploy.as = "document";
ploy.href = "埋め込みコードのsrc属性のURL";
document.head.appendChild(ploy);
</script>

※帯文字の部分を実際のURLの文字列と置き換える。
※URLの「https:」は付けても付けなくても構わない。

HTMLのrel-preloadのlinkタグと同じものを生成してhead内に挿入するプログラムで、YouTubeの埋め込みコードよりも先に実行されないと意味がないので、サイトのheadタグの中に置くべきだ。

YouTubeの埋め込みコードはコンテンツ毎に全て完全に異なるので、先読みのソースコードもそれに合わせて個別に記載しなくてはならない。

TwitterとInstagramはYouTubeの埋め込みコードを少し速く表示させる方法としてHTMLのリソースヒントからrel-preloadの方法を紹介した。

先読みのマークアップにはオプションがあってURLとファイル以外にもtype属性／MINE typeやcrossorigin属性／CORSやmedia属性／media queryを指定することもできるので、諸々の埋め込みコードを使用するサイトで、適宜、追加すると良いと思う。

もう一つ埋め込みのコンテンツが速く表示されるのと反対にサイトの他の部分が後回しで遅くならないともかぎらないは注意を要するかも知れないところなんだ。

HTMLのリソースヒントにはpreloadよりも軽いものとしてファイルを読み込まず、ブラウザの事前接続を確保するだけのdns-prefetchやpreconnectもあるので、サイトの他の部分の表示とバランスを取りながら埋め込みコードに使うこともできる。

コメント