Twitter の埋め込みタイムラインを遅延読み込みさせる方法
Twitter の埋め込みタイムラインを簡単に遅延読み込みさせる方法を思いついたので、備忘録としてメモしておきます。 例として、Twitter の埋め込みタイムラインを使用していますが、他のサービスの埋め込みパーツでも同じ方法が使えると思います。 誰かの参考になれば幸いです。
Twitter の埋め込みタイムラインの問題点
一番の問題は、Twitter の埋め込みタイムラインが画面の表示領域外にあったとしても読み込まれてしまうことです。 しかも、スクリプトだけではなくタイムラインの中に含まれている画像なども同時に読み込まれてしまいます。 かなり下にスクロールしないと表示されない位置に置いてあったとしても、ファーストビューを表示した時点で読み込まれてしまうのです。 スマホサイトなどの縦長のページでは特に顕著です。
そこで、タイムラインを表示する必要があるときまで、読み込みを遅延させます。
<iframe loading="lazy">
画像を遅延読み込みさせる方法として、<img> タグに loading="lazy" 属性を使用する方法があります。
loading="lazy" 属性を付けると、その画像の読み込みは、表示する必要があるときまで遅延されます。
この loading="lazy" 属性は <img> タグだけではなく、<iframe> タグでも使用できます。
これを利用します。
ただし、<iframe> タグの loading="lazy" 属性は、まだ未サポートのブラウザがあるので注意してください。
現在のところ、Google Chrome と Edge はサポートされています。
Safari はプレビュー中で、もうすぐサポートされるようです。
具体策
では、具体的にどうするかと言えば、下記の2つを行います。
- Twitter の埋め込みタイムラインだけのHTMLを用意する
- そのHTMLを
<iframe loading="lazy">で読み込む
<iframe> タグの中身が loading="lazy" 属性によって遅延読み込みされるので、
その中身である Twitter の埋め込みタイムラインもまた遅延読み込みされるという仕組みです。
Twitter の埋め込みタイムラインだけのHTMLを用意する
Twitter の埋め込みタイムラインのコードだけが記述されたHTMLファイルを用意します。 Twitter の埋め込みタイムラインのコードは、https://publish.twitter.com/ から取得できます。
<!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"> で読み込むだけです。
<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 のスクリプトやタイムラインの画像が大量に毎回読み込まれることに比べれば、かなりマシなのではないかなと思います。 効果は状況によって変わります。特にスマホサイトのような縦長のページであればかなり効果的です。 メリットとデメリットを天秤にかけて判断してください。
まとめ
便利な世の中になったものです。
