Twitterの埋め込みタイムラインを遅延読み込みさせる方法

Twitterの埋め込みタイムラインを簡単に遅延読み込みさせる方法を思いついたので、備忘録としてメモしておきます。 例として、Twitterの埋め込みタイムラインを使用していますが、他のサービスの埋め込みパーツでも同じ方法が使えると思います。 誰かの参考になれば幸いです。

Twitterの埋め込みタイムラインの問題点

一番の問題は、Twitterの埋め込みタイムラインが画面の表示領域外にあったとしても読み込まれてしまうことです。 しかも、スクリプトだけではなくタイムラインの中に含まれている画像なども同時に読み込まれてしまいます。 かなり下にスクロールしないと表示されない位置に置いてあったとしても、ファーストビューを表示した時点で読み込まれてしまうのです。 スマホサイトなどの縦長のページでは特に顕著です。

そこで、タイムラインを表示する必要があるときまで、読み込みを遅延させます。

<iframe loading="lazy">

画像を遅延読み込みさせる方法として、<img> タグに loading="lazy" 属性を使用する方法があります。 loading="lazy" 属性を付けると、その画像の読み込みは、表示する必要があるときまで遅延されます。

loading_lazy.png

この loading="lazy" 属性は <img> タグだけではなく、<iframe> タグでも使用できます。 これを利用します。

ただし、<iframe> タグの loading="lazy" 属性は、まだ未サポートのブラウザがあるので注意してください。 現在のところ、Google Chrome と Edge はサポートされています。 Safari はプレビュー中で、もうすぐサポートされるようです。

can_i_use.png

具体策

では、具体的にどうするかと言えば、下記の2つを行います。

  1. Twitterの埋め込みタイムラインだけのHTMLを用意する
  2. そのHTMLを <iframe loading="lazy"> で読み込む

<iframe> タグの中身が loading="lazy" 属性によって遅延読み込みされるので、 その中身であるTwitterの埋め込みタイムラインもまた遅延読み込みされるという仕組みです。

Twitterの埋め込みタイムラインだけのHTMLを用意する

Twitterの埋め込みタイムラインのコードだけが記述されたHTMLファイルを用意します。 Twitterの埋め込みタイムラインのコードは、https://publish.twitter.com/ から取得できます。

例)/html/twitter_timeline.html
HTML
<!DOCTYPE html>
<html>
<body style="margin:0">

  <!-- Twitterの埋め込みタイムラインのコード -->
  <a class="twitter-timeline" data-lang="en" data-height="600" href="https://twitter.com/laze_software?ref_src=twsrc%5Etfw"></a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<body>
</html>

<body> タグにはデフォルトでマージンが付いているので、それを無くすために style="margin:0" を指定しています。

<iframe loading="lazy"> で読み込む

あとは、表示したい場所で、先ほど用意したHTMLを <iframe loading="lazy"> で読み込むだけです。

HTML
<iframe src="/html/twitter_timeline.html" loading="lazy" scrolling="no" style="border:none; width:100%; height:600px"></iframe>

メリットとデメリット

気付いた方もいると思いますが、この方法にはデメリットがあります。

それは、<iframe> タグを経由することによって、HTTPリクエストが1回増えてしまうことです。 それならばそのHTMLを data URI を使って埋め込めば、HTTPリクエスト無しで行けるじゃないかと思うかもしれませんが、 残念ながら data URI を使うと遅延読み込みが効かなくなります(とても悲しい)。 将来的には改善されるかもしれませんが、現状では別ファイルにしてHTTPリクエストさせるしかありません。

そのため、Twitterの埋め込みタイムラインを表示している場所によっては逆効果にもなりえます。 ファーストビューやセカンドビューのような毎回読み込みが発生するような場所に表示されていては意味がありません。 また、<iframe> タグの loading="lazy" 属性が未サポートのブラウザでも同様です。 ただただHTTPリクエストが1回増えただけになってしまいます。

とはいえ、Twitterのスクリプトやタイムラインの画像が大量に毎回読み込まれることに比べれば、かなりマシなのではないかなと思います。 効果は状況によって変わります。特にスマホサイトのような縦長のページであればかなり効果的です。 メリットとデメリットを天秤にかけて判断してください。

まとめ

便利な世の中になったものです。

参考サイト

関連記事

最近のWebアプリでは、JavaScript を使ってがりがり処理することが多いです。動的にパラメータを渡して処理させることも多いのですが、うまく渡す方法を知らない人が意外と多いみたいです。なのでまとめてみます。誰かのお役にたてれば幸いです。前提説明しやすくするために下記の環境を想定します。文書型(DOCTYPE)HT ...