SNSのタイムラインを埋め込みつつ、Lighthouseのスコアを上げる

Lighthouseとは

GoogleがOSSとして開発している、ウェブサイト (ウェブアプリ) の品質チェックツールです。

Chromeの拡張機能としてインストールすることができ、ウェブサイトの表示速度やHTMLの構造チェック、JSのライブラリのバージョンによる脆弱性の有無などを教えてくれます。

SNSを埋め込んだ時の問題点

ウェブサイトを作ると、TwitterやInstagramのタイムラインを埋め込みたくなる時があります。

こういうやつです。(左がTwitter、右がInstagram)

Twitterの場合はこういうコードを記述するように、という指示です。

<a class="twitter-timeline" href="https://twitter.com/hinatan_net?ref_src=twsrc%5Etfw">Tweets by hinatan_net</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

中の処理としては、JavaScriptのロードが完了するとiframeが埋め込まれるようになります。

ところが、こういう処理を入れるとロードが重くなり、Lighthouseのスコアが下がります。

読み込んでいる画像ファイルが大きいだの色々文句を言われます。

対策

実際には他の場所の表示が十分早ければ体感速度には問題はないと思っています。
先ほどのLighthouseの結果のスクリーンショットでも、1コマ目からすでに正しくウェブサイトが表示されているので、訪問者がサイトのロードが遅いと感じることは無いでしょう。

ただ、他の遅い場所を調査したかったり、継続的なチェックをしたい場合にはこの原因を放置してスコアが低い状態になってしまうのは目障りです。

そこで、以下のようにJavaScritを埋め込み、タイムライン部分は別ファイルとして遅延読み込みするとOKです。

<script>
$(function(){
  setTimeout(function(){
    $("#timeline").load("/includes/timeline.html");
  }, 5000);
});
</script>

一緒に読み込ませるとスコアに影響するから遅延して読み込ませる、というだけの雑な対処療法ですが、これによってスコアがは上がり、他の本質的なチューニングに目を向けることができます。

私の場合、使ってないCSSの箇所が多いから減らせ、とか言われていますね。

実際の動作はサイトをみてもらえるとわかると思います。